:root { color-scheme: light; font: 1rem/1.58 "DM Sans", system-ui, sans-serif; }
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); }
.cards { --paper:#fff8eb; --ink:#302022; --muted:#695054; --accent:#862638; --panel:#f7e6d6; --line:#dec4b7; --heading:"DM Serif Text",Georgia,serif; }
.textiles { --paper:#faf7ff; --ink:#302842; --muted:#625672; --accent:#5a3d81; --panel:#eee6fa; --line:#d8cce8; --heading:"Instrument Serif",Georgia,serif; }
.measure { --paper:#f6f9f5; --ink:#1c2e28; --muted:#415b50; --accent:#175741; --panel:#e7efe8; --line:#c6d8cd; --heading:"IBM Plex Mono",monospace; }
.fieldguide { --paper:#fffdf4; --ink:#192e48; --muted:#3e536b; --accent:#164187; --panel:#ffefae; --line:#ddd6ae; --heading:"DM Sans",system-ui,sans-serif; }
a { color:var(--accent); text-underline-offset:.18em; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline:3px solid currentColor; outline-offset:3px; }
img { display:block; max-width:100%; height:auto; }
p { margin:0 0 1rem; }
h1, h2, h3 { line-height:1.12; margin:0 0 .65rem; overflow-wrap:anywhere; }
h1, h2 { font-family:var(--heading); font-weight:500; }
h1 { font-size:clamp(2.35rem,6vw,5.2rem); letter-spacing:-.04em; }
h2 { font-size:clamp(1.65rem,3vw,2.8rem); }
h3 { font-size:1.05rem; }
.shell { width:min(1150px,calc(100% - 2.5rem)); margin-inline:auto; }
.skip { position:absolute; z-index:5; left:1rem; top:1rem; padding:.5rem; background:var(--paper); transform:translateY(-200%); }
.skip:focus { transform:none; }
.top, .foot { display:flex; justify-content:space-between; gap:.8rem 1.4rem; align-items:center; padding-block:1.1rem; }
.top nav, .foot nav { display:flex; gap:.65rem 1.2rem; flex-wrap:wrap; }
.top { border-bottom:1px solid var(--line); font-weight:650; }
.brand { display:inline-flex; align-items:center; gap:.7rem; color:var(--ink); text-decoration:none; font-weight:750; line-height:1.15; }
.logo { display:inline-grid; place-items:center; width:2.35rem; height:2.35rem; flex:none; background:var(--accent); color:white; border-radius:.28rem; }
.logo::before { display:block; content:""; }
.cards .logo::before { width:.85rem; height:1.16rem; border:1.5px solid currentColor; border-radius:.14rem; box-shadow:3px 2px 0 -1px var(--accent),4px 2px 0 currentColor; transform:rotate(-14deg); }
.textiles .logo { border-radius:50%; }
.textiles .logo::before { width:1.2rem; height:.95rem; border:2px dotted currentColor; border-radius:50%; transform:rotate(-25deg); }
.measure .logo::before { width:1.3rem; height:.6rem; border:1px solid currentColor; background:repeating-linear-gradient(90deg,transparent 0 3px,currentColor 3px 4px) top left/100% .26rem no-repeat; transform:rotate(-25deg); }
.fieldguide .logo::before { width:1rem; height:1rem; border:2px solid currentColor; border-radius:50%; border-top-color:transparent; box-shadow:0 -.5rem 0 -.38rem currentColor; }
.button { display:inline-flex; align-items:center; min-height:46px; padding:.65rem 1rem; border:1px solid transparent; border-radius:.25rem; background:var(--accent); color:white; font:inherit; font-weight:750; text-decoration:none; cursor:pointer; }
.button:hover { text-decoration:underline; }
.lead { font-size:clamp(1.05rem,2vw,1.27rem); color:var(--muted); max-width:58ch; }
.foot { border-top:1px solid var(--line); align-items:flex-start; flex-wrap:wrap; }
.foot p { margin:0; color:var(--muted); }
.home-reading { padding-block:2.5rem; }
.reading-list { list-style:none; padding:0; margin:0; }
.reading-list li { padding:.8rem 0; border-bottom:1px solid var(--line); }
.reading-list a { font-weight:750; }
.reading-list p { margin:.18rem 0 0; color:var(--muted); }
.format { padding:1.3rem 0; border-bottom:1px solid var(--line); scroll-margin-top:1rem; }
.format ul { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.1rem; }
.format-nav { display:flex; flex-wrap:wrap; gap:.5rem 1rem; }
.format-nav a { min-height:44px; display:inline-flex; align-items:center; font-weight:700; }
.tile { min-width:0; padding:.45rem .45rem .75rem; background:white; border:1px solid var(--line); }
.tile-photo { display:block; aspect-ratio:4/3; }
.tile-photo img { width:100%; height:100%; object-fit:contain; }
.tile div { padding:.7rem .4rem 0; }
.tile p { color:var(--muted); margin:0; font-size:.93rem; }
.cards-mast { background:#521f2a; color:#fff8eb; }
.cards-frame { display:grid; grid-template-columns:1.05fr .95fr; align-items:center; min-height:390px; }
.cards-frame > div { padding:2rem 2rem 2rem 0; }
.cards-frame .lead { color:#f5d9ca; }
.cards-frame .button { background:#fff8eb; color:#521f2a; }
.cards-frame img { width:100%; height:100%; object-fit:cover; }
.card-formats { padding-top:.8rem; }
.cards .format:nth-of-type(odd) .tile:nth-child(1) { border-top:3px solid var(--accent); }
.cards .home-reading .reading-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.5rem; }
.textile-mast { text-align:center; padding-top:2.6rem; }
.textile-mast > .lead { margin-inline:auto; }
.textile-sample { position:relative; isolation:isolate; min-height:390px; margin-top:1.3rem; display:flex; align-items:flex-end; justify-content:flex-end; padding:1.6rem; text-align:left; }
.textile-sample img { position:absolute; z-index:-1; inset:0; width:100%; height:100%; object-fit:cover; border-radius:1.1rem; }
.textile-sample div { width:min(100%,27rem); padding:1.35rem; border-radius:.75rem; background:var(--paper); }
.textiles .button { border-radius:999px; }
.textile-collection { display:grid; grid-template-columns:13rem minmax(0,1fr); gap:1.6rem; padding-top:2rem; }
.textile-collection aside { position:sticky; top:1rem; align-self:start; padding:1.05rem; background:var(--panel); border-radius:.7rem; }
.textile-collection aside h2 { font-size:1.9rem; }
.textile-collection .format-nav { flex-direction:column; gap:0; }
.textile-collection .format ul { grid-template-columns:repeat(2,minmax(0,1fr)); }
.textiles .tile { border-radius:.9rem; }
.textiles .home-reading .reading-list { max-width:720px; }
.measure-mast { display:grid; grid-template-columns:1.3fr .7fr; gap:2rem; align-items:center; padding-block:2.25rem; }
.measure-mast h1 { font-size:clamp(2.1rem,5.5vw,4.65rem); }
.measure-mast img { width:100%; aspect-ratio:3/2; object-fit:cover; border:1px solid var(--line); }
.measurement-index { border-top:4px solid var(--accent); padding-top:1.3rem; }
.measure-shelf { padding-bottom:2rem; }
.measure .reading-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.15rem; }
.measure .reading-list li { border-top:2px solid var(--line); border-bottom:0; }
.field-mast { margin-block:1.4rem; background:var(--panel); }
.field-mast > div { max-width:50rem; padding:clamp(1rem,5vw,3.2rem); }
.field-mast h1 { font-weight:750; }
.field-mast img { width:100%; height:clamp(185px,28vw,345px); object-fit:cover; object-position:center 60%; }
.field-chapters { padding-block:2rem; display:grid; grid-template-columns:.75fr 1.25fr; gap:1rem 2rem; border-bottom:3px solid var(--accent); }
.field-chapters .reading-list { list-style:decimal; padding-inline-start:1.5rem; }
.field-chapters .reading-list li::marker { color:var(--accent); font-weight:750; }
.field-examples { padding-block:2rem; }
.fieldguide .guide-layout { display:flex; flex-direction:column; }
.fieldguide .article-index { width:min(100%,69ch); border-block:2px solid var(--accent); }
.article { min-height:60vh; padding-block:2rem 3.5rem; }
.article h1 { font-size:clamp(2.1rem,5vw,4.25rem); }
.crumb { margin-bottom:1.2rem; }
.prose { max-width:69ch; }
.prose section { padding-top:1rem; border-top:1px solid var(--line); margin:1.3rem 0; scroll-margin-top:1rem; }
.prose h2 { font-size:clamp(1.45rem,2.8vw,2.15rem); }
.guide-layout { display:grid; grid-template-columns:minmax(12rem,.34fr) minmax(0,1fr); gap:1.7rem; align-items:start; margin-top:1.5rem; }
.article-index { background:var(--panel); padding:.85rem 1.15rem; }
.article-index ol { margin:.25rem 0; padding-left:1.35rem; }
.article-index li + li { margin-top:.5rem; }
.cards .guide-layout { display:block; }
.cards .article-index { max-width:69ch; }
.cards .article-index ol { display:flex; gap:.5rem 1.6rem; flex-wrap:wrap; }
.textiles .article-index { order:2; border-radius:.7rem; }
.textiles .guide-layout { grid-template-columns:minmax(0,1fr) minmax(12rem,.35fr); }
.measure .article-index { position:sticky; top:1rem; border-left:3px solid var(--accent); }
.product-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:2rem; }
.product-photo { display:grid; place-items:center; background:white; border:1px solid var(--line); }
.product-photo img { max-height:520px; width:100%; object-fit:contain; }
.product-facts { display:grid; grid-template-columns:minmax(8rem,.8fr) minmax(0,1.2fr); gap:.4rem .8rem; }
.product-facts dt { font-weight:750; }
.product-facts dd { margin:0; overflow-wrap:anywhere; }
.product-related { margin-top:2rem; }
.table-scroll { max-width:100%; overflow:auto; border:1px solid var(--line); }
table { width:100%; min-width:35rem; border-collapse:collapse; background:white; }
td, th { text-align:left; vertical-align:top; padding:.75rem .9rem; border-bottom:1px solid var(--line); }
thead { background:var(--panel); }
.textiles table tbody tr:nth-child(even) { background:#faf7ff; }
.measure table td { font-family:"IBM Plex Mono",monospace; font-size:.92rem; }
@media (max-width:760px) {
  .shell { width:calc(100% - 2rem); }
  .cards-frame, .measure-mast, .textile-collection, .product-layout, .guide-layout, .textiles .guide-layout { grid-template-columns:1fr; }
  .cards-frame > div { padding:1.4rem 0; }
  .cards-frame img { max-height:260px; }
  .measure-mast { gap:1rem; }
  .textile-collection aside, .measure .article-index { position:static; }
  .textile-collection .format-nav { flex-direction:row; gap:.5rem 1rem; }
  .textiles .article-index { order:0; }
  .textile-sample { min-height:330px; padding:1rem; }
  .cards .home-reading .reading-list, .measure .reading-list { grid-template-columns:1fr; gap:0; }
  .field-chapters { grid-template-columns:1fr; }
}
@media (max-width:540px) {
  .format ul, .textile-collection .format ul { grid-template-columns:1fr; }
}