

:root{
  --amber-deep:oklch(0.72 0.135 64);
  --muted-light:oklch(0.82 0.02 175);
  --line-strong:oklch(0.84 0.016 175);
  --shadow-lg:0 24px 60px oklch(0.26 0.04 178 / 0.16),0 6px 18px oklch(0.26 0.04 178 / 0.10);
  --measure:72ch;
  --ease-out:cubic-bezier(0.16,1,0.3,1);
}

h1,h2,h3{overflow-wrap:break-word;hyphens:auto}
p{text-wrap:pretty;overflow-wrap:break-word}

.actions{display:flex;flex-wrap:wrap;gap:14px}
.button-ghost{background:transparent;color:var(--pine);border-color:var(--line-strong)}
.button-ghost:hover{border-color:var(--pine);transform:translateY(-1px)}
.button-ghost-light{background:transparent;color:var(--porcelain);border-color:oklch(0.95 0.01 175 / 0.4)}
.button-ghost-light:hover{border-color:var(--amber);color:var(--amber);transform:translateY(-1px)}
.text-button{border:0;background:transparent;color:var(--muted);text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:0;font:inherit}
.text-button:hover{color:var(--pine)}

.anon-note{display:flex;gap:14px;align-items:center;background:var(--porcelain-2);border-left:3px solid var(--pine);border-radius:var(--r-md);padding:14px 18px;color:var(--muted);font-size:0.94rem;line-height:1.5;max-width:var(--measure)}
.anon-note .anon-tag{flex:none;padding:5px 11px;border-radius:999px;background:oklch(0.81 0.13 72 / 0.18);color:var(--amber-deep);font-size:0.78rem;font-weight:600;white-space:nowrap}

.library-hero{padding-top:clamp(18px,4vw,40px);padding-bottom:clamp(20px,3vw,34px)}
.library-hero h1{font-size:clamp(1.9rem,1.4rem + 2.4vw,3rem);line-height:1.04;max-width:20ch}
.library-hero .lead{margin:18px 0 0;color:var(--muted);font-size:clamp(1.05rem,1rem + 0.4vw,1.22rem);max-width:52ch}

.filters{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 clamp(20px,3vw,30px)}
.filters button{border:1px solid var(--line-strong);background:transparent;color:var(--ink);border-radius:999px;padding:8px 16px;cursor:pointer;font:inherit;font-size:0.9rem;font-weight:500;transition:border-color .18s ease,background .18s ease,color .18s ease}
.filters button:hover{border-color:var(--pine)}
.filters button.active{background:var(--pine);color:var(--porcelain);border-color:var(--pine)}

.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px)}
.case-card{display:flex;flex-direction:column;overflow:hidden;color:inherit;background:var(--porcelain-2);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);transition:border-color .2s ease,transform .2s var(--ease-out),box-shadow .3s ease}
.case-card:hover{border-color:var(--pine);transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.case-card:focus-visible{outline:2.5px solid var(--pine);outline-offset:3px;border-color:var(--pine)}
.case-figure{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--porcelain)}
.case-figure img{width:100%;height:100%;object-fit:cover}
.case-body{display:flex;flex-direction:column;flex:1;padding:clamp(20px,2.4vw,26px)}
.case-topic{color:var(--amber-deep);font-weight:600;font-size:0.8rem;text-transform:uppercase;letter-spacing:0.08em;margin:0 0 12px}
.case-card h2,.case-card h3{font-size:1.2rem;line-height:1.24;letter-spacing:-0.02em;color:var(--pine-900);font-family:"Bricolage Grotesque","Hanken Grotesk",sans-serif;font-weight:700}
.case-card .case-summary{margin:12px 0 0;color:var(--muted);font-size:0.97rem}
.case-card .case-read{margin-top:auto;padding-top:20px;font-weight:600;font-size:0.95rem;color:var(--pine)}
.case-card .case-read span{color:var(--amber-deep);margin-left:5px}
@media (hover:hover){.case-card:hover .case-read{color:var(--pine-700)}}

.case-page{padding-bottom:clamp(40px,6vw,80px)}

.case-hero{padding-top:clamp(18px,4vw,40px);padding-bottom:clamp(16px,3vw,28px)}
.case-hero h1{font-size:clamp(1.8rem,1.35rem + 2.2vw,2.9rem);line-height:1.08;max-width:var(--measure)}
.case-hero .lead{margin:20px 0 0;color:var(--muted);font-size:clamp(1.05rem,1rem + 0.4vw,1.22rem);max-width:46ch}
.case-hero .anon-note{margin-top:24px}

.case-media{margin-block:clamp(24px,4vw,40px)}
.case-media figure{margin:0;max-width:var(--measure)}
.case-media img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r-lg);box-shadow:var(--shadow-photo)}
.case-media figcaption{margin:12px 0 0;color:var(--muted);font-size:0.84rem;max-width:var(--measure)}

.case-article > *{max-width:var(--measure)}
.case-opening{font-size:clamp(1.12rem,1.02rem + 0.5vw,1.3rem);line-height:1.5;color:var(--ink);margin:0 0 clamp(24px,4vw,38px)}
.case-opening p{margin:0 0 14px}
.case-opening p:last-child{margin:0}

