/* ═══════════════════════════════════════════════════════════════════
   PRINT SYSTEM — the workshop-card language applied to the homepage.
   Three things carried over, per Arpit: solid blocks of colour, ONE
   abstract screenprint, and the kicker + hairline + heading masthead.

   Structure of a card, scaled to a page:
       solid colour field → print band → solid colour field
   The page alternates saturated fields against cream so the colour
   lands as an event. Colour tokens are screenprint.py's, unchanged.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  /* Ink tokens — identical to screenprint.py TOKENS */
  --cobalt:#3a73ff; --cobalt-deep:#1d3f99;
  --coral:#e54b43;  --coral-deep:#c02e37;
  --amber:#f2a541;
  --paper:#fdf9f2;          /* the cream the prints are pulled on */
  --ink:#1a1a2e;
  --ink-soft:#5c5c6e;
  --hairline:#e4dfd5;

  --on-dark:#fdf9f2;
  --on-dark-soft:rgba(253,249,242,.66);
  --rule-on-dark:rgba(253,249,242,.34);

  --t-display: clamp(2.9rem, 7.2vw, 6.5rem);
  --t-section: clamp(1.9rem, 3.6vw, 3rem);
  --t-lead:    clamp(1.125rem, 1.55vw, 1.45rem);
  --t-body:    1.0625rem;
  --t-small:   .875rem;

  --s-1:8px; --s-2:16px; --s-3:32px; --s-4:64px; --s-5:104px;

  --container:1600px; --edge:40px; --nav-h:64px;
  --font:'Inter',system-ui,sans-serif;
  --font-head:'Encode Sans','Inter',system-ui,sans-serif;
  /* The card's headings are heavy. That weight is the look — the
     achromatic system's 500 goes limp on a saturated field. */
  --w-display:800; --w-section:700; --w-title:600;
  --tr-display:-.03em; --tr-section:-.02em; --tr-title:-.012em;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--font);background:var(--paper);color:var(--ink);
     font-size:var(--t-body);line-height:1.55;-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}

.t-display{font-family:var(--font-head);font-size:var(--t-display);
           font-weight:var(--w-display);letter-spacing:var(--tr-display);line-height:.98;}
.t-section{font-family:var(--font-head);font-size:var(--t-section);
           font-weight:var(--w-section);letter-spacing:var(--tr-section);line-height:1.06;}
.t-lead{font-size:var(--t-lead);font-weight:300;letter-spacing:-.012em;line-height:1.42;}
.t-small{font-size:var(--t-small);line-height:1.5;}

/* ─── The kicker. Mono, tracked, uppercase — the card's top line. ─── */
.kicker{font-family:ui-monospace,'SF Mono',SFMono-Regular,Menlo,monospace;
        font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);}

/* ─── THE MASTHEAD DEVICE — kicker, hairline, heading. This is the
       single thing every block on the page has in common. ─── */
.masthead{margin-bottom:var(--s-3);}
.masthead .kicker{display:block;margin-bottom:14px;}
.masthead .rule{height:1px;background:var(--hairline);margin-bottom:var(--s-3);}
.on-dark .masthead .kicker{color:var(--on-dark-soft);}
.on-dark .masthead .rule{background:var(--rule-on-dark);}

.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--edge);}
.prose{max-width:66ch;}
.prose p{line-height:1.6;}
.prose p + p{margin-top:var(--s-2);}

/* ─── Fields: the solid blocks of colour. ─── */
.field{padding:var(--s-5) 0;}
.field-cream{background:var(--paper);}
.field-cobalt{background:var(--cobalt);}
.field-coral{background:var(--coral);}
.field-ink{background:var(--ink);}
.on-dark{color:var(--on-dark);}
.on-dark .t-small{color:var(--on-dark-soft);}

/* ─── Nav sits on the hero field, no panel. ─── */
.nav{position:absolute;top:0;left:0;right:0;height:var(--nav-h);z-index:50;}
.nav-inner{max-width:var(--container);margin:0 auto;height:100%;padding:0 var(--edge);
           display:flex;align-items:center;justify-content:space-between;}
