:root { color-scheme: dark; --ink:#111715; --paper:#f4f4ed; --muted:#aab1a8; --accent:#d6e789; --line:#3b443b; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--ink); color:var(--paper); font-family:Arial,Helvetica,sans-serif; }
a { color:inherit; text-decoration:none; }
a:focus-visible { outline:2px solid var(--accent); outline-offset:8px; }
header,main,footer { width:min(1280px,calc(100% - 96px)); margin:auto; }
header { display:flex; align-items:center; justify-content:space-between; padding:32px 0; border-bottom:1px solid var(--line); }
.wordmark { font-size:24px; font-weight:700; letter-spacing:-1px; }
.wordmark span { font-weight:400; padding-left:5px; }
.wordmark i { color:var(--accent); font-style:normal; margin-left:14px; }
.contact { font-size:14px; padding:10px 0; border-bottom:1px solid var(--accent); }
.intro { padding:76px 0 70px; }
.eyebrow { margin:0 0 34px; font-family:monospace; font-size:14px; letter-spacing:.06em; color:var(--accent); }
h1 { margin:0; max-width:1000px; font-size:clamp(64px,8.8vw,124px); font-weight:400; letter-spacing:-.065em; line-height:.98; }
h1 em { font-family:Georgia,serif; color:var(--accent); font-weight:400; letter-spacing:-.055em; }
.approach { display:grid; grid-template-columns:1fr 1.5fr; gap:80px; border-top:1px solid var(--line); padding:64px 0 80px; }
.section-label span { color:var(--muted); font:14px monospace; }
h2 { font-size:36px; letter-spacing:-.04em; font-weight:400; line-height:1.15; }
.section-label h2 { margin:32px 0 0; }
.principles article { display:flex; gap:28px; padding:25px 0; border-bottom:1px solid var(--line); }
.principles article:first-child { padding-top:0; }
.number { padding-top:8px; color:var(--accent); font:14px monospace; }
h3 { margin:0 0 12px; font-size:28px; letter-spacing:-.035em; font-weight:400; }
.principles p { margin:0; max-width:470px; color:var(--muted); font-size:17px; line-height:1.6; }
.closing { background:var(--accent); color:var(--ink); padding:50px; margin-bottom:70px; }
.closing h2 { font-size:clamp(36px,5vw,64px); margin:0 0 38px; }
.closing a { display:inline-block; font-size:20px; border-bottom:1px solid var(--ink); padding-bottom:7px; }
footer { border-top:1px solid var(--line); padding:25px 0 40px; display:flex; justify-content:space-between; gap:20px; color:var(--muted); font-size:14px; }
@media (max-width:700px) {
  header,main,footer { width:calc(100% - 40px); }
  header { padding:24px 0; }
  .intro { padding:55px 0; }
  h1 { font-size:clamp(54px,12vw,82px); }
  .approach { grid-template-columns:1fr; gap:36px; padding:42px 0; }
  .section-label h2 { margin-top:18px; }
  .closing { padding:30px 24px; margin-bottom:40px; }
  footer { flex-direction:column; gap:10px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
.intro { position:relative; isolation:isolate; overflow:clip; }
.intro > :not(.plate) { position:relative; z-index:1; }
.plate { position:absolute; z-index:-1; width:790px; height:790px; right:-170px; top:-18px; opacity:.85; pointer-events:none; mask-image:linear-gradient(90deg,transparent,black 42%,black 92%,transparent); }
.plate-circle { position:absolute; inset:40px; border:1px solid #64745c38; border-radius:50%; }
.plate-circle::before,.plate-circle::after { content:""; position:absolute; inset:12px; border:1px solid #64745c20; border-radius:50%; }
.plate-circle::after { inset:50px; border-style:dashed; }
.texture { position:absolute; width:100%; height:100%; transition:opacity 1.2s ease,transform 1.5s ease; }
.texture-b { opacity:0; transform:rotate(-18deg) scale(.9); }
.plate-index { position:absolute; right:155px; top:155px; color:#b8c798; opacity:.55; font:10px monospace; letter-spacing:.2em; }
.notation { display:inline-flex; gap:15px; align-items:center; min-width:120px; min-height:48px; padding:8px 12px; margin:44px 0 0; border:1px solid var(--line); border-radius:2px; color:var(--accent); background:var(--ink); cursor:pointer; user-select:none; -webkit-user-select:none; touch-action:manipulation; }
.notation > span { pointer-events:none; }
.notation > span:first-child { font:30px Georgia,serif; }
.notation-caption { font:12px monospace; color:var(--muted); }
.notation:hover { border-color:var(--accent); }
.notation[aria-pressed="true"] { background:var(--accent); color:var(--ink); border-color:var(--accent); }
.notation[aria-pressed="true"] .notation-caption { color:var(--ink); }
.notation:focus-visible { outline:1px solid var(--accent); outline-offset:6px; }
body.alternate .texture-a { opacity:.06; transform:rotate(9deg); }
body.alternate .texture-b { opacity:.95; transform:rotate(0) scale(1); }
.small-plate { width:230px; height:230px; position:relative; margin-top:24px; }
.small-plate img { width:100%; opacity:.8; }
.small-plate span { display:block; text-align:center; font:9px monospace; letter-spacing:.1em; color:#869479; opacity:.48; }
.closing { position:relative; isolation:isolate; overflow:clip; }
.closing > :not(.closing-art) { position:relative; z-index:1; }
.closing-art { position:absolute; width:650px; height:650px; right:-60px; top:-170px; pointer-events:none; z-index:-1; mask-image:linear-gradient(90deg,transparent,black 45%); }
@media (max-width:900px) {
  .plate { right:-330px; opacity:.65; }
  .small-plate { width:190px; height:190px; }
}
@media (max-width:700px) {
  .plate { width:620px; height:620px; right:-280px; top:-30px; opacity:.6; }
  .small-plate { position:absolute; right:0; top:20px; width:140px; height:140px; opacity:.6; }
  .section-label { position:relative; }
  .small-plate span { font-size:7px; }
  .notation { margin-top:24px; }
  .closing-art { width:460px; height:460px; right:-170px; top:-80px; opacity:.65; }
}
@media (prefers-reduced-motion:reduce) { .texture { transition:none; } }