/* ===================================================================
   NICKOLAS TSORVAS — site.css
   Shared by every page. The homepage adds v3.css on top.
   The framework provides class. The work provides character.
   =================================================================== */

:root{
  --bone:#EEE7D8;          /* locked */
  --dark:#151516;          /* locked */
  --blue:#4B62A4;          /* accent only, never a field. 4.76:1 on bone. */
  --orange:#FF7A18;        /* the one warm accent */
  --grape:#2A1B6B;         /* the wordmark's far offset */
  --red:#C52D28;           /* the SPEC label, nothing else */

  --art:#D8D0C2;           /* artwork field / placeholder */
  --muted:rgba(21,21,22,.7);
  --rule:rgba(21,21,22,.18);
  --rule-strong:rgba(21,21,22,.28);

  --sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"Courier New",Courier,monospace;

  /* THE TYPE SCALE — one small set of sizes, used by every page.
     All in rem, so text follows the visitor's own browser text size and
     zooms cleanly. The fluid ones have real minimums for phones. */
  --fs-label:.8125rem;                                   /* 13px  short mono labels, client names, metadata */
  --fs-nav:.9375rem;                                     /* 15px  header links */
  --fs-small:1rem;                                       /* 16px  captions, credits, links, buttons */
  --fs-body:clamp(1.125rem,1.06rem + .28vw,1.25rem);     /* 18–20px  running copy */
  --fs-lede:clamp(1.25rem,1.1rem + .7vw,1.625rem);       /* 20–26px  a lead sentence */
  --fs-h2:clamp(1.625rem,1.2rem + 1.8vw,2.625rem);       /* 26–42px  section headings */
  --fs-greeting:clamp(1.875rem,1.55rem + 1.1vw,2.75rem); /* 30–44px  the homepage greeting */
  --fs-index-title:clamp(1.875rem,1.45rem + 1.5vw,2.875rem); /* 30–46px  campaign names in the index */
  --fs-page-title:clamp(2.125rem,1.45rem + 3vw,4rem);    /* 34–64px  a page's own title */

  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:40px; --s6:48px;
  --s8:64px; --s10:80px; --s12:96px; --s16:128px; --s24:192px;
  /* the page gutter never sits under a phone's notch */
  --gutter:max(clamp(20px,4vw,72px), env(safe-area-inset-left,0px), env(safe-area-inset-right,0px));
  --max:1440px;

  /* THE HEADER'S HEIGHT. The real value is measured and written here by the
     script in partials/site-header.njk and kept current by site.js. These
     two numbers are only the starting point (and the no-JavaScript value). */
  --header-h:121px;
}
@media (max-width:700px){ :root{--header-h:142px;} }

*{box-sizing:border-box;}
html{
  color-scheme:light; background:var(--bone);
  scroll-padding-top:calc(var(--header-h) + 16px);   /* anchors and focused things never hide under the header */
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
}   /* no smooth scrolling: the visitor owns the page scroll */
body{
  margin:0; padding-top:var(--header-h);             /* the room the fixed header takes */
  background:var(--bone); color:var(--dark);
  font-family:var(--sans); font-size:var(--fs-body); line-height:1.5;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
h1,h2,h3,p,dl,dd,figure,ul,ol{margin:0;}
img{display:block; max-width:100%;}
a{color:inherit;}
::selection{background:var(--blue); color:var(--bone);}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
a:focus-visible,button:focus-visible{outline:3px solid var(--orange); outline-offset:3px;}
.wrap{width:100%; max-width:var(--max); margin:0 auto; padding:0 var(--gutter);}
.mono{font-family:var(--mono); font-size:var(--fs-label); letter-spacing:.1em; text-transform:uppercase;}
.eyebrow{font-family:var(--mono); font-size:var(--fs-label); font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--blue);}
.mark{display:inline-block; width:12px; height:12px; background:var(--orange); vertical-align:baseline; margin-right:10px;}
[id]{scroll-margin-top:var(--s2);}