.nav-mark{font-family:var(--font-head);font-size:var(--t-small);font-weight:600;letter-spacing:-.01em;color:var(--on-dark);}
.nav-links{display:flex;gap:var(--s-3);align-items:center;}
.nav-links a{font-family:ui-monospace,'SF Mono',SFMono-Regular,Menlo,monospace;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-soft);
  background:none;border:none;cursor:pointer;padding:0;display:inline-flex;align-items:center;gap:4px;}
.nav-links a:hover{color:var(--on-dark);}
.nav-links a.cta{color:var(--on-dark);border-bottom:1px solid var(--on-dark);padding-bottom:2px;}

/* ─── HERO — the card at page scale. Asymmetric: the claim holds the
       left, the credential sits in a narrow right rail. ─── */
.hero{position:relative;padding-top:calc(var(--nav-h) + var(--s-5));padding-bottom:var(--s-5);}
.hero-grid{display:grid;grid-template-columns:1.55fr .75fr;gap:var(--s-4);align-items:end;}
.hero-title{max-width:13ch;margin-bottom:var(--s-3);}
/* The cycling hero word, restored from the pre-achromatic template.html.
   Kept in the title's own cream rather than an accent: on a cobalt field
   coral falls to ~1.2:1 contrast and amber to ~2.2:1, both unreadable at
   any size. The motion is the effect. */
.cycle-word{display:inline-block;
  transition:opacity .25s ease, transform .25s ease;}
.cycle-word.swap{opacity:0;transform:translateY(10px);}
@media (prefers-reduced-motion:reduce){.cycle-word{transition:none;}}
.hero-sub{max-width:46ch;color:var(--on-dark);}
.hero-rail{border-top:1px solid var(--rule-on-dark);padding-top:var(--s-2);}
.ctas{display:flex;gap:var(--s-3);align-items:center;flex-wrap:wrap;margin-top:var(--s-4);}

/* ─── Buttons and links. One solid button, cream on the field. ─── */
.btn-solid{font-family:ui-monospace,'SF Mono',SFMono-Regular,Menlo,monospace;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  background:var(--paper);color:var(--ink);padding:15px 24px;display:inline-flex;gap:var(--s-1);}
.btn-solid:hover{background:var(--ink);color:var(--paper);}
.link-cta{display:inline-flex;align-items:center;gap:var(--s-1);font-size:var(--t-small);
          color:inherit;border-bottom:1px solid currentColor;padding-bottom:3px;}
.link-cta:hover{opacity:.66;}

/* ─── THE ONE PRINT. Full-bleed band, no frame, no caption box. ─── */
.band{display:block;width:100%;height:clamp(240px,34vw,460px);object-fit:cover;}

/* ─── SERVICES — solid blocks, 2px ink gutters (registration marks,
       not card gaps). Asymmetric: two wide, then three. ─── */
.blocks{display:grid;grid-template-columns:repeat(6,1fr);gap:2px;
        background:var(--ink);margin-top:var(--s-4);}
.block{padding:var(--s-4) var(--s-3) var(--s-3);min-height:290px;background:var(--blk);
       color:var(--on-dark);display:flex;flex-direction:column;justify-content:flex-end;
       transition:filter .12s linear;}
.block:hover{filter:brightness(1.13);}
.block.wide{grid-column:span 3;}
.block.third{grid-column:span 2;}
.blocks.two{grid-template-columns:1fr 1fr;}

/* ─── Workshop cards. Same composition as the LinkedIn posts in
       Arpit work/Workshops/workshop-posts/ — kicker, hairline, heavy title, the plate,
       then terms and a CTA — rebuilt as live text rather than a flat PNG so
       it stays readable, selectable, responsive and indexable, and pulled
       from the same screenprint plates so the two read as one thing. ─── */
.wcards{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--ink);
        margin-top:var(--s-4);}
.wcard{background:var(--wc);color:var(--on-dark);display:flex;flex-direction:column;
       transition:filter .12s linear;}
