/* ═══════════════════════════════════════════════════════════════════════════
   site-2027-skin.css: the 2027 look for the pages written before it.
   Linked last in the <head> of every public page except the home page and
   The Studio, which carry the 2027 design natively. It changes type, colour,
   buttons and cards only. It never changes a page's layout or wording.
   To switch the skin off, remove this one <link> from a page.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1. tokens: the older pages read these names, so the palette follows */
html:root{
  --cream:#F7F3EC; --cream-dark:#EFE9DE;
  --ink:#16201F; --ink-soft:#47524F; --ink-muted:#6B7774;
  --teal:#79B4BA; --teal-dark:#2F7A80; --teal-light:#E8F5F6;
  --border:rgba(22,32,31,.1);
  --r:20px; --r-lg:26px;
  --shadow:0 1px 2px rgba(22,32,31,.06),0 10px 24px -14px rgba(22,32,31,.28);
  --shadow-lg:0 2px 4px rgba(22,32,31,.06),0 30px 60px -30px rgba(22,32,31,.4);
  --sm-accent:#2F7A80; --sm-accent-soft:#79B4BA; --sm-accent-tint:#E8F5F6;
}

/* 2. type */
html body{font-family:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;color:#16201F;-webkit-font-smoothing:antialiased}
html body p,html body li{font-family:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif}
html body h1,html body h2,html body h3{font-family:'Nunito',sans-serif;font-weight:900;letter-spacing:-.02em;color:#16201F;text-wrap:balance}
html body h1{letter-spacing:-.035em;line-height:1.04}
.sm-hero h1,.hero h1,.hero-inner h1,.hero-content h1{font-size:clamp(36px,4.7vw,62px)!important;line-height:1.04!important}
.sm-title,.sec-title{font-size:clamp(28px,3.3vw,42px)!important;line-height:1.1!important;letter-spacing:-.02em!important}
.sm-hero-lead,.hero-sub,.sm-lede,.sec-sub{font-family:'DM Sans',system-ui,sans-serif!important;color:#47524F!important}
.sm-hero-lead,.hero-sub{font-size:clamp(17px,1.45vw,20px)!important;line-height:1.6!important}
.sm-eyebrow,.eyebrow,.hero-eyebrow,.sec-eyebrow,.page-eyebrow,.sm-topic-n{font-family:'Nunito',sans-serif!important;font-weight:800!important;letter-spacing:.1em!important;color:#2F7A80}
.sm-hero h1 .sm-accent,.hero h1 em,.hero h1 span.accent,.sec-title em,.sm-title em{color:#2F7A80!important;font-style:normal}

/* 3. page and bands */
html body{background-color:#F7F3EC}
.sm-hero,.sm-band--cream,.hero{background-color:#F7F3EC}
.sm-band--tint{background-color:#E8F5F6}
.sm-aurora{opacity:.45}

/* 4. buttons: one pill, teal with dark text, as on the home page */
.sm-btn,.btn-primary,.btn-secondary,.btn-hero,.btn-cw,.btn-cg,.btn-cta-w,#sm-nav .btn-solid,#sm-nav .btn-ghost,.nd-primary,.nd-secondary{
  font-family:'Nunito',sans-serif!important;font-weight:900!important;border-radius:999px!important;letter-spacing:0!important}
.sm-btn--primary,.btn-primary,.btn-hero,#sm-nav .btn-solid,.nd-primary{
  background:#79B4BA!important;color:#16201F!important;border:0!important;
  box-shadow:0 2px 0 rgba(22,32,31,.14),0 10px 20px -12px rgba(47,122,128,.7)!important}
.sm-btn--primary:hover,.btn-primary:hover,.btn-hero:hover,#sm-nav .btn-solid:hover,.nd-primary:hover{
  background:#2F7A80!important;color:#fff!important;transform:translateY(-2px)!important;
  box-shadow:0 2px 0 rgba(22,32,31,.25),0 16px 28px -12px rgba(47,122,128,.85)!important}
.sm-btn--ghost,.btn-secondary,#sm-nav .btn-ghost,.nd-secondary{
  background:#fff!important;color:#16201F!important;border:1.5px solid rgba(22,32,31,.22)!important;box-shadow:none!important}
.sm-btn--ghost:hover,.btn-secondary:hover,#sm-nav .btn-ghost:hover{background:#16201F!important;color:#fff!important;border-color:#16201F!important}

/* 5. cards and mock windows: white, one thin edge, one soft lift */
.sm-card,.sm-rel-card,.sm-mock,.more-card,.subj-card,.feat-card,.vcard,.review-card,.rel-card,.compare-card,.side-card,.hero-card,.sm-topic{
  border-radius:24px!important;border:1px solid rgba(22,32,31,.08)!important;
  box-shadow:0 1px 2px rgba(22,32,31,.06),0 10px 24px -14px rgba(22,32,31,.28)!important}
.sm-topic{border-radius:16px!important}
.sm-chip{border-radius:16px!important;border:1px solid rgba(22,32,31,.08)!important;box-shadow:0 1px 2px rgba(22,32,31,.06),0 12px 24px -14px rgba(22,32,31,.3)!important}

/* 6. the closing band: the teal block from the home page */
.sm-cta,.cta-sec{background:#F7F3EC!important;padding:28px 24px 72px!important}
.sm-cta-inner,.cta-inner{max-width:1112px;margin:0 auto;padding:44px 44px 40px!important;border-radius:28px;background:#79B4BA;box-shadow:0 30px 60px -30px rgba(47,122,128,.8)}
.sm-cta h2,.cta-sec h2{color:#16201F!important}
.sm-cta p,.cta-sec p,.sm-cta-fine,.cta-note{color:#24403F!important}
.sm-btn--onteal,.btn-cw{background:#16201F!important;color:#fff!important;border:0!important;box-shadow:0 2px 0 rgba(0,0,0,.35),0 10px 20px -10px rgba(22,32,31,.6)!important}
.sm-btn--onteal:hover,.btn-cw:hover{background:#2F7A80!important;color:#fff!important}
.sm-btn--onteal-ghost,.btn-cg{background:rgba(255,255,255,.55)!important;color:#16201F!important;border:1.5px solid rgba(22,32,31,.2)!important}

/* 7. breadcrumb and small links */
.breadcrumb a{color:#2F7A80}

/* 8. The Studio strip on year pages (added by studio-band.js) */
.sb27{background:#fff;padding:72px 24px}
.sb27-in{max-width:1112px;margin:0 auto}
.sb27-k{font:800 12px 'Nunito',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#2F7A80;margin:0 0 10px}
.sb27 h2{font-size:clamp(28px,3.3vw,42px);margin:0 0 10px}
.sb27-lede{font-size:18px;line-height:1.6;color:#47524F;margin:0 0 28px;max-width:640px}
.sb27-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.sb27-card{display:block;text-decoration:none;color:inherit}
.sb27-pic{position:relative;aspect-ratio:4/3;border-radius:24px;display:grid;place-items:center;overflow:hidden;transition:transform .25s}
.sb27-card:hover .sb27-pic{transform:translateY(-4px)}
.sb27-pic img{max-width:78%;max-height:78%;object-fit:contain}
.sb27-soon{position:absolute;top:12px;left:12px;font:900 10.5px 'Nunito',sans-serif;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:#FFF3D6;color:#8A5A00}
.sb27-card b{display:block;margin-top:12px;font:900 18px/1.25 'Nunito',sans-serif;color:#16201F}
.sb27-card span.sb27-d{display:block;margin-top:4px;font-size:14.5px;line-height:1.5;color:#47524F}
.sb27-all{display:inline-block;margin-top:26px;font:900 16px 'Nunito',sans-serif;color:#2F7A80;text-decoration:none}
.sb27-all:hover{text-decoration:underline}
@media(max-width:900px){.sb27-grid{grid-template-columns:1fr 1fr}.sb27{padding:56px 20px}.sm-cta-inner,.cta-inner{padding:32px 24px!important}}

/* one featured Studio tool, shown where an older page used to show a retired tool */
.st27{display:block;padding:22px;text-decoration:none;color:inherit;background:#fff}
.st27-pic{position:relative;display:grid;place-items:center;aspect-ratio:16/10;border-radius:20px;overflow:hidden;transition:transform .25s}
.st27:hover .st27-pic{transform:translateY(-3px)}
.st27-pic img{max-width:66%;max-height:80%;object-fit:contain}
.st27-t{display:block;margin-top:16px;font:900 22px/1.2 'Nunito',sans-serif;color:#16201F}
.st27-d{display:block;margin-top:6px;font-size:15.5px;line-height:1.5;color:#47524F}
.st27-go{display:inline-block;margin-top:14px;font:900 15px 'Nunito',sans-serif;color:#2F7A80}
a.st27.st27--mini{display:grid;grid-template-columns:96px 1fr;column-gap:12px;align-items:center;padding:10px;margin-top:8px;border:1px solid rgba(22,32,31,.1);border-radius:14px}
a.st27.st27--mini .st27-pic{grid-row:1/3;aspect-ratio:1;border-radius:12px}
a.st27.st27--mini .st27-t{margin:0;font-size:15px;align-self:end}
a.st27.st27--mini .st27-d{margin:2px 0 0;font-size:12.5px;align-self:start}
.st27-four{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:22px!important;background:#fff}
.st27-four .sb27-card b{font-size:16px}
.st27-four .sb27-card span.sb27-d{font-size:13.5px}
.feat-copy .sb27-all{margin-top:18px}

/* the floating tags beside each demo window are retired: the 2027 home page does not use them and they cover the window's corners */
.sm-chip{display:none!important}
.sb27-soon{white-space:nowrap}
@media (max-width:640px){.sb27-soon{top:8px;left:8px;font-size:8.5px;padding:3px 7px;letter-spacing:.06em}}