.skip{position:fixed; left:var(--gutter); top:8px; z-index:200; padding:12px 16px; background:var(--dark); color:var(--bone); font-family:var(--mono); font-size:var(--fs-small); text-decoration:none; transform:translateY(-300%);}
.skip:focus{transform:none;}


/* ===================================================================
   THE HEADER — one real element, on every page (partials/site-header.njk)

   Fixed to the very top of the screen, full width, opaque. Nothing else
   draws behind or above it: there is no second background layer and no
   script that shows or hides it. Safe-area padding (a phone's notch or
   status bar) is INSIDE it, so the header itself always touches the top
   edge. The page reserves its real height through --header-h.
   =================================================================== */
.site-header{
  position:fixed; top:0; inset-inline:0; z-index:100;
  background:var(--bone); border-bottom:1px solid var(--rule);
  padding-top:env(safe-area-inset-top,0px);
}
.site-header-in{display:flex; align-items:center; gap:var(--s2) clamp(18px,2.4vw,34px); padding:10px var(--gutter) 10px;}

/* THE WORDMARK — NICKOLAS / TSORVAS as real text, two lines, with the
   original orange (near) and grape (far) offsets drawn as hard shadows.
   No image, no extra font. It is about 205px wide on desktop and about
   150px on phones. The offsets are kept small at this size. */
.site-id{display:block; margin-right:auto; text-decoration:none; color:var(--dark);}
.wordmark{
  display:block; padding:0 5px 5px 0;                 /* room for the offsets */
  font-weight:700; font-size:2.625rem; line-height:.84; letter-spacing:-.05em; text-transform:uppercase; white-space:nowrap;
  text-shadow:2px 2px 0 var(--orange), 4px 4px 0 var(--grape);
}
.wordmark span{display:block;}
.site-role{display:block; margin-top:6px; font-family:var(--mono); font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--blue);}
.site-id:focus-visible{outline-offset:6px;}

.site-nav{display:flex; gap:clamp(18px,2.6vw,36px);}
.site-nav a{
  display:inline-flex; align-items:center; min-height:44px;
  font-family:var(--mono); font-size:var(--fs-nav); font-weight:700; letter-spacing:.05em; text-transform:uppercase; white-space:nowrap;
  color:var(--blue); text-decoration:none; border-bottom:2px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
.site-nav a:hover,.site-nav a:focus-visible{color:var(--dark); border-bottom-color:var(--blue);}
.site-nav a[aria-current]{color:var(--dark); border-bottom-color:var(--orange);}

/* the lamp: the light / dark switch. On = light mode, off = dark mode. */
.site-lamp{position:relative; flex:0 0 auto; width:42px; aspect-ratio:600/672;}
.lamp-body{position:absolute; inset:0; transform-origin:62% 100%;}
.lamp-body img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; transition:filter .22s ease;}
.lamp-mirror{position:absolute; inset:0; transform:scaleX(-1);}
.beam{position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; opacity:1; transition:opacity .18s ease;}
.lamp-hit{position:absolute; inset:-2px; width:calc(100% + 4px); height:calc(100% + 4px); background:transparent; border:0; padding:0; cursor:pointer; -webkit-tap-highlight-color:transparent;}
.lamp-hit:focus{outline:none;}
.lamp-hit:focus-visible{outline:3px solid var(--orange); outline-offset:2px;}
html[data-theme="dark"] .lamp-body img{filter:brightness(.62) saturate(.8);}
html[data-theme="dark"] .beam{opacity:0;}
.lamp-body.click{animation:lampClick .42s cubic-bezier(.18,1.4,.42,1);}
@keyframes lampClick{0%{transform:none;} 35%{transform:translateY(2px) scaleY(.985);} 100%{transform:none;}}
@media (prefers-reduced-motion: reduce){
  .lamp-body.click{animation:none;}
  .lamp-body img,.beam{transition:none;}
}

/* phones: the wordmark and the lamp on the first row, the three links on
   the second. All three stay visible; there is no menu button. */