.wcard:hover{filter:brightness(1.13);}
.wcard-top{padding:var(--s-3) var(--s-3) var(--s-4);}
.wcard-top .kicker{display:block;color:var(--on-dark-soft);margin-bottom:12px;}
.wcard-rule{height:1px;background:var(--rule-on-dark);margin-bottom:var(--s-3);}
.wcard-title{font-family:var(--font-head);font-weight:var(--w-display);
             font-size:clamp(1.9rem,3.1vw,3rem);letter-spacing:var(--tr-display);
             line-height:1.02;text-transform:uppercase;}
.wcard-band{width:100%;height:clamp(120px,11vw,180px);object-fit:cover;display:block;}
.wcard-foot{padding:var(--s-3);display:flex;flex-direction:column;gap:12px;
            margin-top:auto;}
.wcard-detail{font-family:ui-monospace,'SF Mono',SFMono-Regular,Menlo,monospace;
              font-size:11px;letter-spacing:.14em;text-transform:uppercase;
              color:var(--on-dark-soft);}
.wcard-line{font-size:var(--t-small);line-height:1.5;color:var(--on-dark-soft);}
.wcard-cta{font-family:var(--font-head);font-weight:var(--w-section);
           font-size:clamp(1.05rem,1.4vw,1.35rem);letter-spacing:var(--tr-title);}
/* One tool card should not stretch across half the page — cap it and let
   the grid keep the same 2px ink gutter language. */
.wcards-tool{grid-template-columns:1fr 1fr;background:none;}
.wcards-tool .wcard{grid-column:1;}
@media (max-width:1000px){ .wcards{grid-template-columns:1fr;}
  .wcards-tool{grid-template-columns:1fr;} }
/* Visible placeholder — copy Arpit has not written yet. Deliberately
   ugly so it cannot ship by accident. */
.todo{outline:1px dashed currentColor;outline-offset:3px;opacity:.75;}
.block-num{display:block;margin-bottom:auto;color:var(--on-dark-soft);}
.block-title{font-family:var(--font-head);font-size:clamp(1.3rem,2vw,1.85rem);
             font-weight:var(--w-title);letter-spacing:var(--tr-title);line-height:1.12;
             margin-bottom:var(--s-2);}
.block-line{font-size:var(--t-small);line-height:1.55;color:var(--on-dark-soft);}
.block-meta{margin-top:var(--s-3);color:var(--on-dark-soft);}

/* ─── Rows on hairlines — used where reading matters more than colour. ─── */
.row{display:grid;grid-template-columns:minmax(210px,1fr) 2.3fr;gap:var(--s-4);
     padding:var(--s-3) var(--s-2);margin:0 calc(var(--s-2) * -1);
     border-top:1px solid var(--hairline);transition:background .12s linear,color .12s linear;}
.row:last-of-type{border-bottom:1px solid var(--hairline);}
.row-title{font-family:var(--font-head);font-size:var(--t-lead);font-weight:var(--w-title);
           letter-spacing:var(--tr-title);line-height:1.25;}
.row-desc{line-height:1.6;max-width:66ch;}
a.row:hover{background:var(--ink);color:var(--on-dark);}
a.row:hover .row-desc{color:var(--on-dark-soft);}
.row-cta{margin-top:var(--s-2);display:block;}

/* ─── Numbered columns — lifecycle and process. Rule on top, like the
       card's hairline, repeated as a rhythm. ─── */
.cols{display:grid;gap:var(--s-3);margin-top:var(--s-4);}
.cols-5{grid-template-columns:repeat(5,1fr);}
.cols-3{grid-template-columns:repeat(3,1fr);}
.col{border-top:2px solid currentColor;padding-top:var(--s-2);}
.col-num{display:block;margin-bottom:var(--s-2);}
.col-name{font-family:var(--font-head);font-size:var(--t-lead);font-weight:var(--w-title);
          letter-spacing:var(--tr-title);line-height:1.2;margin-bottom:var(--s-2);}
.col-body{font-size:var(--t-small);line-height:1.55;color:var(--ink-soft);margin-bottom:var(--s-2);}
.on-dark .col-body{color:var(--on-dark-soft);}

/* ─── STATEMENT — the coral field. Split, not stacked. ─── */
.split{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--s-4);align-items:end;}

