@import url('../tokens.css');
@import url('fonts.css');

* { box-sizing:border-box; }
body { margin:0; background:var(--tdw-paper-warm); color:var(--tdw-plum); font:400 17px/1.6 var(--font-sans); }
a { color:inherit; text-underline-offset:.18em; }
a:hover { text-decoration-thickness:2px; }
:focus-visible { outline:3px solid var(--tdw-berry); outline-offset:4px; }
.case-page { max-width:1280px; margin:auto; padding:28px clamp(20px,5vw,72px) 72px; }
nav { display:flex; flex-wrap:wrap; gap:12px 28px; padding-bottom:32px; font:400 13px/1.6 var(--font-mono); }
.eyebrow { margin:18px 0; font:400 12px/1.5 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; }
h1,h2,h3 { font-family:var(--font-serif); font-weight:500; line-height:1.15; }
h1 { max-width:18ch; margin:20px 0; font-size:clamp(36px,5.5vw,72px); letter-spacing:-.035em; text-wrap:balance; }
h2 { font-size:clamp(26px,3vw,36px); margin:0 0 18px; }
h3 { font-size:23px; margin:26px 0 10px; }
p { max-width:80ch; margin:0 0 16px; }
.lead { font-size:clamp(20px,2vw,26px); max-width:55ch; line-height:1.4; }
.note { font-size:14px; }
.preview { margin:36px 0 12px; border:1px solid var(--tdw-clay); }
.preview iframe { display:block; width:100%; height:650px; border:0; background:var(--tdw-paper-warm); }
.preview-links { display:flex; flex-wrap:wrap; gap:12px 28px; font-size:15px; }
section { margin-top:44px; border-top:1px solid var(--tdw-clay); padding-top:32px; }
.pair { display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.pair>div { border-left:3px solid var(--tdw-berry); padding-left:20px; }
.pair h3 { margin-top:0; }
.flow { display:flex; flex-wrap:wrap; list-style:none; padding:0; counter-reset:flow; gap:12px; }
.flow li { counter-increment:flow; flex:1 1 160px; padding:16px; background:var(--tdw-bone); }
.flow li::before { content:counter(flow,decimal-leading-zero); display:block; font:400 12px/1.6 var(--font-mono); margin-bottom:10px; }
li { padding-bottom:8px; }
details { margin:24px 0; }
summary { cursor:pointer; padding:12px 0; font-weight:500; }
table { width:100%; border-collapse:collapse; font-size:15px; margin:12px 0; }
th,td { text-align:left; padding:12px; border-bottom:1px solid var(--tdw-clay); vertical-align:top; }
td:first-child { font:400 12px/1.5 var(--font-mono); width:28%; overflow-wrap:anywhere; }
textarea { width:100%; min-height:280px; padding:16px; border:1px solid var(--tdw-clay); border-radius:16px; background:var(--tdw-paper-warm); color:var(--tdw-plum); font:400 14px/1.6 var(--font-mono); resize:vertical; }
button { margin:12px 12px 20px 0; border:0; border-radius:16px; padding:12px 20px; background:var(--tdw-plum); color:var(--tdw-bone); font:500 15px/1.4 var(--font-sans); cursor:pointer; }
.copy-status { font-size:14px; }
.search { display:block; margin-top:36px; font:400 13px/1.5 var(--font-mono); }
.search input { display:block; width:100%; max-width:640px; margin:10px 0; padding:14px 18px; border:1px solid var(--tdw-clay); border-radius:16px; font:400 17px/1.5 var(--font-sans); color:var(--tdw-plum); background:var(--tdw-paper-warm); }
.case-grid { display:grid; grid-template-columns:1fr 1fr; gap:40px; margin:28px 0 40px; }
.case-grid article { border-top:2px solid var(--tdw-plum); padding-top:8px; }
.case-grid h2 { font-size:32px; }
.case-grid img { display:block; width:100%; height:auto; margin:24px 0 16px; border:1px solid var(--tdw-clay); }
[hidden] { display:none!important; }
@media(max-width:700px) {
 .case-grid,.pair { grid-template-columns:1fr; }
 .case-grid { gap:24px; }
 .preview iframe { height:600px; }
 th,td { padding:10px 5px; }
 .case-page { padding-top:20px; }
}