@media (max-width:700px){
  .site-header-in{flex-wrap:wrap; row-gap:4px; padding-top:12px; padding-bottom:0;}
  .wordmark{font-size:1.9375rem; padding:0 4px 4px 0; text-shadow:1.5px 1.5px 0 var(--orange), 3px 3px 0 var(--grape);}
  .site-role{margin-top:5px;}
  .site-lamp{width:38px;}
  .site-nav{order:3; width:100%; gap:clamp(20px,8vw,44px);}
  .site-nav a{min-height:46px;}
}


/* ---------- SHARED PIECES ---------- */
.back{display:inline-flex; align-items:center; min-height:44px; font-size:var(--fs-small); color:var(--muted); text-decoration:underline; text-decoration-color:var(--rule-strong); text-underline-offset:5px; transition:color .15s ease, text-decoration-color .15s ease;}
.back:hover,.back:focus-visible{color:var(--dark); text-decoration-color:var(--blue);}

.btn{
  display:inline-flex; align-items:center; min-height:48px; font-family:var(--mono); font-size:var(--fs-small); font-weight:700; letter-spacing:.06em; text-transform:uppercase; text-decoration:none;
  color:var(--bone); background:var(--dark); border:1px solid var(--dark); padding:12px 22px; transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover,.btn:focus-visible{background:var(--orange); border-color:var(--orange); color:#151516;}
.btn--quiet{background:transparent; color:var(--dark);}

.p-idea{font-size:var(--fs-body); color:var(--muted); max-width:52ch;}
.p-meta{display:flex; flex-wrap:wrap; gap:6px var(--s3); margin-top:var(--s3);}
.p-meta span{font-family:var(--mono); font-size:var(--fs-label); letter-spacing:.08em; text-transform:uppercase; color:var(--muted);}
.p-meta .spec,.spec{color:var(--red);}
.p-credit{margin-top:var(--s2); font-size:var(--fs-small); line-height:1.6; color:var(--credit,rgba(21,21,22,.78));}

.facts{border-top:1px solid var(--rule);}
.facts div{display:flex; justify-content:space-between; align-items:baseline; gap:var(--s2); padding:12px 0; border-bottom:1px solid var(--rule);}
.facts dt{font-family:var(--mono); font-size:var(--fs-label); letter-spacing:.08em; text-transform:uppercase; color:var(--muted);}
.facts dd{font-size:var(--fs-small); text-align:right;}


/* ===================================================================
   ABOUT — /about/
   A wide page: the bio in a comfortable column, one portrait beside it,
   contact straight after the bio. Phones: intro, portrait, bio, contact.
   Words and portrait come from Pages CMS → About.
   =================================================================== */
.wrap--about{max-width:calc(1120px + 2*var(--gutter));}
.ab{display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,340px); gap:clamp(40px,7vw,112px); align-items:start; padding:clamp(36px,6vw,88px) 0 var(--s8);}
.ab-hello{font-weight:700; font-size:var(--fs-page-title); line-height:1; letter-spacing:-.045em;}
.ab-lede{margin-top:var(--s3); font-weight:700; font-size:var(--fs-lede); line-height:1.2; letter-spacing:-.025em; max-width:30ch;}
.ab-body{margin-top:var(--s5);}
.ab-body p{font-size:var(--fs-body); line-height:1.58; max-width:56ch;}
.ab-body p + p{margin-top:var(--s3);}

.ab-contact{margin-top:var(--s8); padding-top:var(--s4); border-top:1px solid var(--rule-strong);}
.ab-ask{margin-top:var(--s3); font-weight:700; font-size:var(--fs-lede); line-height:1.2; letter-spacing:-.025em; max-width:26ch;}
.ab-open{margin-top:var(--s2); font-size:var(--fs-body); color:var(--muted); max-width:40ch;}
.ab-email{margin-top:var(--s4);}
.ab-email a{font-weight:700; font-size:clamp(1.125rem,5.2vw,2.1rem); letter-spacing:-.02em; line-height:1.2; text-decoration:none; overflow-wrap:anywhere; border-bottom:3px solid var(--orange); padding-bottom:2px; transition:color .15s ease;}
.ab-email a:hover,.ab-email a:focus-visible{color:var(--blue);}
.ab-targets{display:flex; flex-wrap:wrap; gap:0 var(--s4); margin-top:var(--s3);}

.ab-me{margin:0;}
.ab-me img{width:100%; height:auto;}
.ab-me figcaption{margin-top:var(--s2); font-weight:700; font-size:var(--fs-body); line-height:1.25; letter-spacing:-.02em; white-space:pre-line;}
.ab-facts{margin-top:var(--s5);}

.ab-more{display:flex; flex-wrap:wrap; gap:0 var(--s4); padding:var(--s4) 0 var(--s12); border-top:1px solid var(--rule);}
.ab-more a,.ab-targets a{display:inline-flex; align-items:center; min-height:44px; font-size:var(--fs-body); text-decoration:underline; text-decoration-color:var(--rule-strong); text-underline-offset:5px; transition:color .15s ease, text-decoration-color .15s ease;}
.ab-more a:hover,.ab-more a:focus-visible,.ab-targets a:hover,.ab-targets a:focus-visible{color:var(--blue); text-decoration-color:var(--blue);}

@media (max-width:860px){
  .ab{display:flex; flex-direction:column; gap:0; padding-top:var(--s4);}
  .ab-main,.ab-side{display:contents;}
  .ab-intro{order:1;}
  .ab-me{order:2; margin-top:var(--s5); width:min(100%,360px);}
  .ab-body{order:3;}
  .ab-contact{order:4; margin-top:var(--s6);}
  .ab-facts{order:5; margin-top:var(--s6); width:100%;}
  .ab-lede{max-width:none;}
}


/* ---------- ROOM PAGES: Lately, walks, Notes, Resume ---------- */
.side-head{padding:var(--s4) 0 var(--s8);}
.side-head .back{margin-bottom:var(--s3);}
.side-head h1{font-weight:700; font-size:var(--fs-page-title); line-height:.98; letter-spacing:-.045em;}
.side-head p{margin-top:var(--s2); color:var(--muted); max-width:46ch;}

/* ---------- LATELY — looser, no dates ---------- */
.lately-grid{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--s6) clamp(32px,4.5vw,64px); align-items:start; padding-bottom:var(--s8);}
.item{border-top:1px solid var(--rule); padding-top:var(--s3);}
.item:nth-child(1){grid-column:1 / span 7;}
.item:nth-child(2){grid-column:9 / span 4;}
.item:nth-child(3){grid-column:1 / span 5;}
.item:nth-child(4){grid-column:7 / span 5;}
.item .cat{font-family:var(--mono); font-size:var(--fs-label); font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--blue);}
.item h3{margin-top:var(--s2); font-weight:700; font-size:1.375rem; letter-spacing:-.02em; line-height:1.2;}
.item:nth-child(1) h3{font-size:var(--fs-h2); letter-spacing:-.035em; line-height:1.08; max-width:18ch;}
.item p{margin-top:var(--s2); color:var(--muted); font-size:var(--fs-body); max-width:44ch;}