/* ─── FOOTER — the ink field. ─── */
.footer-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:var(--s-4);
             padding-bottom:var(--s-4);margin-bottom:var(--s-4);
             border-bottom:1px solid var(--rule-on-dark);}
.footer-grid p{color:var(--on-dark-soft);max-width:32ch;margin-top:var(--s-2);}
.footer-col-title{display:block;margin-bottom:var(--s-2);color:var(--on-dark);}
.footer-col a{display:block;font-size:var(--t-small);color:var(--on-dark-soft);padding:5px 0;}
.footer-col a:hover{color:var(--on-dark);}
.footer-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--s-2);}
.footer-brand{display:flex;align-items:center;gap:var(--s-1);}
.footer-logo{width:30px;height:30px;}  /* the mark is already a coral block — do not filter it */

@media (max-width:1000px){
  :root{--edge:24px;--s-5:72px;}
  .hero-grid,.split{grid-template-columns:1fr;gap:var(--s-3);align-items:start;}
  .blocks{grid-template-columns:1fr;}
  .block.wide,.block.third{grid-column:span 1;}
  .block{min-height:0;}
  .cols-5,.cols-3{grid-template-columns:1fr 1fr;}
  .row{grid-template-columns:1fr;gap:var(--s-2);}
  .footer-grid{grid-template-columns:1fr 1fr;gap:var(--s-3);}
  .nav-links a:not(.cta){display:none;}
}
@media (max-width:620px){
  .cols-5,.cols-3{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
}


/* ═══════════════════════════════════════════════════════════════════
   PAGE TYPES BEYOND THE HOMEPAGE — same tokens, same masthead, no new
   type or spacing steps.
   ═══════════════════════════════════════════════════════════════════ */
.page-title{max-width:16ch;margin-bottom:var(--s-3);}
.page-sub{max-width:52ch;color:var(--on-dark);margin-bottom:var(--s-2);}
.page-note{max-width:64ch;color:var(--on-dark-soft);font-size:var(--t-small);line-height:1.6;}

.cols-4{grid-template-columns:repeat(4,1fr);}

/* ─── Service detail: a prominent statement heading with its explanation
       beside it. Replaced the 3- and 4-up numbered columns, which had no
       room for a paragraph. ─── */
.details{margin-top:var(--s-4);border-top:1px solid var(--hairline);}
.detail{display:grid;grid-template-columns:minmax(280px,1fr) 1.25fr;gap:var(--s-4);
        padding:var(--s-3) 0;border-bottom:1px solid var(--hairline);}
.detail-num{display:block;margin-bottom:var(--s-2);}
.detail-head{font-family:var(--font-head);font-size:clamp(1.2rem,1.7vw,1.6rem);
             font-weight:var(--w-section);letter-spacing:var(--tr-title);line-height:1.18;}
.detail-body{font-size:var(--t-body);line-height:1.62;color:var(--ink-soft);max-width:60ch;}

/* Prerequisite: what the client has to supply for this component to run at
   all. Set apart from the explanation by a rule and a mono label so it reads
   as a condition rather than as more prose. The label sits in its own grid
   column so wrapped lines hang under the text, not back under the label. */
.detail-prereq{max-width:60ch;margin-top:var(--s-2);padding-top:10px;
  border-top:1px solid var(--hairline);font-size:var(--t-small);line-height:1.55;
  color:var(--ink-soft);
  display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:baseline;}
.detail-prereq-label{font-family:ui-monospace,'SF Mono',SFMono-Regular,Menlo,monospace;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);}
@media (max-width:620px){ .detail-prereq{grid-template-columns:1fr;row-gap:4px;} }

/* ─── Workshop popup. Corner card, not a modal — no scrim, nothing blocked. ─── */
.popup{position:fixed;right:24px;bottom:24px;z-index:80;width:330px;max-width:calc(100vw - 32px);
  background:var(--ink);color:var(--on-dark);padding:var(--s-3) var(--s-3) var(--s-2);
  opacity:0;transform:translateY(14px);transition:opacity .26s ease,transform .26s ease;}
