/* ============================================================================
   smithycad.com — shared stylesheet for index.html and contact.html.

   Single source of truth. Both pages used to carry their own copy of this
   block and had already drifted apart (two different .h1 definitions, .h2/.h3
   missing from contact). Edit here, never in a page.

   TYPE SYSTEM
   Size is one of nine steps. Tracking and leading are functions of ROLE, not
   of the individual element:
     display role  — tight negative tracking, sub-1.2 leading, uppercase, 700
     body role     — zero tracking, open leading, 400
     micro role    — mono, uppercase, +.14em, 500
   A new size, tracking or leading value anywhere in a page is a bug. Reach for
   a token; if none fits, the step ladder is what needs changing.
   ========================================================================== */

/* ---- faces -------------------------------------------------------------- */
/* Self-hosted so the site renders identically on every platform. The old
   'Helvetica Neue',Helvetica,Arial stack fell back to Arial on Windows and
   Android — a visibly different face at 128px/-.045em, and no 500 weight.
   Inter also matches app.smithycad.com, so site and product now agree.
   Latin-1 only; the arrow subsets exist because Google's latin subset omits
   U+2190/U+2192, which the buttons and back-links use. */
@font-face{
  font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(assets/fonts/inter-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(assets/fonts/inter-arrows.woff2) format('woff2');
  unicode-range:U+2190,U+2192;
}
@font-face{
  font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url(assets/fonts/plexmono-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url(assets/fonts/plexmono-arrows.woff2) format('woff2');
  unicode-range:U+2190,U+2192;
}

/* ---- tokens ------------------------------------------------------------- */
:root{
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace;

  /* size — linear 2px steps where the eye reads text, fluid where it reads
     shapes. Pure geometric ratios produce useless values like 17.28px. */
  --t-micro:11px;   /* mono labels, buttons, nav                       */
  --t-xs:12px;      /* dense secondary only — carousel pill blurbs     */
  --t-sm:14px;      /* list items, quotes, footer, form errors         */
  --t-body:16px;    /* .copy, legal prose, form fields                 */
  --t-lead:18px;    /* hero and page intros                           */
  --t-h3:20px;      /* card titles, feature rows                       */
  --t-h2:clamp(30px,4.4vw,52px);    /* section heads, capability names */
  --t-h1:clamp(34px,6.5vw,76px);    /* sub-page titles                 */
  --t-display:clamp(44px,9vw,128px);/* home hero only                  */

  /* tracking — by role, tightening as size grows */
  --tr-display:-.045em;
  --tr-h1:-.04em;
  --tr-h2:-.035em;
  --tr-h3:-.02em;   /* also small bold display text, e.g. the quotes   */
  --tr-body:0;
  --tr-micro:.14em;

  /* leading */
  --lh-display:.9;
  --lh-h1:.92;
  --lh-h2:.95;      /* single heads; stacked lists step up to --lh-h3  */
  --lh-h3:1.15;
  --lh-body:1.5;
  --lh-sm:1.45;
  --lh-micro:1.3;

  /* weight */
  --fw-reg:400;
  --fw-med:500;
  --fw-bold:700;

  /* ink — two greys only, both WCAG AA on white. The retired #9A9A9A sat at
     2.8:1 and carried every section eyebrow, i.e. the smallest text here. */
  --ink:#0A0A0A;
  --ink-2:#6E6E6E;              /* 5.1:1 on white                      */
  --ink-2-brand:rgba(10,10,10,.55); /* 4.6:1 on --brand                */
  --rule:#D6D6D2;
  --paper:#fff;
  --paper-2:#F4F4F2;
  --brand:#FFF680;

  /* wordmark height in the nav — 1798x607 art, so 28px reads ~83px wide in a 66px bar */
  --logo-h:28px;

  /* corner scale — small controls, cards, large surfaces */
  --r-sm:8px;
  --r-md:14px;
  --r-lg:24px;
}

/* ---- base --------------------------------------------------------------- */
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:var(--t-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased}
a{color:var(--ink)}
img{max-width:100%}
input::placeholder,textarea::placeholder{color:var(--ink-2)}
.sc-placeholder{background:transparent!important;border:none!important}

/* ---- type: display role ------------------------------------------------- */
.display,.h1,.h2,.h3{margin:0;font-weight:var(--fw-bold);text-transform:uppercase}
.display{font-size:var(--t-display);line-height:var(--lh-display);letter-spacing:var(--tr-display)}
.h1{font-size:var(--t-h1);line-height:var(--lh-h1);letter-spacing:var(--tr-h1)}
.h2{font-size:var(--t-h2);line-height:var(--lh-h2);letter-spacing:var(--tr-h2)}
.h3{font-size:var(--t-h3);line-height:var(--lh-h3);letter-spacing:var(--tr-h3)}
/* a stacked run of .h2-sized items needs the looser step so the caps breathe */
.h2-stack{font-size:var(--t-h2);line-height:var(--lh-h3);letter-spacing:var(--tr-h2);font-weight:var(--fw-bold);text-transform:uppercase}
/* small bold display: the contact-sheet quotes. Display tracking at sm size. */
.quote{font-size:var(--t-sm);line-height:var(--lh-h3);letter-spacing:var(--tr-h3);font-weight:var(--fw-bold);color:var(--ink)}

/* ---- type: body role ---------------------------------------------------- */
.copy{margin:0;font-size:var(--t-body);line-height:var(--lh-body);letter-spacing:var(--tr-body);color:var(--ink-2)}
.copy-lead{font-size:var(--t-lead)}   /* modifier on .copy */
.copy-sm{margin:0;font-size:var(--t-sm);line-height:var(--lh-sm);letter-spacing:var(--tr-body);color:var(--ink-2)}
.copy-ink{color:var(--ink)}

/* ---- type: micro role --------------------------------------------------- */
.lbl{display:block;font-family:var(--mono);font-size:var(--t-micro);font-weight:var(--fw-med);line-height:var(--lh-micro);letter-spacing:var(--tr-micro);text-transform:uppercase;color:var(--ink-2)}
.lbl-ink{color:var(--ink)}
.lbl-file{letter-spacing:.06em;text-transform:none}
.lbl-brand{color:var(--ink-2-brand)}

/* ---- structure ---------------------------------------------------------- */
.sec{max-width:1280px;margin:0 auto;padding:clamp(56px,6.5vw,104px) clamp(20px,4vw,48px);box-sizing:border-box}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap;margin-bottom:clamp(30px,3.5vw,52px)}
.head > div{display:flex;flex-direction:column;gap:clamp(14px,1.6vw,22px);min-width:0}
/* hairline grid: the 1px gap shows the black backdrop through as a perfect rule */
.grid{display:grid;gap:1px;background:var(--ink);border:1px solid var(--ink);border-radius:var(--r-lg);overflow:hidden}
.cell{background:var(--paper);box-sizing:border-box;min-width:0;overflow:hidden}
/* image wells: object-fit:cover fills the 4/3 frame and lets the frame do the cropping, so
   no well background is ever visible — every source image is wider than 4/3, so cover
   trims the sides rather than adding letterbox bars. The background stays as a load-time
   placeholder only. min-height:0 because on the fixed-height collage rows the 4/3 ratio
   would push the well past its row and flex's min-height:auto blocks the shrink; below
   900px rows are content-sized again and the ratio has to supply the height. */
.tile-well{flex:1;min-height:0;aspect-ratio:4/3;background:var(--paper-2);border-bottom:1px solid var(--rule);overflow:hidden}
.tile-well img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1)}
/* a centred section: the head and each block run down the middle. The rows inside a
   block stay left-aligned — the block hugs its widest row and gets centred as a unit,
   so the checkmarks line up in a column instead of going ragged. */
