/* 3.18 Labs — canonical palette. See BRAND.md §2.
   Brand colors are sampled from the logo: cyan #15C0F3, yellow #FCD202.
   Teal #3E7C97 and gold #B8860B are RETIRED — do not reintroduce them.

   --ink is the brand dark and is used for FIELDS (header, footer). It never
   flips. --text is the body type color and does flip in dark mode. Keeping these
   separate is what stops the header inverting when the scheme changes. */
:root {
  /* brand — fixed */
  --ink:         #12233C;
  --navy:        #1F3A5F;
  --cyan:        #15C0F3;
  --yellow:      #FCD202;
  --yellow-dark: #E5C008;  /* hover only; ink on it = 8.92:1 */

  /* derivatives — cyan/yellow are too light to be type on white */
  --cyan-deep:   #0A6A8C;  /* 6.08:1 on white — links, focus rings */
  --amber-deep:  #8A6508;  /* 5.32:1 on white — warm type on light */
  --cyan-wash:   #E3F7FE;
  --yellow-wash: #FFF8D9;

  /* surfaces — these flip */
  --paper:       #FFFFFF;
  --paper-alt:   #F4F7FA;
  --rule:        #DDE5EE;
  --text:        #12233C;
  --heading:     #1F3A5F;  /* type only. --navy stays for fields and strokes. */
  --steel:       #555555;
  --mist:        #CEDBE8;

  --serif: Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --wrap: 68rem;
}

/* Dark mode. Cyan (8.48:1) and yellow (12.34:1) hold up directly on the dark
   ground, so only the derivatives and surfaces need remapping. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:       #0F1720;
    --paper-alt:   #16202B;
    --rule:        #263443;
    --text:        #DDE6F0;
    /* --navy is 1.74:1 on the dark ground, so headings must not use it here. */
    --heading:     #A9D8EC;  /* 11.79:1 */
    --steel:       #9FB0C2;
    --navy:        #24425F;
    --cyan-deep:   #50D0F6;  /* 8.78:1 on ink — cyan-deep is too dark here */
    --amber-deep:  #FCD202;
    --cyan-wash:   #0D2430;
    --yellow-wash: #2A2410;
  }
}
:root[data-theme="dark"] {
  --paper: #0F1720; --paper-alt: #16202B; --rule: #263443;
  --text: #DDE6F0; --heading: #A9D8EC; --steel: #9FB0C2; --navy: #24425F;
  --cyan-deep: #50D0F6; --amber-deep: #FCD202;
  --cyan-wash: #0D2430; --yellow-wash: #2A2410;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 1rem; }

h1, h2, h3, h4, .brand-text { font-family: var(--serif); line-height: 1.2; }
h1 { font-size: clamp(1.9rem, 5vw, 2.9rem); margin: 0 0 .6em; letter-spacing: -.01em; }
h2 { font-size: clamp(1.35rem, 3.2vw, 1.85rem); margin: 2.2em 0 .5em; color: var(--heading); }
h3 { font-size: 1.2rem; margin: 1.6em 0 .35em; }
p { margin: 0 0 1.1em; }

a { color: var(--cyan-deep); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--amber-deep); }

/* Visible focus for keyboard users — cyan-deep clears 3:1 against both grounds. */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, label:focus-visible {
  outline: 3px solid var(--cyan-deep); outline-offset: 2px; border-radius: 2px;
}

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; background: var(--yellow); color: var(--ink);
  padding: .5rem .9rem; z-index: 100; border-radius: 4px; font-weight: 700; }