.popup.is-in{opacity:1;transform:none;}
.popup-kicker{display:block;color:var(--on-dark-soft);margin-bottom:10px;padding-right:24px;}
.popup-title{font-family:var(--font-head);font-weight:var(--w-section);
  font-size:1.4rem;letter-spacing:var(--tr-title);line-height:1.1;margin-bottom:var(--s-2);}
.popup-row{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;
  padding:12px 0;border-top:1px solid var(--rule-on-dark);}
.popup-row:hover .popup-name{text-decoration:underline;text-underline-offset:3px;}
.popup-chip{width:10px;height:10px;margin-top:5px;background:var(--pc);}
.popup-name{display:block;font-size:var(--t-small);line-height:1.35;}
.popup-meta{display:block;font-family:ui-monospace,'SF Mono',SFMono-Regular,Menlo,monospace;
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-soft);margin-top:4px;}
.popup-x{position:absolute;top:10px;right:10px;width:28px;height:28px;line-height:1;
  background:none;border:none;color:var(--on-dark-soft);font-size:20px;cursor:pointer;}
.popup-x:hover{color:var(--on-dark);}
@media (max-width:620px){ .popup{right:16px;left:16px;bottom:16px;width:auto;} }
@media (prefers-reduced-motion:reduce){ .popup{transition:none;} }
@media (max-width:1000px){ .detail{grid-template-columns:1fr;gap:var(--s-2);} }

/* The homepage service blocks use five colours; a drill-down page wears
   its own block colour, so all five need a field class. */
.field-cobalt-deep{background:var(--cobalt-deep);}
.field-coral-deep{background:var(--coral-deep);}

/* Colour chip on a case row — shows which service the case belongs to. */
.row-chip{display:inline-block;width:10px;height:10px;margin-right:9px;
  vertical-align:baseline;background:var(--chip);}

/* Other-services list on the ink field — hairline rows, one per line. */
.other-links{margin-top:var(--s-3);border-top:1px solid var(--rule-on-dark);}
.other-links a{display:block;padding:var(--s-2) 0;border-bottom:1px solid var(--rule-on-dark);
  font-family:var(--font-head);font-size:var(--t-lead);font-weight:var(--w-title);
  letter-spacing:var(--tr-title);}
.other-links a:hover{color:var(--on-dark-soft);}

/* About — the portrait is sized, not stretched. */
.about-grid{display:grid;grid-template-columns:300px 1fr;gap:var(--s-4);align-items:start;}
.about-photo{width:100%;}
.about-photo-col .link-cta{margin-top:var(--s-2);}

/* Case-study request form — hairline fields, never rounded boxes. */
.req{max-width:66ch;}
.req-note{font-size:var(--t-small);color:var(--ink-soft);line-height:1.6;margin-bottom:var(--s-3);}
.req-row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-2);margin-bottom:var(--s-3);}
.req-input{font-family:inherit;font-size:var(--t-body);color:var(--ink);background:none;
  border:none;border-bottom:1px solid var(--ink);padding:var(--s-1) 0;width:100%;}
.req-input::placeholder{color:var(--ink-soft);}
.req-input:focus{outline:none;border-bottom-width:2px;}
.req-row-2{grid-template-columns:1fr;}
.req-textarea{resize:vertical;min-height:80px;font-family:inherit;display:block;margin-bottom:var(--s-3);}
.req-hp{position:absolute;left:-9999px;}
.req-btn{font-family:ui-monospace,'SF Mono',SFMono-Regular,Menlo,monospace;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;background:var(--ink);color:var(--paper);
  border:none;padding:15px 24px;cursor:pointer;}
.req-btn:hover{background:var(--cobalt);}
.req-ok,.req-err{display:none;font-size:var(--t-body);margin-top:var(--s-3);}

@media (max-width:1000px){
  .cols-4{grid-template-columns:1fr 1fr;}
  .about-grid{grid-template-columns:1fr;}
  .about-photo-col{max-width:260px;}
  .req-row{grid-template-columns:1fr;}
}
@media (max-width:620px){ .cols-4{grid-template-columns:1fr;} }