/* the street photo leads to the photography page */
.street{margin:var(--s3) 0 0; width:clamp(200px,20vw,280px);}
.street img{width:100%; height:auto; display:block; background:none; border:0; box-shadow:none;}
.street-link{margin-top:var(--s1);}
.street-link a{display:inline-flex; align-items:center; min-height:44px; font-size:var(--fs-small); color:var(--muted); text-decoration:underline; text-decoration-color:var(--rule-strong); text-underline-offset:5px;}
.street-link a:hover,.street-link a:focus-visible{color:var(--dark); text-decoration-color:var(--blue);}
@media (max-width:860px){ .street{width:min(260px,70%);} }

/* records on a magazine page — not Spotify UI */
.records{display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s4);}
.rec{margin:0; width:148px;}
.rec img{width:100%; height:auto; display:block;}
.rec figcaption{margin-top:10px;}
.rec-title{display:block; font-weight:700; font-size:var(--fs-small); letter-spacing:-.01em; line-height:1.25;}
.rec-artist{display:block; margin-top:3px; font-size:var(--fs-small); line-height:1.3; color:var(--muted);}
.rec--poster{width:170px; margin-top:var(--s3);}
@media (max-width:860px){ .rec{width:calc(33.333% - var(--s2)); min-width:96px;} .rec--poster{width:160px;} }
@media (max-width:1100px) and (min-width:861px){
  .item:nth-child(1){grid-column:1 / span 7;}
  .item:nth-child(2){grid-column:8 / span 5;}
  .item:nth-child(3){grid-column:1 / span 6;}
  .item:nth-child(4){grid-column:7 / span 6;}
}
@media (max-width:860px){
  .lately-grid{grid-template-columns:1fr; gap:var(--s5);}
  .lately-grid .item{grid-column:1 / -1 !important; margin-top:0 !important;}
}

