/* We4r — the public site's stylesheet.
 *
 * From the Claude Design board "Round 3 Board v5" (its site/site.css; transition 07g.–07j.): Claret & Linen,
 * the we4r mark in Instrument Sans, Instrument Serif for our voice (titles and short lines, in Claret),
 * Instrument Sans for text, IBM Plex Mono for data. Plain CSS custom properties; no framework, no build step,
 * no script. Fonts are our own files (SIL OFL 1.1, licences beside them): no third-party request (D-034).
 */
@font-face{font-family:"Instrument Sans";font-weight:400 700;font-style:normal;font-display:swap;src:url("fonts/instrument-sans-latin-wght-normal.fa41c43a3d8e.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:"Instrument Sans";font-weight:400 700;font-style:normal;font-display:swap;src:url("fonts/instrument-sans-latin-ext-wght-normal.1ff13d113ba4.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Instrument Serif";font-weight:400;font-style:normal;font-display:swap;src:url("fonts/instrument-serif-latin-400-normal.9b8dd1ecf641.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:"Instrument Serif";font-weight:400;font-style:normal;font-display:swap;src:url("fonts/instrument-serif-latin-ext-400-normal.b160c869d0b2.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Instrument Serif";font-weight:400;font-style:italic;font-display:swap;src:url("fonts/instrument-serif-latin-400-italic.bc891bdd08ad.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:"Instrument Serif";font-weight:400;font-style:italic;font-display:swap;src:url("fonts/instrument-serif-latin-ext-400-italic.148ffff0cacc.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-style:normal;font-display:swap;src:url("fonts/ibm-plex-mono-latin-400-normal.79936b18df9f.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-weight:400;font-style:normal;font-display:swap;src:url("fonts/ibm-plex-mono-latin-ext-400-normal.8450d5944de2.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-weight:500;font-style:normal;font-display:swap;src:url("fonts/ibm-plex-mono-latin-500-normal.b1c8a895f5fd.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-weight:500;font-style:normal;font-display:swap;src:url("fonts/ibm-plex-mono-latin-ext-500-normal.fa8d8838b94a.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --linen:#F3F0E8; --bristol:#FBFAF6; --plate:#FFFFFF; --plate-line:#D9D1C3;  /* Linen-dark hairline */
  --ink:#24211F; --claret:#9B2C3B; --blush:#E3A3A6; --stone:#756B60;
  --oat:#CBB89A;                                   /* rules only — never text */
  --graphite:#5F6368; --pencil:#B8B4A8;            /* flats only */
  --serif:"Instrument Serif",ui-serif,Georgia,serif;          /* our voice: titles, short lines (Claret) */
  --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;  /* the mark, text */
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;           /* data */
  --gutter:clamp(20px,4vw,56px); --max:1280px; --measure:62ch;
  --fs-body:clamp(1.0625rem,1rem + .2vw,1.1875rem);   /* 17 → 19 */
  --fs-small:.9375rem;                                /* 15 */
  --fs-data:.9375rem;                                 /* 15, mono */
  --fs-label:.8125rem;                                /* 13, mono caps */
  --fs-h1:clamp(2.75rem,1.9rem + 3.4vw,4.75rem);      /* 44 → 76 */
  --fs-h2:clamp(2.25rem,1.8rem + 1.8vw,3.25rem);      /* 36 → 52 */
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--linen);color:var(--ink);font:400 var(--fs-body)/1.6 var(--sans);-webkit-text-size-adjust:100%}
body{margin:0}
img{display:block;max-width:100%;height:auto}
picture{display:block}
a{color:var(--claret);text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--claret);outline-offset:3px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:9;background:var(--plate);padding:8px 12px}
h1,h2,h3{margin:0;font-weight:400;text-wrap:balance}
p{margin:0 0 1em;text-wrap:pretty}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}
.label{font:500 var(--fs-label)/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--stone)}

/* frame */
.site-head{border-bottom:1px solid var(--plate-line)}
.wordmark{font:600 1.75rem/1 var(--sans);letter-spacing:-.04em;color:var(--ink);text-decoration:none}
.wordmark span{color:var(--claret)}
.tagline{margin:0;font-size:var(--fs-small);color:var(--stone)}
.site-foot{margin-top:clamp(64px,10vw,128px);border-top:1px solid var(--plate-line);font-size:var(--fs-small);color:var(--stone)}
.site-foot p{margin:0}

/* the drawing on the page: a plain white plate. The master's own white (240–255) meets white, not Linen. */
.plate{display:block;background:var(--plate);border:1px solid var(--plate-line);border-radius:1px}
.plate img{width:100%}

/* book */
.book-head{max-width:46rem;margin-block:clamp(36px,7vw,88px) clamp(48px,7vw,96px)}
.book-head .label{margin-bottom:1em}
.book-head h1{margin-bottom:.25em;font:400 var(--fs-h1)/1.02 var(--serif);color:var(--claret)}
.subtitle{font-size:1.2em;line-height:1.45;margin-bottom:1.4em}
.archived{display:inline-block;margin:0 0 1.2em;padding:6px 12px;border:1px solid var(--plate-line);background:var(--bristol);font-size:var(--fs-small);color:var(--stone)}
.contents{list-style:none;margin:2em 0 0;padding:0;border-top:1px solid var(--plate-line)}
.contents li{border-bottom:1px solid var(--plate-line)}
.contents a{display:flex;gap:16px;padding:12px 0;color:var(--ink);text-decoration:none}
.contents a span:first-child{min-width:2em;font:400 var(--fs-data)/1.6 var(--mono);color:var(--stone)}
.contents a span:last-child{font:400 1.375rem/1.3 var(--serif);color:var(--claret)}
.contents a:hover span:last-child{text-decoration:underline}
.look{display:grid;gap:20px;padding-block:clamp(48px,8vw,112px);border-top:1px solid var(--plate-line);scroll-margin-top:16px}
.look-num{display:flex;align-items:baseline;gap:10px;margin:0 0 10px;font:400 var(--fs-data)/1 var(--mono);color:var(--stone)}
.look-num .n{font:400 clamp(2.25rem,1.8rem + 1.6vw,3.25rem)/1 var(--mono);letter-spacing:-.02em;color:var(--ink)}
.look h2{font:400 var(--fs-h2)/1.05 var(--serif);color:var(--claret)}
.look-fig,.lp-fig{margin:0}
.look-fig .plate{max-width:min(100%,520px)}
.credit{margin:14px 0 0;font-size:var(--fs-small);color:var(--stone)}
.credit b{font-weight:600;color:var(--ink)}
.words{max-width:var(--measure)}
.words h3{margin:2.4em 0 .9em;font:500 var(--fs-label)/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--stone)}
.words h3:first-child{margin-top:0}
.pieces{list-style:none;margin:0;padding:0;border-top:1px solid var(--plate-line);font:400 var(--fs-data)/1.4 var(--mono)}
.pieces li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;padding:11px 0;border-bottom:1px solid var(--plate-line)}
.chip{width:20px;height:20px;border-radius:2px;background:var(--chip,var(--plate-line));box-shadow:inset 0 0 0 1.5px var(--ink)}
.pieces .name{font-weight:500}
.pieces .colour{text-align:right}
.carry{font:400 var(--fs-data)/1.4 var(--mono)}
.more{margin-top:1.6em;font-weight:600}
@media (min-width:760px){
  .look{grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-rows:auto auto 1fr;grid-template-areas:"fig head" "fig words" "fig .";column-gap:clamp(32px,5vw,88px);row-gap:28px;align-items:start}
  .look:nth-of-type(even){grid-template-columns:minmax(0,6fr) minmax(0,5fr);grid-template-areas:"head fig" "words fig" ". fig"}
  .look-head{grid-area:head}.words{grid-area:words}
  .look-fig{grid-area:fig;position:sticky;top:24px}
}

