trellis-hairline { display:block; position:relative; width:100%; --hairline-plate:#f7f5f1; --hairline-hi:#213321; --hairline-edge:#89917e; --hairline-mid:#adb3a3; --hairline-lo:#d4d7cb; --hairline-stroke:0.9; }
trellis-hairline [data-hairline] { --hairline-plate:#f7f5f1; --hairline-hi:#213321; --hairline-edge:#89917e; --hairline-mid:#adb3a3; --hairline-lo:#d4d7cb; }
trellis-hairline [data-hairline][data-theme="dark"] { color-scheme:dark; --hairline-plate:#213321; --hairline-hi:#f1f0db; --hairline-edge:#abb69c; --hairline-mid:#7c8c72; --hairline-lo:#4f644b; }
.trellis-hairline-read { position:absolute; right:7%; bottom:6%; color:var(--forest); font:10px/1.4 ui-monospace,SFMono-Regular,monospace; letter-spacing:.04em; pointer-events:none; }
trellis-hairline:has([data-theme="dark"]) .trellis-hairline-read {color:#dce2d1;}
trellis-hairline [data-hairline]:focus-visible {outline:1px solid currentColor;outline-offset:-4px;}
.page-intro.hairline-section {display:block;padding-block:clamp(5rem,8vw,9rem);}
.hairline-section > .section-index {margin-bottom:2rem;}
.hairline-intro-layout {display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:5%;}
.hairline-intro-copy h2 {font-size:clamp(2.8rem,4.8vw,5.4rem);}
.hairline-intro-copy > p {font-size:clamp(1rem,1.4vw,1.2rem);max-width:540px;margin-top:2rem;}
.hairline-illustration .trellis-hairline-read {display:none;}
.editorial-media.hairline-media {display:flex;align-items:center;justify-content:center;background:var(--ivory,#f7f5f1);padding:clamp(1.5rem,4vw,4rem);}
.hairline-media trellis-hairline {max-width:620px;}
.home-platform-art.platform-image {display:flex;align-items:center;justify-content:center;background:#213321;min-height:0;padding:clamp(2rem,4vw,5rem);}
.home-platform-art trellis-hairline {max-width:680px;}
.home-tables-art {align-self:center;min-width:0;}
.tables:has(.home-tables-art) {padding-block:clamp(5rem,8vw,8rem);}
.tables:has(.home-tables-art) .tables-layout {align-items:center;margin-top:2.5rem;}
.motion-heading { padding-top:150px; padding-bottom:55px; }
.motion-heading > div { display:grid; grid-template-columns:1fr 1.3fr; align-items:center; gap:3rem; }
.motion-heading h1 { font-size:clamp(4.5rem,9vw,9rem); font-weight:400; line-height:.87; letter-spacing:-.065em; margin:1.5rem 0 2rem; }
.motion-heading h1 em,.motion-end h2 em { font-family:var(--serif); font-weight:400; }
.motion-heading-copy > p {max-width:320px;margin:0 0 2.2rem;font-size:1rem;}
.motion-heading > .text-link {font-size:.76rem;}
.motion-toolbar { border-block:1px solid var(--line); display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; padding-block:18px; font-size:.7rem; }
.motion-toolbar > span {margin-right:auto;}
.motion-toolbar label {display:flex;align-items:center;gap:12px;}
.motion-toolbar input {width:100px;accent-color:var(--forest);}
.motion-toolbar output {font-variant-numeric:tabular-nums;min-width:4ch;}
.motion-toolbar button {border:0;border-bottom:1px solid currentColor;background:transparent;color:inherit;padding:8px 0;cursor:pointer;}
.motion-collection {scroll-margin-top:90px;}
.motion-filters {display:flex;justify-content:space-between;align-items:center;gap:20px;padding-block:32px 18px;font-size:.7rem;}
.motion-filters > div {display:flex;flex-wrap:wrap;gap:8px;}
.motion-filters button {border:1px solid var(--line);background:transparent;color:inherit;padding:10px 14px;cursor:pointer;font:inherit;}
.motion-filters button[aria-pressed="true"] {background:var(--forest);color:#f7f5f1;border-color:var(--forest);}
.motion-filters button span {opacity:.65;margin-left:8px;font-variant-numeric:tabular-nums;}
.motion-filters > span {white-space:nowrap;color:#68735f;}
.motion-index {display:flex;flex-wrap:wrap;gap:12px 24px;padding-block:0 32px;border-bottom:1px solid var(--line);font-size:.7rem;}
.motion-index a {text-decoration:underline;text-underline-offset:4px;}
.motion-collection [hidden] {display:none!important;}
.motion-study {scroll-margin-top:90px;}
.motion-study {display:grid;grid-template-columns:1fr 1.6fr;gap:5%;align-items:center;border-bottom:1px solid var(--line);padding-block:60px;}
.motion-study-copy h2 {font-size:clamp(2.7rem,4.4vw,5rem);font-weight:400;line-height:1;letter-spacing:-.055em;margin:2rem 0 1.5rem;}
.motion-description {max-width:320px;font-size:1.05rem;}
.motion-gesture {font-size:.8rem;max-width:300px;margin-top:2rem;color:#68735f;}
.motion-study-foot {display:grid;gap:18px;font-size:.65rem;margin-top:3rem;}
.motion-study-foot .text-link {width:fit-content;font-size:.72rem;margin:0;}
.motion-canvas {min-width:0;transition:background-color .25s;}
.motion-canvas[data-theme="dark"] {background:#213321;}
.motion-hint {display:block;text-align:center;color:#68735f;font-size:.6rem;letter-spacing:.025em;margin:5px 0 20px;}
.motion-canvas[data-theme="dark"] .motion-hint {color:#abb69c;}
.motion-end {padding-block:100px;}
.motion-end h2 {font-size:clamp(3rem,5.5vw,6rem);font-weight:400;letter-spacing:-.05em;line-height:.95;}
.motion-end > p:not(.section-index) {max-width:490px;}
.motion-credit {margin-top:40px;font-size:.7rem;color:#68735f;}
.motion-credit a {text-decoration:underline;text-underline-offset:4px;}
@media(max-width:760px) {
  .motion-heading {padding-top:120px;padding-bottom:40px;}
  .motion-heading > div {display:block;}
  .motion-heading-copy > p {max-width:300px;font-size:.9rem;}
  .motion-heading h1 {font-size:clamp(3.8rem,13vw,5.5rem);}
  .motion-heading-art {max-width:440px;margin:auto;}
  .motion-toolbar {gap:12px 20px;}
  .motion-toolbar > span {width:100%;}
  .motion-filters {align-items:flex-start;flex-direction:column;gap:14px;}
  .motion-filters button {padding:10px 11px;}
  .motion-study {grid-template-columns:1fr;padding-block:40px;}
  .motion-study-copy h2 {margin:1.2rem 0;}
  .motion-study-foot {margin-top:1.5rem;}
  .motion-canvas {margin-top:24px;}
  .hairline-intro-layout {grid-template-columns:1fr;gap:1rem;}
  .hairline-intro-layout .hairline-illustration {max-width:480px;width:100%;margin:auto;}
  .editorial-media.hairline-media {min-height:0;padding:2.5rem 1.25rem 4rem;}
  .home-platform-art.platform-image {padding:3rem 1.25rem;}
  .home-platform-art + .platform-copy {min-height:0;gap:3rem;padding-block:3rem;}
  .platform:has(.home-platform-art) {min-height:0;}
  .tables:has(.home-tables-art) .tables-layout {gap:2rem;margin-top:2rem;}
  .home-tables-art {order:-1;}
}
@media(prefers-reduced-motion:reduce) {.motion-canvas {transition:none;}}