/* lookbook: two columns, natural proportions, no cards */
.lookbook{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s12) var(--s8); padding-bottom:var(--s16); align-items:start;}
.lookbook figure{margin:0;}
.lookbook img{width:100%; height:auto; display:block;}
.lookbook figure:nth-child(even){margin-top:var(--s12);}
/* optional photo captions — never a mat, border or background */
.lookbook figcaption{white-space:pre-line; overflow-wrap:anywhere; margin-top:var(--s1); font-size:var(--fs-small); color:var(--muted); line-height:1.5;}
@media (max-width:860px){
  .lookbook{grid-template-columns:1fr; gap:var(--s8); padding-bottom:var(--s12);}
  .lookbook figure:nth-child(even){margin-top:0;}
}

/* resume: a picture of the page, and two plain ways to get the PDF */
.side-head--resume{padding-bottom:var(--s5);}
.resume-actions{display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s4); max-width:none;}
.resume-sheet{display:block; width:100%; max-width:920px; margin:0 auto var(--s8); border:1px solid var(--rule-strong); background:#EFE8DA;}
.resume-sheet img{width:100%; height:auto;}
.resume-sheet:focus-visible{outline-offset:4px;}


/* ===================================================================
   CAMPAIGN PAGES — /work/<slug>/
   The shared header stays on top. Under it: a compact identity block,
   then the campaign told in sections — a label, a line or two of page
   copy, and the actual pieces of work at their own proportions, on the
   page's own background.
   =================================================================== */
.cp-back{padding-top:var(--s2);}
.cp-status{margin-top:var(--s3); padding:16px 20px; max-width:72ch; border:1px solid var(--rule-strong); border-left:4px solid var(--orange); font-size:var(--fs-small); line-height:1.5;}
.cp-head{padding:var(--s4) 0 var(--s6); max-width:66ch;}
.cp-client{font-family:var(--mono); font-size:var(--fs-label); font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--blue);}
.cp-head h1{margin-top:var(--s1); font-weight:700; font-size:var(--fs-page-title); line-height:.98; letter-spacing:-.045em;}
.cp-head .p-idea{margin-top:var(--s3); max-width:none; font-size:var(--fs-body); line-height:1.45; color:var(--dark);}