/* look page — where pins land */
.lookpage{display:grid;gap:14px;padding-top:16px}
.site-line{margin:0;max-width:52ch;font-size:var(--fs-small);color:var(--stone)}
.bookline{margin:0 0 4px;font:400 var(--fs-data)/1.5 var(--mono);color:var(--stone)}
.bookline a{font:italic 400 1.1875rem/1 var(--serif)}
.lp-head h1{font:400 var(--fs-h1)/1.02 var(--serif);color:var(--claret)}
.lp-fig .plate{width:min(100%,calc(62svh * 2 / 3));margin-inline:auto}
.standing{max-width:60ch;margin:16px 0 0;font-size:var(--fs-small)}
.lp-words{margin-top:24px}
.lp-nav{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;margin-top:24px;padding-top:20px;border-top:1px solid var(--plate-line);font-weight:600}
@media (min-width:760px){
  .lookpage{grid-template-columns:minmax(0,6fr) minmax(0,5fr);grid-template-rows:auto auto auto auto 1fr;grid-template-areas:"fig line" "fig head" "fig words" "fig nav" "fig .";column-gap:clamp(32px,5vw,96px);align-items:start;padding-top:36px}
  .site-line{grid-area:line}.lp-head{grid-area:head}.lp-words{grid-area:words;margin-top:8px}.lp-nav{grid-area:nav}
  .lp-fig{grid-area:fig;position:sticky;top:24px}
  .lp-fig .plate{width:min(100%,calc(84vh * 2 / 3));margin-inline:0}
}

