/* Nia: the few pieces the case study needs beyond site.css. Her own
   palette and type are shown here as specimens, inside dark panels, so the
   page itself stays in the portfolio's voice. */
.nia{--n-base:#0A0B0D;--n-module:#101317;--n-raised:#1A1E24;--n-hair:#181B1F;--n-fg:#ECEFF2;--n-fg2:#C6CDD4;
  --n-body:#9BA3AC;--n-tert:#878F99;--n-label:#767E88;--n-ghost:#424A54;--n-live:#3FDB5F;--n-down:#C4705A;
  --n-up:#6BA678;--n-cmd:#7FC98D;--n-sans:"Space Grotesk",system-ui,sans-serif;--n-mono:"Space Mono",ui-monospace,monospace}
.panel{background:var(--n-base);color:var(--n-fg);border-radius:6px;padding:clamp(20px,3vw,40px);font-family:var(--n-sans)}
.panel + .panel,.panel + .gal,.gal + .panel{margin-top:16px}
.lab{font-family:var(--n-mono);font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--n-label)}
.cs-sec .txt ul{padding-left:1.1em;margin:0 0 1em;font-size:17px}
.cs-sec .txt li{margin-bottom:6px}

/* colour */
.greys{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin:14px 0 28px}
.greys div{height:84px;border-radius:10px;box-shadow:inset 0 0 0 1px #22262c;display:flex;align-items:flex-end;padding:8px 10px}
.greys span{font-family:var(--n-mono);font-size:11px;color:var(--n-tert)}
.live-row{display:grid;grid-template-columns:auto 1fr;gap:20px 24px;align-items:center}
.dot{width:84px;height:84px;border-radius:50%;background:var(--n-live);box-shadow:0 0 36px rgba(63,219,95,.35)}
.live-row p{margin:0;color:var(--n-fg2);font-size:17px;max-width:30em}
.live-row p b{color:var(--n-fg);font-weight:500}
.others{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:28px}
.others div{display:flex;gap:12px;align-items:center;font-size:15px;color:var(--n-body);line-height:1.35}
.others i{flex:none;width:28px;height:28px;border-radius:50%}

/* type */
.spec{display:grid;grid-template-columns:1fr 1fr;gap:28px 40px}
.spec .big{font-weight:300;font-size:clamp(64px,8vw,112px);letter-spacing:-.02em;line-height:.9;margin:10px 0 6px}
.spec .date{font-size:clamp(20px,2vw,26px);color:var(--n-fg2);margin:10px 0 0}
.spec .mono{font-family:var(--n-mono);font-size:clamp(15px,1.4vw,18px);letter-spacing:.13em;color:var(--n-fg2);margin:12px 0 6px;line-height:1.7}
.spec p{color:var(--n-body);font-size:15px;line-height:1.45;margin:8px 0 0}

/* her */
.poses{display:grid;grid-template-columns:repeat(4,1fr);gap:24px 12px}
.poses figure{margin:0;text-align:center}
.poses img{width:100%;max-width:144px;margin:0 auto;image-rendering:pixelated}
.poses figcaption{margin-top:8px}
.rim{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px}
.rim div{aspect-ratio:9/14;border-radius:22px;background:var(--n-module);display:flex;flex-direction:column;justify-content:flex-end;padding:16px}
.rim .l{box-shadow:inset 0 0 0 4px var(--n-live),0 0 28px rgba(63,219,95,.25)}
.rim .t{box-shadow:inset 0 0 0 3px #4a5058;background:linear-gradient(var(--n-module),var(--n-module)) padding-box}
.rim .s{box-shadow:inset 0 0 0 4px rgba(236,239,242,.85),0 0 30px rgba(236,239,242,.18)}
.rim b{font-weight:500;font-size:17px}
.rim span{color:var(--n-body);font-size:14px;line-height:1.35;margin-top:4px}

/* what the phone said */
.stories{display:grid;grid-template-columns:1fr 1fr;gap:40px 40px}
.story{border-top:2px solid var(--ink);padding-top:16px}
.story h3{margin-bottom:12px}
.story dl{margin:0;display:grid;gap:10px}
.story dt{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.story dd{margin:0;font-size:17px;line-height:1.45}
.story .n{font-variant-numeric:tabular-nums}

/* her language */
.slash{font-family:var(--n-mono);font-size:clamp(14px,1.35vw,17px);line-height:1.5;display:grid;gap:14px}
.slash div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:6px 28px;align-items:baseline;
  border-bottom:1px solid var(--n-hair);padding-bottom:14px}
.slash div:last-child{border-bottom:0;padding-bottom:0}
.slash q{font-family:var(--n-sans);color:var(--n-body);quotes:"\201C" "\201D"}
.slash code{font:inherit;color:var(--n-fg);overflow-wrap:break-word}
.slash code b{color:var(--n-cmd);font-weight:400}

/* the ladder */
.rungs{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.rungs li{display:grid;grid-template-columns:64px 1fr;gap:20px;align-items:center;padding:18px 22px;border-radius:6px;background:var(--wash)}
.rungs li b{font-size:44px;letter-spacing:-.03em;line-height:1;font-weight:700}
.rungs li strong{display:block;font-weight:500;font-size:19px}
.rungs li span{display:block;color:var(--mute);font-size:16px;line-height:1.4}
.rungs li:nth-child(2){margin-left:4%}.rungs li:nth-child(3){margin-left:8%}.rungs li:nth-child(4){margin-left:12%}

/* rules */

@media (max-width:900px){
  .stories{grid-template-columns:1fr}
  .others{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .greys{grid-template-columns:repeat(3,1fr)}
  .spec{grid-template-columns:1fr}
  .poses{grid-template-columns:repeat(2,1fr)}
  .rim{grid-template-columns:1fr 1fr 1fr;gap:8px}
  .rim div{padding:10px;border-radius:16px}
  .rim b{font-size:14px}.rim span{display:none}
  .others{grid-template-columns:1fr}
  .slash div{grid-template-columns:1fr}
  .rungs li{grid-template-columns:44px 1fr;padding:14px 16px}
  .rungs li b{font-size:34px}
  .rungs li:nth-child(n){margin-left:0}
  .live-row{grid-template-columns:1fr}
}
.verify{border-left:2px solid var(--ink);padding-left:clamp(20px,3vw,40px)}
.verify p{font-size:clamp(24px,2.6vw,36px);line-height:1.3;letter-spacing:-.015em;margin:0}