/* the opening: a full-width image, a dark layer, the setup as live text */
.cs-hero{position:relative; isolation:isolate; overflow:hidden; display:grid; place-items:center; min-height:clamp(340px,64vh,700px); background:#151516; color:#F4EEE2;}
.cs-hero-bg{position:absolute; inset:0; z-index:-2; width:100%; height:100%; max-width:none; object-fit:cover;}
.cs-hero::after{content:''; position:absolute; inset:0; z-index:-1; background:rgba(10,10,12,.66);}
.cs-hero-in{width:100%; max-width:980px; padding:var(--s8) var(--gutter); text-align:center;}
.cs-hero-logo{width:min(300px,52vw); height:auto; margin:0 auto var(--s4);}
.cs-hero-label{margin-bottom:var(--s2); color:rgba(244,238,226,.86);}
.cs-hero-text{font-weight:700; font-size:clamp(1.375rem,1.05rem + 1.6vw,2.375rem); line-height:1.2; letter-spacing:-.025em;}

/* sections */
.cs-list{padding-top:var(--s2);}
.cs{padding:clamp(36px,5.5vw,80px) 0;}
.cs-words{max-width:62ch; margin-bottom:var(--s5);}
.cs-words:last-child{margin-bottom:0;}
h2.cs-label{margin-bottom:var(--s2); font-size:.875rem;}
p.cs-label{margin-bottom:var(--s1);}
.cs-heading{margin-bottom:var(--s2); font-weight:700; font-size:var(--fs-h2); line-height:1.06; letter-spacing:-.035em;}
.cs-body{font-size:var(--fs-body); line-height:1.5; max-width:58ch;}
.cs-body + .cs-body{margin-top:var(--s2);}
.cs-logo{width:min(320px,60vw); height:auto; margin-bottom:var(--s4);}

.cs-media{display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(12px,2vw,28px); align-items:start;}
.cs--pair .cs-media{grid-template-columns:repeat(2,minmax(0,1fr));}
.cs--social-grid .cs-media{grid-template-columns:repeat(4,minmax(0,1fr));}
.cs-piece{margin:0; min-width:0; width:100%;}   /* never wider than the file itself (inline max-width) */
.cs-piece img{width:100%; height:auto;}          /* natural proportions, nothing cropped */
.cs-piece figcaption{margin-top:10px; font-size:var(--fs-small); color:var(--muted); line-height:1.4;}
.zoom{display:block; cursor:zoom-in;}
.zoom:focus-visible{outline-offset:4px;}

.cs-split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,6vw,96px); align-items:start;}
.cs--split .cs-words{margin-bottom:0;}
.cs--split .cs-media{justify-items:center;}
.cs--split .cs-media--n2{grid-template-columns:repeat(2,minmax(0,1fr));}
/* a tall piece beside copy is sized by height, so it stays in view whole */
.cs--split .cs-media--n1 .cs-piece.is-tall{width:auto;}
.cs--split .cs-media--n1 .cs-piece.is-tall img{width:auto; max-width:100%; max-height:min(82vh,780px);}
.cs--pair .cs-piece{justify-self:center;}

.cs-transcript{margin-top:var(--s4); padding-left:var(--s3); border-left:2px solid var(--orange);}
.cs-transcript-label{color:var(--muted); margin-bottom:var(--s1);}
.cs-transcript-text{white-space:pre-line; font-size:var(--fs-body); line-height:1.6;}

.cs-embed{margin-top:var(--s6);}
@media (max-width:480px){ .cs-embed{margin-inline:calc(-1*var(--gutter));} }   /* the game gets the full width of a phone */
.cs-embed-title{text-align:center; margin-bottom:var(--s3);}
.cs-embed-note{margin-top:var(--s2); text-align:center; font-size:var(--fs-small); color:var(--muted);}

@media (max-width:860px){
  .cs--pair .cs-media{grid-template-columns:minmax(0,1fr);}
  .cs--social-grid .cs-media{grid-template-columns:repeat(2,minmax(0,1fr));}
  .cs-split{grid-template-columns:minmax(0,1fr); gap:var(--s5);}
  .cs--split .cs-media{justify-items:start;}
}

/* the older board list, only for a campaign that has no sections yet */
.cp-scroll{display:flex; flex-direction:column; gap:12px; padding-bottom:var(--s8);}
.cp-scroll img{width:100%; height:auto;}
.cp-scroll .pending{
  border:1px solid var(--rule-strong); background:var(--art); aspect-ratio:16/9;
  display:flex; align-items:center; justify-content:center; text-align:center; padding:var(--s4);
}
.cp-scroll .pending span{font-size:var(--fs-small); color:var(--muted); line-height:1.6;}
.cp-scroll .pending b{display:block; font-weight:700; font-size:1.375rem; letter-spacing:-.02em; color:var(--dark); margin-bottom:6px;}

.cp-credits{margin-top:var(--s8); padding:var(--s5) 0 var(--s6); border-top:1px solid var(--rule-strong);}
.cp-credits dl{margin-top:var(--s3); display:grid; gap:8px;}
.cp-credits dl div{display:flex; flex-wrap:wrap; gap:4px var(--s2); align-items:baseline;}
.cp-credits dt{min-width:150px; font-family:var(--mono); font-size:var(--fs-label); letter-spacing:.08em; text-transform:uppercase; color:var(--muted);}
.cp-credits dd{font-size:var(--fs-body);}
.cp-spec{margin-top:var(--s3); max-width:66ch; font-size:var(--fs-small); line-height:1.55; color:var(--muted);}
.cp-spec .spec{font-family:var(--mono); font-size:var(--fs-label); letter-spacing:.08em; text-transform:uppercase;}