.sec-center .head{justify-content:center;text-align:center}
/* partnership body — layout lives here, not inline, so .sec-center can override it */
.lic-body{display:flex;flex-direction:column;align-items:center;gap:36px;max-width:720px;margin:0 auto}
/* a feature row: checkmark + a .h3-weight statement. Unruled — spacing separates the
   rows; the .grid hairlines are the only rules in these sections. */
.lic-item{display:flex;align-items:center;gap:16px;padding:9px 0}
/* what-you-get bullet list — unruled, so the discs carry the structure the hairlines
   used to. padding-left gives the hanging indent; the marker is text-coloured. */
.wyg-list{margin:0;padding:0 0 0 1.15em;list-style:disc}
.wyg-list li{padding:10px 0}
.wyg-list li::marker{color:var(--ink-2)}
/* section heads that must hold one line — no hand-set max-width to wrap against */
.head-wide{flex:1 1 auto}

/* ---- controls ----------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;box-sizing:border-box;font-family:var(--mono);font-size:var(--t-micro);font-weight:var(--fw-med);letter-spacing:var(--tr-micro);text-transform:uppercase;text-decoration:none;padding:16px 26px;border:1px solid var(--ink);border-radius:99px;background:var(--brand);color:var(--ink);cursor:pointer}
.btn:hover{filter:brightness(.97)}
.btn-dark{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn-dark:hover{background:#2b2b2b;border-color:#2b2b2b}
.btn-sm{padding:11px 18px}
.nav-link{font-family:var(--mono);font-size:var(--t-micro);font-weight:var(--fw-med);letter-spacing:var(--tr-micro);text-transform:uppercase;text-decoration:none;color:var(--ink);padding-bottom:3px;border-bottom:1px solid transparent}
.nav-link:hover{border-bottom-color:var(--ink)}
.sq-btn{border-radius:50%}
.sq-btn:hover{background:var(--brand)!important}
/* carousel arrows — deliberately NOT .sq-btn: they sit out at the stage edges as
   navigation, so they take a neutral hover rather than the brand yellow used for
   in-content controls. */