.fact-card{margin:0 0 clamp(28px,4vw,42px);padding:clamp(20px,3vw,28px);border:1px solid var(--line);border-radius:var(--r-md);background:var(--porcelain-2);box-shadow:var(--shadow-sm)}
.fact-card .kicker{margin-bottom:14px}
.fact-list{margin:0;display:grid;gap:0}
.fact-list div{display:grid;grid-template-columns:minmax(120px,0.34fr) 1fr;gap:6px 18px;padding:12px 0;border-top:1px solid var(--line)}
.fact-list div:first-of-type{border-top:0;padding-top:0}
.fact-list div:last-of-type{padding-bottom:0}
.fact-list dt{font-size:0.78rem;text-transform:uppercase;letter-spacing:0.06em;font-weight:600;color:var(--amber-deep)}
.fact-list dd{margin:0;font-size:0.97rem;line-height:1.45;color:var(--ink)}

.case-article section{margin:0 0 clamp(26px,4vw,38px)}
.case-article h2{font-size:clamp(1.35rem,1.15rem + 0.9vw,1.75rem);letter-spacing:-0.02em;margin:0 0 12px;font-family:"Bricolage Grotesque","Hanken Grotesk",sans-serif;font-weight:700;line-height:1.14}
.case-article p{margin:0 0 16px}
.case-article p:last-child{margin:0}

.quote{margin:clamp(28px,4vw,44px) 0;padding:4px 0 4px 22px;border-left:3px solid var(--pine)}
.quote p{margin:0;font-family:"Bricolage Grotesque",sans-serif;font-weight:500;font-size:clamp(1.22rem,1.05rem + 0.8vw,1.55rem);line-height:1.32;letter-spacing:-0.015em;color:var(--pine-900)}
.quote cite{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-style:normal;font-size:0.82rem;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;color:var(--muted)}
.quote cite::before{content:"";width:18px;height:2px;border-radius:2px;background:var(--amber-deep)}

.inline-cta{margin:clamp(28px,4vw,44px) 0;padding:18px 22px;border:1px solid var(--line);border-radius:var(--r-md);background:oklch(0.36 0.046 178 / 0.05);display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between}
.inline-cta p{margin:0;color:var(--ink);font-size:0.98rem}
.inline-cta a{color:var(--pine);font-weight:600;text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px;white-space:nowrap}
.inline-cta a:hover{text-decoration-color:var(--pine)}

.for-whom{margin:clamp(28px,4vw,42px) 0 0}
.for-whom h2{font-size:clamp(1.35rem,1.15rem + 0.9vw,1.75rem);margin:0 0 14px;font-family:"Bricolage Grotesque","Hanken Grotesk",sans-serif;font-weight:700}
.for-whom ul{margin:0;padding:0;list-style:none}
.for-whom li{position:relative;padding-left:26px;margin:0 0 10px;color:var(--ink)}
.for-whom li::before{content:"";position:absolute;left:6px;top:0.62em;width:7px;height:7px;border-radius:2px;background:var(--amber)}

.case-cta{margin-top:clamp(36px,6vw,64px)}

.related{padding-top:clamp(36px,6vw,64px);padding-bottom:clamp(40px,6vw,80px)}
.related-head{margin-bottom:clamp(18px,3vw,28px)}
.related-head h2{font-size:clamp(1.5rem,1.2rem + 1.4vw,2.2rem)}

.check-page{padding-top:clamp(24px,5vw,52px);padding-bottom:clamp(48px,8vw,90px)}
.check-intro{max-width:46rem;margin:0 auto clamp(26px,4vw,40px);text-align:center}
.check-intro h1{font-size:clamp(1.9rem,1.4rem + 2.4vw,3rem)}
.check-intro p{margin:18px auto 0;color:var(--muted);max-width:46ch;font-size:1.06rem}
.check-card{max-width:640px;margin:0 auto;background:var(--porcelain-2);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);padding:clamp(24px,4vw,38px)}
.progress{height:6px;border-radius:999px;background:oklch(0.90 0.012 175);overflow:hidden;margin-bottom:22px}
.progress span{display:block;height:100%;background:var(--amber);border-radius:inherit;transition:width .35s var(--ease-out)}
.step-label{color:var(--muted);font-size:0.82rem;text-transform:uppercase;letter-spacing:0.08em;font-weight:600;margin:0}
.check-card h2{font-size:clamp(1.35rem,1.15rem + 1vw,1.85rem);margin:8px 0 22px;font-family:"Bricolage Grotesque","Hanken Grotesk",sans-serif;font-weight:700;line-height:1.14}
.answer-list{display:grid;gap:10px}
.answer-list button{display:flex;justify-content:space-between;align-items:center;gap:14px;text-align:left;background:var(--porcelain);border:1px solid var(--line-strong);border-radius:var(--r-sm);padding:16px 18px;cursor:pointer;color:var(--ink);font:inherit;transition:border-color .18s ease,transform .18s var(--ease-out)}
.answer-list button:hover{border-color:var(--pine);transform:translateY(-1px)}
.answer-list button span{color:var(--amber-deep)}
.check-nav{margin-top:20px;display:flex;gap:18px;align-items:center}
.result-card .kicker{margin-bottom:8px}
.result-card p{color:var(--muted)}
.result-card .actions{margin-top:22px}

@media (max-width:1000px){
  .case-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  .case-hero h1{font-size:clamp(1.7rem,7vw,2.4rem)}
  .fact-list div{grid-template-columns:1fr;gap:3px}
}
@media (max-width:560px){
  .case-grid{grid-template-columns:1fr}
  .anon-note{flex-direction:column;align-items:flex-start}
  .inline-cta{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important}
  .button:hover,.case-card:hover,.answer-list button:hover,.filters button:hover{transform:none}
}