/* prose pages */
.prose{max-width:var(--measure);margin-top:clamp(36px,7vw,80px)}
.prose h1{margin-bottom:.4em;font:400 var(--fs-h1)/1.05 var(--serif);color:var(--claret)}
.prose h2{margin:1.8em 0 .5em;font:600 1.125rem/1.3 var(--sans)}
.prose ul{padding-left:1.2rem}
.prose li{margin-bottom:.4em}
.oneline{max-width:22ch;margin-block:18vh 0;font:400 clamp(2rem,1.5rem + 2vw,3rem)/1.15 var(--serif);color:var(--claret)}
.oneline a{color:inherit}

/* header with the menu, no script. Below 760 px two rows (35a.): the mark with the tagline beside it, then the
   menu on its own row, full width, wrapping rather than ever overlapping the mark. From 760 px one row. */
.site-head .wrap{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"mark tag" "menu menu";align-items:baseline;gap:0 16px;padding-block:9px 2px}
.wordmark{grid-area:mark}
.menu{grid-area:menu;display:flex;flex-wrap:wrap;gap:0 16px}
.menu a{display:block;padding-block:13px;font:500 .9375rem/1.2 var(--sans);color:var(--ink);text-decoration:none;white-space:nowrap}
.menu a:hover{color:var(--claret)}
.menu a[aria-current="page"]{color:var(--claret);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.4em}
.site-head .tagline{grid-area:tag}
@media (min-width:760px){
  .site-head .wrap{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"mark tag menu";align-items:center;column-gap:24px;padding-block:8px}
  .menu{justify-self:end;gap:32px}
}

/* footer: social links in the label face; the nav renders nothing when there are no accounts */
.site-foot .wrap{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 32px;padding-block:20px 40px}
.site-foot .site-nav{display:flex;gap:20px}
.site-foot .site-nav a{padding-block:12px;display:inline-block}
.site-foot p{margin:0;flex-basis:100%}
.social{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 12px;font:500 var(--fs-label)/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.social a{display:inline-block;padding-block:14px;color:var(--ink);text-decoration:none}
.social a:hover{color:var(--claret)}
.social span{color:var(--stone)}

/* the two card types */
.look-card{display:grid;gap:10px;align-content:start}
.look-card .plate{margin-bottom:6px}
.lc-meta{margin:0;font:400 var(--fs-data)/1.4 var(--mono);color:var(--stone)}
.lc-meta i{font:italic 400 1.125rem/1 var(--serif);color:var(--claret)}
.look-card h3{font:400 1.625rem/1.1 var(--serif);color:var(--claret)}
.look-card h3 a{color:inherit;text-decoration:none}
.look-card h3 a:hover{text-decoration:underline;text-decoration-thickness:1px}
.look-card .credit{margin:0}
.look-card.large h3{font-size:var(--fs-h2);line-height:1.05}
.look-grid{list-style:none;margin:0;padding:0;display:grid;gap:40px 20px;grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr))}
@media (min-width:820px){.look-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:56px 32px}}
.book-card{display:grid;gap:10px;align-content:start}
.book-card .plate{margin-bottom:6px}
.book-card .label,.book-card .sub,.book-card .credit{margin:0}
.book-card h2{font:400 1.875rem/1.1 var(--serif);color:var(--claret)}
.book-card h2 a{color:inherit;text-decoration:none}
.book-card h2 a:hover{text-decoration:underline}
.book-card .sub{font:400 1.125rem/1.4 var(--serif);color:var(--stone)}
/* Books (35.): one column at 390, two from 760, three from 1200; the covers keep the drawing's 2:3 */
.book-grid{display:grid;gap:48px 32px;grid-template-columns:minmax(0,1fr)}
@media (min-width:760px){.book-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1200px){.book-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:64px 40px}}
.see-all{margin:40px 0 0}
.book-end{margin-top:clamp(40px,6vw,72px);padding-top:24px;border-top:1px solid var(--plate-line)}
.meta{margin:0 0 1em;font:400 var(--fs-data)/1.4 var(--mono);color:var(--stone)}
.go{font-weight:600}

