/* Polanyi Works brand site: the one stylesheet (step E, the mockup). Every value is a token from tokens.css (a
   byte-identical copy of ../../emfg/tokens.css); the only literals are the font-face declarations and a few ch
   measures that are content decisions. The same system as the EM Field Guide site, one step quieter: h1 at step 4
   (the product site uses step 5), h2 at step 2 (step 3), one tinted plate, no figure numbers, no header button.
   Identity option 2's studio wordmark; the studio favicon is a drawn P on the same ink tile (see README). */

@font-face { font-family: "Geist"; src: url("/assets/fonts/geist-latin.woff2") format("woff2"); font-weight: 400 700; font-display: swap; 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: "Source Serif 4"; src: url("/assets/fonts/source-serif-4-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; 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; }

/* ---- base (shared with the product site) */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--space-xl); }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-size: var(--step-0); line-height: var(--leading-body); font-synthesis: none; text-rendering: optimizeLegibility; min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 0.06em; text-underline-offset: 0.16em; transition: color var(--dur-1) var(--ease-out); }
a:hover { color: var(--accent-hover); text-decoration-thickness: 0.12em; }
a:active { color: var(--accent-active); }
:focus-visible { outline: 3px solid var(--ring); outline-offset: 3px; border-radius: var(--radius-xs); }
h1, h2, h3 { margin: 0; text-wrap: balance; font-weight: 600; letter-spacing: var(--tracking-heading); line-height: var(--leading-tight); }
h1 { font-size: var(--step-4); letter-spacing: var(--tracking-display); line-height: var(--leading-display); max-width: 20ch; }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); letter-spacing: -0.01em; }
p { margin: 0; max-width: var(--measure); }
p + p { margin-top: var(--space-s); }
small { font-size: var(--step--1); }
.skip { position: absolute; left: var(--gutter); top: -5rem; z-index: 2; padding: var(--space-2xs) var(--space-xs); background: var(--skip-bg); color: var(--skip-ink); border-radius: var(--radius-s); }
.skip:focus { top: var(--gutter); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.wrap-text { max-width: var(--wrap-text); margin: 0 auto; padding: 0 var(--gutter); }
.label { font-size: var(--step--1); font-weight: 500; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.lede { font-size: var(--step-1); color: var(--ink-2); line-height: 1.45; max-width: var(--measure-lede); text-wrap: pretty; }
.read { font-family: var(--font-serif); line-height: var(--leading-read); text-wrap: pretty; }
.muted { color: var(--ink-2); }
.quiet { color: var(--ink-3); }

/* ---- the one button (the same rule as the product site) */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--target-primary); padding: 0 var(--space-m); border-radius: var(--radius-s); font: inherit; font-weight: 500; text-decoration: none; background: var(--accent); color: var(--on-accent); transition: background-color var(--dur-1) var(--ease-out); }
.btn:hover, .btn:active { color: var(--on-accent); }
.btn:hover { background: var(--accent-hover); }
.btn:active { background: var(--accent-active); }

/* ---- header: the studio wordmark and four plain anchors; no button (the quieter register) */
.site-head { border-bottom: var(--rule) solid var(--line); background: var(--bg); }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 4rem; gap: var(--space-s); }
.logo { display: inline-flex; align-items: center; min-height: var(--target); flex: none; }
.logo img { height: 1.125rem; width: auto; }
.nav { display: none; gap: var(--space-m); align-items: center; }
.nav a { color: var(--ink-2); text-decoration: none; font-weight: 500; min-height: var(--target); display: inline-flex; align-items: center; font-size: var(--step--1); }
.nav a:hover { color: var(--ink); }
@media (min-width: 48em) { .site-head { position: sticky; top: 0; z-index: 1; } .nav { display: flex; } }

/* ---- footer */
.site-foot { border-top: var(--rule) solid var(--line); padding: var(--space-xl) 0; font-size: var(--step--1); color: var(--ink-2); }
.site-foot .wrap { display: grid; gap: var(--space-m); }
@media (min-width: 48em) { .site-foot .wrap { grid-template-columns: 1fr auto; align-items: start; } .site-foot .legal { text-align: right; } }
.site-foot .links { display: flex; flex-wrap: wrap; gap: var(--space-s) var(--space-m); align-items: center; }
.site-foot .links img { height: 0.8rem; width: auto; }
.site-foot a { color: var(--ink-2); display: inline-flex; align-items: center; min-height: var(--target); }
.site-foot .legal p { max-width: none; }
.site-foot .legal p + p { margin-top: var(--space-3xs); }