.how-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:6;width:48px;height:48px;border-radius:50%;background:var(--paper);border:1px solid var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .18s linear}
.how-arrow:hover{background:var(--paper-2)}
.how-arrow-prev{left:2.5%}
.how-arrow-next{right:2.5%}
/* the footer links ARE nav links — same micro role, same underline-on-hover. There is
   no separate .foot-link; a second link treatment is how the two ends of the page
   drift apart. */
.logo{height:var(--logo-h);width:auto;display:block}
/* --t-body, not --t-sm: anything under 16px makes iOS Safari zoom on focus */
.fld{width:100%;box-sizing:border-box;padding:14px 16px;border:1px solid var(--rule);border-radius:var(--r-sm);font-family:var(--sans);font-size:var(--t-body);line-height:var(--lh-body);color:var(--ink);background:var(--paper);outline:none}
.fld:focus{border-color:var(--ink)}

/* ---- focus -------------------------------------------------------------- */
/* One rule for everything keyboard-reachable. Must come after .fld's
   outline:none so typing into a field still shows a ring when tabbed to.
   :focus-visible, not :focus — mouse clicks stay ring-free. */
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}

/* ---- motion ------------------------------------------------------------- */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes modalIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes capHl{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms !important;animation-delay:0ms !important;transition-duration:.01ms !important}}

/* ---- responsive — type scales via clamp(), so these handle layout only --- */
@media (max-width:820px){
  .how-stage{height:280px!important}
  .how-arrow{width:44px!important;height:44px!important}
  .how-arrow-prev{left:6px}
  .how-arrow-next{right:6px}
}
@media (max-width:900px){
  /* stacked: tracks and the fixed height go back to content-driven */
  .sheet-grid{grid-template-columns:repeat(2,1fr)!important;grid-template-rows:none!important;height:auto!important}
  .tile-well{min-height:auto!important}
  /* copy stops spanning and flows inline, still mid-collage (6 tiles above, 6 below) */
  .sheet-center{grid-column:1/-1!important;grid-row:auto!important}
  .wyg-grid{grid-template-columns:1fr!important}
  #parts{height:320vh!important}
  .parts-grid{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:0!important}
  .parts-names > span{margin-bottom:12px!important}
  .parts-names > p{margin-top:14px!important;min-height:70px!important;max-width:none!important}
  .parts-stage{height:46vh!important}
  .parts-square{width:min(100%,44vh)!important}
  .parts-stage canvas{width:min(100% - 24px,40vh)!important}
  #contact{padding:56px 20px 0!important}
  .footer-strip{padding:16px 20px 32px!important;gap:24px!important}
  .legal-backdrop{padding:0!important}
  .legal-scroll{padding:40px 20px 52px!important}
  .contact-grid{display:flex!important;flex-direction:column!important;gap:36px!important;max-width:660px!important}
  .cs-form{grid-template-columns:1fr!important}
}
@media (max-width:600px){
  /* Hide the text links only where a button survives as the fallback CTA.
     contact.html's nav is a lone "Back to home" link — blanket-hiding it left
     that page with no navigation at all below 600px. */
  .nav-links:has(.btn) .nav-link{display:none!important}
  .sheet-grid{grid-template-columns:1fr!important}
  /* the contact sheet is desktop storytelling — on a phone it becomes a long
     scroll of 15 tiles before the point lands, so the section is just its copy.
     The tiles are display:none rather than removed, so their lazy images are
     never fetched either. */
  .sheet-grid > .cell:not(.sheet-center){display:none!important}
  .sheet-center{padding:64px 20px!important}
  .hero-cta{align-self:stretch!important}
  .hero-cta .btn{width:100%!important}
  .footer-strip{flex-direction:column!important;align-items:flex-start!important}
  .footer-strip > div:last-child{align-items:flex-start!important}
}