/* home, "This week" */
.week{margin-top:clamp(24px,5vw,64px)}
.week-top{display:grid;gap:32px}
.week-head h1{margin:.35em 0 .25em;font:400 var(--fs-h1)/1.02 var(--serif);color:var(--claret)}
.week-head .opening{max-width:56ch}
.week-top .look-card.large .plate{max-width:min(100%,560px)}
.week-rest{list-style:none;margin:40px 0 0;padding:0;display:grid;gap:20px}
@media (max-width:599px){
  .week-rest .look-card{grid-template-columns:104px minmax(0,1fr);column-gap:16px;align-items:center;padding-top:20px;border-top:1px solid var(--plate-line)}
  .week-rest .look-card .plate{grid-row:1 / span 3;margin:0}
  .week-rest .look-card>*:not(.plate){grid-column:2}
  .week-rest .look-card h3{font-size:1.375rem}
}
@media (min-width:600px){.week-rest{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}}
@media (min-width:900px){
  .week-top{grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:clamp(40px,6vw,96px);align-items:center}
  .week-rest{margin-top:72px;gap:clamp(24px,3vw,48px)}
}
.latest{margin-top:clamp(64px,10vw,128px);padding-top:clamp(32px,5vw,56px);border-top:1px solid var(--plate-line)}
.latest h2{margin:0 0 28px;font:400 var(--fs-h2)/1.05 var(--serif);color:var(--claret)}
.home-line{margin-top:clamp(48px,8vw,96px)}

/* Our models, Books: the page title and its lead line */
.models-title,.page-title{margin-block:clamp(32px,6vw,72px) clamp(12px,2vw,20px);font:400 clamp(1.75rem,1.3rem + 1.8vw,2.75rem)/1.15 var(--serif);color:var(--claret)}
.models-intro,.page-intro{max-width:44ch;margin-block:0 clamp(24px,4vw,48px);font:400 clamp(1.125rem,1rem + .5vw,1.375rem)/1.4 var(--serif);color:var(--stone)}
.model{display:grid;gap:20px;padding-block:clamp(40px,6vw,88px);border-top:1px solid var(--plate-line);scroll-margin-top:16px}
.model-fig{margin:0}
.model-fig .plate{max-width:min(100%,280px)}
.model h2{font:400 var(--fs-h2)/1.05 var(--serif);color:var(--claret)}
.model-line{margin:.5em 0 1.2em;font:400 var(--fs-data)/1.5 var(--mono);color:var(--stone)}
.model-text{max-width:var(--measure)}
.model-text h3,.model-looks>h3{margin:1.8em 0 .8em;font:500 var(--fs-label)/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--stone)}
.model-looks>h3{margin-top:.4em}
.model-looks .look-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:820px){
  .model{grid-template-columns:minmax(0,4fr) minmax(0,7fr);grid-template-areas:"fig text" "fig looks";column-gap:clamp(32px,5vw,80px);row-gap:32px;align-items:start}
  .model-fig{grid-area:fig;position:sticky;top:24px}.model-text{grid-area:text}.model-looks{grid-area:looks}
  .model.no-fig{grid-template-columns:minmax(0,1fr);grid-template-areas:"text" "looks"}
  .model-fig .plate{max-width:100%}
}
@media (min-width:1100px){.model-looks .look-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 24px}.model-looks .look-card h3{font-size:1.375rem}}

@media print{
  html{background:#fff}
  .menu,.site-foot,.lp-nav,.skip{display:none}
  .look{break-inside:avoid}
}