/* ---- sections */
section { padding: var(--space-3xl) 0; }
section + section { border-top: var(--rule) solid var(--line); }
section > .wrap > h2 { margin-bottom: var(--space-l); }
section.short { padding: var(--space-2xl) 0; }
.intro { font-size: var(--step-0); color: var(--ink-2); max-width: 52ch; margin: calc(var(--space-s) - var(--space-l)) 0 var(--space-l); }

/* ---- 1 the statement */
.statement { padding: var(--space-2xl) 0 var(--space-3xl); }
@media (min-width: 64em) { .statement { padding: var(--space-4xl) 0; } }
.statement .lede { margin-top: var(--space-m); max-width: 52ch; }
.cta { margin-top: var(--space-l); display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-s); align-items: center; }
.statement .strip { margin-top: var(--space-m); font-size: var(--step--1); line-height: 1.5; color: var(--ink-3); max-width: 52ch; }
.statement .strip small { font-size: inherit; }

/* ---- 2 products: one row on one plate (the product site's figure plate, without the figure number) */
.plate { background: var(--bg-tint); border: var(--rule) solid var(--line); border-radius: var(--radius-l); padding: var(--space-l) var(--space-m); display: grid; gap: var(--space-l); align-items: center; }
@media (min-width: 48em) { .plate { grid-template-columns: 1fr auto; gap: var(--space-2xl); padding: var(--space-xl) var(--space-l); } }
.product { display: grid; gap: var(--space-s); align-content: start; }
.product .name { display: flex; align-items: center; gap: var(--space-xs); }
.product .name img { width: 3rem; height: 3rem; border-radius: var(--radius-m); box-shadow: var(--shadow-1); }
.product h3 { font-size: var(--step-2); }
.product p { max-width: 44ch; }
.product .cta { margin-top: var(--space-2xs); }
.product .status { color: var(--ink-3); }
/* the device frame: the SAME component as the product site, so Apple's bezels drop into both with one change each */
.device { --device-w: 13rem; width: var(--device-w); max-width: 100%; padding: var(--space-2xs); background: var(--frame); border-radius: var(--radius-phone); box-shadow: var(--shadow-2); justify-self: center; }
.device img { width: 100%; border-radius: var(--radius-screen); background: var(--bg-panel); }
@media (min-width: 64em) { .device { --device-w: 15rem; } }

/* ---- 3 how we work: three hairlined rows with a heading column, never three equal cards */
.rows { display: grid; }
.row { display: grid; gap: var(--space-2xs); padding: var(--space-m) 0; border-top: var(--rule) solid var(--line); }
.row:last-child { border-bottom: var(--rule) solid var(--line); }
@media (min-width: 48em) { .row { grid-template-columns: minmax(12rem, 1fr) 2.5fr; gap: var(--space-l); } }
.row h3 { font-size: var(--step-1); }
.row p { max-width: 58ch; color: var(--ink-2); }

/* ---- 4 notes: date left, change right */
.notes { list-style: none; margin: 0; padding: 0; max-width: none; }
.notes li { display: grid; gap: var(--space-3xs); padding: var(--space-m) 0; border-top: var(--rule) solid var(--line); margin: 0; }
.notes li:last-child { border-bottom: var(--rule) solid var(--line); }
@media (min-width: 48em) { .notes li { grid-template-columns: minmax(12rem, 1fr) 2.5fr; gap: var(--space-l); } }
.notes time { display: block; }
.notes .label { display: block; margin-top: var(--space-3xs); }
.notes p { max-width: 58ch; }
.notes p b { font-weight: 600; }
.notes li { scroll-margin-top: var(--space-xl); }
.notes .permalink { display: inline-flex; align-items: center; justify-content: center; min-width: var(--target); min-height: var(--target); margin-left: var(--space-3xs); color: var(--ink-3); text-decoration: none; }
.notes .permalink:hover { color: var(--accent); }
.notes li:target { background: var(--bg-tint); }

/* ---- 5 contact */
.contact p { max-width: 56ch; }

/* ---- 404 */
.notfound { padding: var(--space-4xl) 0; min-height: 50vh; }
.notfound p { margin-top: var(--space-m); font-size: var(--step-1); }

/* ---- motion and print */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } html { scroll-behavior: auto; } }
@media print {
  .skip, .nav, .device, .cta { display: none; }
  body { background: #fff; color: #000; }
  a { color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: var(--step--1); }
  section { padding: var(--space-l) 0; }
}