/* ---------- header ---------- */
.site-header { background: var(--ink); border-bottom: 3px solid var(--cyan); }
.header-inner { display: flex; align-items: center; gap: 1rem;
  min-height: 4.25rem; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: .6rem;
  color: #fff; text-decoration: none; margin-right: auto; }
.brand img { border-radius: 8px; display: block; }
.brand-text { font-size: 1.3rem; font-weight: 400; letter-spacing: .01em; }
.brand-text b { color: var(--yellow); font-weight: 700; } /* on-dark 10.78:1 */
.brand:hover { color: #fff; }

.site-nav { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.site-nav a { color: var(--mist); text-decoration: none;
  font-size: .82rem; letter-spacing: .09em; text-transform: uppercase; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--cyan); } /* on-dark 7.41:1 */

.navtoggle, .navburger { display: none; }

@media (max-width: 46rem) {
  .navburger { display: block; width: 2rem; height: 2rem; cursor: pointer; position: relative; }
  .navburger span, .navburger span::before, .navburger span::after {
    position: absolute; left: 0; height: 2px; width: 100%; background: var(--mist); }
  .navburger span { top: 50%; }
  .navburger span::before { content: ""; top: -7px; }
  .navburger span::after  { content: ""; top: 7px; }
  .site-nav { display: none; width: 100%; flex-direction: column;
    gap: .9rem; padding: 0 0 1.1rem; }
  .navtoggle:checked ~ .site-nav { display: flex; }
}

/* ---------- hero ---------- */
/* The image is never screened. The one screen here is the size of the kicker and
   no larger -- see the plate on .hero .kicker below.
   Why it has to exist: AA is a per-pixel guarantee, and this photograph spans
   L=0.000 to L=1.000 inside the text area, so NO foreground colour can satisfy it
   unaided -- yellow needs every pixel behind it at L<=0.1095, white needs
   L<=0.1833, and the darkest full-width strip in the whole image maxes at 0.257.
   Repositioning cannot fix it; only 34.7% of the photo is under the yellow ceiling.
   So the kicker, which is small type AND the barred colour under BRAND.md 2, gets
   a plate. h1 and the tagline keep the outline only: that is real legibility, not
   a measured AA pass, and it is a deliberate trade -- h1 is large type, the
   tagline is the weakest line left on the page. */
.hero {
  background: url("/assets/img/table-top.jpg") center/cover no-repeat;
  color: #fff;
  text-align: center;
  padding: clamp(3rem, 9vw, 6rem) 1rem;
  border-bottom: 3px solid var(--yellow);
}
.hero h1, .hero .tagline {
  text-shadow: 0 1px 2px rgba(18,35,60,.95), 0 0 .5em rgba(18,35,60,.9);
}
/* The kicker's own screen: inline-block, so the plate is only as wide as the line
   and the picture carries on either side of it. 88% --ink holds yellow at 7.48:1
   over a pure-white pixel and 9.91:1 over this photo's actual mean. Alpha .74 is
   the floor -- below that yellow drops under 4.5:1. The trimmed right padding
   offsets the trailing letter-spacing so the type sits centred on the plate. */
.hero .kicker { color: var(--yellow); /* on-dark 7.48:1 worst case, on its own plate */
  display: inline-block;
  background: rgba(18, 35, 60, .88);
  border-radius: 4px;
  padding: .45rem calc(.9rem - .18em) .45rem .9rem;
  text-transform: uppercase;
  letter-spacing: .18em; font-size: .78rem; margin: 0 0 1rem; }
.hero h1 { color: #fff; margin: 0 auto .4rem; max-width: 20ch; }
.hero .tagline { color: var(--mist); font-family: var(--serif);
  font-style: italic; font-size: 1.1rem; margin: 0; }

/* ---------- content ---------- */
main { padding-block: 2.5rem 3.5rem; }
main.page { max-width: 46rem; }
main > :first-child { margin-top: 0; }

.lead, main.page > p:first-of-type { font-size: 1.15rem; color: var(--steel); }

.features { display: flex; flex-wrap: wrap; gap: .7rem; margin: 2rem 0; }
.feature { display: flex; align-items: center; gap: .55rem;
  background: var(--paper-alt); border: 1px solid var(--rule);
  border-radius: 999px; padding: .45rem 1.05rem .45rem .8rem;
  font-size: .82rem; letter-spacing: .07em; text-transform: uppercase; }
/* Square, not a circular stud — BRAND.md §5.1 bars brick/knob motifs in graphic
   devices. Modular feel, no trademark reference. */
.chip { width: .7rem; height: .7rem; border-radius: 2px;
  background: var(--cyan); flex: none; }

.cta { display: flex; flex-wrap: wrap; gap: .8rem; margin: 2.4rem 0 1rem; }
.button { display: inline-block; background: var(--yellow); color: var(--ink);
  font-weight: 700; padding: .72rem 1.5rem; border-radius: 4px;
  text-decoration: none; letter-spacing: .02em; }
.button:hover { background: var(--yellow-dark); color: var(--ink); }
.button-ghost { background: transparent; color: var(--navy);
  box-shadow: inset 0 0 0 2px var(--navy); }
.button-ghost:hover { background: var(--navy); color: #fff; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .button-ghost { color: var(--mist);
    box-shadow: inset 0 0 0 2px var(--mist); }
}
:root[data-theme="dark"] .button-ghost { color: var(--mist);
  box-shadow: inset 0 0 0 2px var(--mist); }

/* numbered step / technique lists */
.steps, .techniques { list-style: none; counter-reset: s; padding: 0; margin: 2rem 0; }
.steps > li, .techniques > li {
  counter-increment: s; position: relative;
  padding: 0 0 1.4rem 3.4rem; margin: 0 0 1.4rem;
  border-bottom: 1px solid var(--rule);
}
.steps > li:last-child, .techniques > li:last-child { border-bottom: 0; }
.steps > li::before, .techniques > li::before {
  content: counter(s); position: absolute; left: 0; top: .1rem;
  width: 2.35rem; height: 2.35rem; border-radius: 6px;
  background: var(--navy); color: var(--yellow); /* on-dark 7.85:1 */
  font-family: var(--serif); font-weight: 700; font-size: 1.05rem;
  display: grid; place-items: center;
}
.steps h3, .techniques h3 { margin: .15rem 0 .4rem; color: var(--heading); }
.steps p, .techniques p { margin: 0; }

.cards { display: grid; gap: 1rem; margin: 2.2rem 0;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.card { display: block; text-decoration: none; color: inherit;
  background: var(--paper-alt); border: 1px solid var(--rule);
  border-left: 4px solid var(--cyan); border-radius: 6px; padding: 1.1rem 1.25rem; }
.card:hover { border-left-color: var(--yellow); color: inherit; }
.card h3 { margin: 0 0 .3rem; color: var(--heading); }
.card p { margin: 0; font-size: .95rem; color: var(--steel); }

.spec { display: grid; gap: 0; margin: 2rem 0;
  border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; }
.spec > div { display: flex; gap: 1rem; padding: .8rem 1.1rem;
  border-bottom: 1px solid var(--rule); }
.spec > div:last-child { border-bottom: 0; }
.spec > div:nth-child(odd) { background: var(--paper-alt); }
.spec dt { font-weight: 700; color: var(--heading); min-width: 9rem; }
.spec dd { margin: 0; }

.note { font-size: .92rem; color: var(--steel); font-style: italic; }
.muted { color: var(--steel); }
.links a { margin-right: 1rem; }

/* Tinted callout — uses the wash tokens so it inverts cleanly. */
.callout { background: var(--cyan-wash); border-left: 4px solid var(--cyan);
  border-radius: 0 6px 6px 0; padding: 1rem 1.25rem; margin: 2rem 0; }
.callout > :last-child { margin-bottom: 0; }

.portrait { float: right; width: 9rem; border-radius: 6px;
  margin: 0 0 1rem 1.5rem; }

/* ---------- photography ---------- */
/* Workshop photographs, per BRAND.md §4: bricks are context, never the subject.
   Every image carries width/height so the page does not shift as they load. */
.photo { margin: 2.4rem 0; }
.photo img { display: block; width: 100%; height: auto;
  border-radius: 6px; background: var(--paper-alt); }
.photo figcaption { margin: .7rem 0 0; font-size: .92rem; line-height: 1.5;
  color: var(--steel); font-style: italic; }

/* Breaks the 46rem prose column on wide screens so a room shot can breathe. */
@media (min-width: 60rem) {
  main.page .photo-wide { width: min(58rem, 92vw);
    margin-inline: calc((46rem - min(58rem, 92vw)) / 2); }
}

/* Paired photos, e.g. a model and its question sheet. */
.photo-pair { display: grid; gap: 1rem; margin: 2.4rem 0;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.photo-pair figure { margin: 0; }

/* Photo at the head of a card. Sits flush inside the rounded corners. */
.card-photo { padding: 0; overflow: hidden; }
.card-photo img { display: block; width: 100%; height: 9rem;
  object-fit: cover; background: var(--paper-alt); }
.card-photo .card-body { padding: 1.1rem 1.25rem; }
.card-photo .card-body h3 { margin-top: 0; }

/* ---------- contact ---------- */
.contact-grid { display: grid; gap: 2.5rem; margin-top: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.contact-direct h3, .contact-form h3 { margin-top: 0; color: var(--heading); }
.form-error { margin: 0 0 1rem; padding: .7rem .85rem; font-size: .94rem;
  color: var(--amber-deep); background: var(--yellow-wash);
  border-left: 3px solid var(--amber-deep); border-radius: 0 4px 4px 0; }
.form-error[hidden] { display: none; }
a.big { font-family: var(--serif); font-size: 1.3rem; }
form label { display: block; margin-bottom: .9rem; font-size: .88rem;
  letter-spacing: .05em; text-transform: uppercase; color: var(--steel); }
form input, form textarea { display: block; width: 100%; margin-top: .3rem;
  padding: .6rem .7rem; font: inherit; text-transform: none; letter-spacing: 0;
  color: var(--text); background: var(--paper);
  border: 1px solid var(--rule); border-radius: 4px; }
form input:focus, form textarea:focus {
  outline: 2px solid var(--cyan-deep); border-color: var(--cyan-deep); }
form button { background: var(--yellow); color: var(--ink); font: inherit;
  font-weight: 700; border: 0; border-radius: 4px; padding: .7rem 1.6rem; cursor: pointer; }
form button:hover { background: var(--yellow-dark); }

/* ---------- blog ---------- */
.postlist { list-style: none; padding: 0; margin: 2rem 0 0; }
.postlist li { padding-bottom: 1.5rem; margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--rule); }
.postlist h2 { margin: 0 0 .25rem; font-size: 1.3rem; }
.postlist h2 a { color: var(--heading); text-decoration: none; }
.postlist h2 a:hover { color: var(--cyan-deep); }
.postmeta { font-size: .8rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--steel); margin: 0 0 .5rem; }
.postlist p { margin: 0; color: var(--steel); }
.post-nav { margin-top: 3rem; padding-top: 1.2rem; border-top: 1px solid var(--rule); }

/* ---------- footer ---------- */
.site-footer { background: var(--ink); color: var(--mist);
  margin-top: 4rem; padding: 2.5rem 0 1.5rem; font-size: .93rem;
  border-top: 3px solid var(--cyan); }
.foot-grid { display: grid; gap: 1.8rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.site-footer h4 { margin: 0 0 .5rem; color: #fff; font-size: .8rem;
  letter-spacing: .12em; text-transform: uppercase; font-family: var(--sans); }
.site-footer a { color: var(--mist); }
.site-footer a:hover { color: var(--cyan); } /* on-dark 7.41:1 */
.site-footer .muted { color: #8199b3; }
.foot-brand { color: #fff; font-size: 1.15rem; }
.site-footer .tagline { font-family: var(--serif); font-style: italic;
  color: #8199b3; margin: .3rem 0 0; }
.legal { font-size: .74rem; color: #8199b3; line-height: 1.5;
  margin: 2rem 0 0; max-width: 60ch; }
.legal + .legal { margin-top: .5rem; }

img { max-width: 100%; height: auto; }

/* ---------- bottom border ---------- */
/* A slim crop of the canonical workshop photograph (BRAND.md §4), regenerated by
   scripts/make_footer_strip.py. A photograph is the only permitted way to show
   pieces in a graphic device here, so this must never become drawn artwork.
   The gradient fades the strip out of the ink footer above it. */
.footer-strip {
  height: 5rem;
  background:
    linear-gradient(180deg, var(--ink) 0%, rgba(18, 35, 60, 0) 30%),
    url("/assets/img/footer-strip.jpg") center / cover no-repeat;
  background-color: var(--ink);
}

@media (max-width: 40rem) {
  .footer-strip { height: 3.25rem; }
}