.cp-bottom{border-top:1px solid var(--rule-strong); padding:var(--s3) 0 var(--s12); display:flex; justify-content:space-between; gap:0 var(--s4); flex-wrap:wrap;}
.cp-bottom a{display:inline-flex; align-items:center; min-height:48px; font-size:1.0625rem; text-decoration:underline; text-decoration-color:var(--rule-strong); text-underline-offset:5px; transition:color .15s ease, text-decoration-color .15s ease;}
.cp-bottom a:hover,.cp-bottom a:focus-visible{color:var(--blue); text-decoration-color:var(--blue);}

/* the larger view (a native <dialog>, opened by site.js) */
.zoom-dialog{position:fixed; inset:0; width:100%; height:100%; max-width:none; max-height:none; margin:0; padding:0; border:0; background:rgba(12,12,13,.96); color:#F4EEE2;}
.zoom-dialog::backdrop{background:rgba(12,12,13,.96);}
.zoom-scroll{width:100%; height:100%; overflow:auto; -webkit-overflow-scrolling:touch; padding:calc(72px + env(safe-area-inset-top,0px)) var(--gutter) var(--s4);}
.zoom-scroll img{display:block; margin:0 auto; max-width:min(100%,2400px); height:auto;}
.zoom-close{
  position:fixed; z-index:2; top:calc(12px + env(safe-area-inset-top,0px)); right:var(--gutter); min-height:48px;
  font-family:var(--mono); font-size:var(--fs-small); font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:#151516; background:#F4EEE2; border:0; padding:12px 18px; cursor:pointer;
}
.zoom-close:hover,.zoom-close:focus-visible{background:var(--orange);}
.zoom-close:focus-visible{outline:3px solid #F4EEE2; outline-offset:3px;}


/* ---------- NOTES ---------- */
.notes-date{display:block; font-family:var(--mono); font-size:var(--fs-label); letter-spacing:.1em; text-transform:uppercase; color:var(--blue);}
.notes-list{border-top:1px solid var(--rule-strong); padding-bottom:var(--s16);}
.notes-row{padding:var(--s5) 0; border-bottom:1px solid var(--rule);}
.notes-row h2{margin-top:var(--s2); font-weight:700; font-size:var(--fs-h2); line-height:1.08; letter-spacing:-.035em; max-width:24ch;}
.notes-row h2 a{text-decoration:none; border-bottom:1px solid transparent; transition:border-color .15s ease;}
.notes-row h2 a:hover,.notes-row h2 a:focus-visible{border-bottom-color:var(--blue);}
.notes-row p{margin-top:var(--s2); color:var(--muted); max-width:52ch;}
.notes-empty{padding:var(--s5) 0; font-size:var(--fs-body); color:var(--muted);}

.note-head .notes-date{margin-bottom:var(--s3);}
.note-head h1{max-width:18ch;}
.note-hero{margin:0 0 var(--s8);}
.note-hero img{width:auto; max-width:100%; height:auto; max-height:82vh;}
.note-body{max-width:62ch; padding-bottom:var(--s12);}
.note-body > * + *{margin-top:var(--s3);}
.note-body p,.note-body li{color:var(--muted); font-size:var(--fs-body); line-height:1.62;}
.note-body h2{margin-top:var(--s8); font-weight:700; font-size:var(--fs-h2); line-height:1.1; letter-spacing:-.035em; color:var(--dark);}
.note-body h3{margin-top:var(--s6); font-weight:700; font-size:1.375rem; letter-spacing:-.02em; line-height:1.2;}
.note-body ul,.note-body ol{padding-left:1.2em;}
.note-body li + li{margin-top:var(--s1);}
.note-body a{text-decoration:none; color:var(--dark); border-bottom:1px solid var(--blue);}
.note-body strong{color:var(--dark);}
.note-body blockquote{margin:var(--s8) 0; padding:0;}
.note-body blockquote::before{content:''; display:block; width:14px; height:14px; background:var(--orange); margin-bottom:var(--s3);}
.note-body blockquote p{font-weight:700; font-size:var(--fs-h2); line-height:1.08; letter-spacing:-.035em; color:var(--dark);}
.note-body img{width:100%; height:auto; margin:var(--s6) 0;}
.note-body hr{border:0; border-top:1px solid var(--rule); margin:var(--s8) 0;}
.note-body code{font-family:var(--mono); font-size:.9em;}
.note-body pre{overflow-x:auto; font-family:var(--mono); font-size:var(--fs-small); line-height:1.6; padding:var(--s3) 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);}


/* ===================================================================
   DARK THEME — html[data-theme="dark"]
   Deep teal field, bark brown secondary, warm white type, apricot accent.
   The four palette values come from Site Settings (--night-*). Everything
   else is mapped here, once. Campaign art and photographs are never
   recoloured. The wordmark keeps its orange and grape offsets.
   =================================================================== */
:root{
  --night-teal:#1A5557; --night-brown:#6B4B38; --night-text:#F4EEE2; --night-accent:#F6C27A;
}
html[data-theme="dark"]{
  color-scheme:dark;
  --bone:var(--night-teal);            /* page surface (and the header) */
  --dark:var(--night-text);            /* body text */
  --blue:var(--night-accent);          /* small labels, underlines, focus */
  --red:#FFAE9E;                       /* the SPEC label, 4.8:1 on teal */
  --art:var(--night-brown);            /* artwork placeholder field */
  --muted:rgba(244,238,226,.82);
  --rule:rgba(244,238,226,.2);
  --rule-strong:rgba(244,238,226,.32);
  --credit:rgba(244,238,226,.86);
}
@supports (color: color-mix(in srgb, red 50%, blue)){
  html[data-theme="dark"]{
    --muted:color-mix(in srgb, var(--night-text) 82%, transparent);
    --rule:color-mix(in srgb, var(--night-text) 20%, transparent);
    --rule-strong:color-mix(in srgb, var(--night-text) 32%, transparent);
    --credit:color-mix(in srgb, var(--night-text) 86%, transparent);
  }
}
html[data-theme="dark"] .btn{color:#151516; background:var(--night-text); border-color:var(--night-text);}
html[data-theme="dark"] .btn--quiet{background:transparent; color:var(--night-text);}
html[data-theme="dark"] .btn:hover,html[data-theme="dark"] .btn:focus-visible{background:var(--orange); border-color:var(--orange); color:#151516;}
html[data-theme="dark"] .skip{background:var(--night-text); color:#151516;}

/* a short cross-fade only while the lamp is switched, never on load */
html.theme-switching body,html.theme-switching .site-header,html.theme-switching .strip{
  transition:background-color .28s ease, color .28s ease, border-color .28s ease;
}
@media (prefers-reduced-motion: reduce){
  html.theme-switching body,html.theme-switching .site-header,html.theme-switching .strip{transition:none;}
}


/* ===================================================================
   ONE CAMPAIGN'S OWN LAYOUT — Aventon, "Amatour de France"
   work.njk writes each campaign's slug on <main data-campaign="…">, so a
   rule can be aimed at one campaign page without touching the others.
   =================================================================== */
/* the rider slides (and any other social grid on this page): two large
   columns instead of four small ones; one column on phones */
.cp[data-campaign="amatour-de-france"] .cs--social-grid .cs-media {
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(20px,3vw,40px);
}
/* Keep Aventon's phone mockup at the copy column's full width. */
.cp[data-campaign="amatour-de-france"] .cs--split .cs-piece.is-tall {width:100%;}
.cp[data-campaign="amatour-de-france"] .cs--split .cs-piece.is-tall img {
  width:100%;height:auto;max-height:none;
}
@media (max-width:860px) {
  .cp[data-campaign="amatour-de-france"] .cs--social-grid .cs-media {
    grid-template-columns:minmax(0,1fr);
  }
}