/* =========================================================
   Case study pages — builds on main.css tokens
   ========================================================= */

.case-wrap { width: 100%; max-width: 1080px; margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Back link ---------- */
.back-link { display: inline-flex; align-items: center; gap: .5rem; color: var(--muted); font-size: .92rem; font-weight: 500; transition: gap .25s var(--ease), color .25s var(--ease); }
.back-link:hover { gap: .78rem; color: var(--ink); }

/* ---------- Intro / hero ---------- */
.case-intro { padding-top: clamp(2.5rem, 6vh, 4.5rem); }
.case-eyebrow { margin-top: 1.7rem; display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.case-eyebrow .dot-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--accent); opacity: .5; }
.case-title { margin-top: 1rem; font-family: var(--serif); font-weight: 380; font-size: clamp(2.5rem, 6.5vw, 4.2rem); line-height: 1.02; letter-spacing: -0.028em; }
.case-deck { margin-top: 1.4rem; font-size: clamp(1.1rem, 2vw, 1.35rem); line-height: 1.55; color: var(--muted); }

.case-meta { margin-top: clamp(2rem, 4vw, 2.8rem); display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1.4rem 2rem; padding-top: 1.8rem; border-top: 1px solid var(--line); }
.case-meta dt { font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted-2); font-weight: 600; margin-bottom: .45rem; }
.case-meta dd { font-size: .97rem; color: var(--ink); line-height: 1.45; }
.case-meta a { color: var(--accent-ink); border-bottom: 1px solid var(--line); transition: border-color .2s var(--ease); }
.case-meta a:hover { border-color: var(--accent); }

/* ---------- Cover ---------- */
.case-cover { margin-top: clamp(2.2rem, 5vw, 3.5rem); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); background: var(--bg-tint); }
.case-cover img { width: 100%; display: block; }

/* ---------- Article body (centered reading column + breakout) ---------- */
.case-body {
  max-width: 1080px; margin-inline: auto; padding-inline: var(--gutter);
  padding-block: clamp(3rem, 7vw, 5.5rem);
  display: grid; grid-template-columns: 1fr min(720px, 100%) 1fr;
}
.case-body > * { grid-column: 2; margin-top: 1.35rem; }
.case-body > *:first-child { margin-top: 0; }
.case-body > .wide { grid-column: 1 / -1; width: min(1080px, 100%); margin-inline: auto; margin-top: clamp(1.8rem, 4vw, 2.6rem); }
.case-body > .case-section { margin-top: clamp(3rem, 7vw, 5rem); }

.case-section-label { display: block; font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); font-weight: 600; margin-bottom: .9rem; }
.case-section-title { font-family: var(--serif); font-weight: 400; font-size: clamp(1.7rem, 3.6vw, 2.4rem); line-height: 1.1; letter-spacing: -0.02em; }
.case-body p { color: var(--muted); font-size: 1.06rem; line-height: 1.72; }
.case-body p .accent, .case-body strong { color: var(--ink); font-weight: 600; }
.case-body p.lead { color: var(--ink); font-size: 1.16rem; line-height: 1.6; }

/* ---------- How-might-we / highlight line ---------- */
/* Needs .case-body p.hmw: `.case-body p` (0,1,1) outranks a bare `.hmw`
   (0,1,0), so font-size/colour/line-height here would otherwise be ignored
   and the line would render as plain muted body text. */
.case-body p.hmw { font-family: var(--serif); font-weight: 400; font-size: clamp(1.7rem, 3.6vw, 2.4rem); line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); padding: clamp(1.6rem,3.4vw,2.4rem) 0; margin-top: clamp(1.6rem,3vw,2.2rem) !important; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.hmw em { font-style: italic; color: var(--accent); }

/* ---------- Figures ---------- */
.figure { margin-top: clamp(1.6rem, 3.5vw, 2.4rem) !important; }
.figure img { width: 100%; display: block; border-radius: var(--radius); border: 1px solid var(--line); background: var(--bg-tint); }
/* Diagrams/charts: the artwork runs to the edge of the source file, so inset it
   from the frame. The art is transparent, so the padding reads as the same
   tinted surface behind it. */
.figure--diagram img { padding: clamp(1rem, 3vw, 2.25rem); }
.figure figcaption { margin-top: .8rem; font-size: .85rem; color: var(--muted-2); text-align: center; }

/* Problem illustration: two portals side by side to show the "hopping" */
.problem-shots { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2vw, 1.4rem); align-items: start; }
.problem-shots figure { margin: 0 !important; }
.problem-shots figcaption { margin-top: .55rem; font-size: .8rem; color: var(--muted-2); text-align: center; line-height: 1.4; }
@media (max-width: 640px) { .problem-shots { grid-template-columns: 1fr; } }

/* ---------- Screenshot carousel ---------- */
.shots { margin-top: clamp(1.6rem, 3.5vw, 2.4rem) !important; }
/* One shared 16:9 frame for every slide. Shots taller than 16:9 are anchored
   to the top (object-position: top) so any crop happens at the bottom, never
   cutting off the header/nav at the top. */
.shots-viewport { overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--radius); border: 1px solid var(--line); background: var(--bg-tint); }
.shots-track { display: flex; height: 100%; transition: transform .45s var(--ease); }
@media (prefers-reduced-motion: reduce) { .shots-track { transition: none; } }
.shots-slide { flex: 0 0 100%; height: 100%; }
.shots-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.shots-controls { display: flex; align-items: center; justify-content: center; gap: 1.1rem; margin-top: 1rem; }
.shots-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; transition: border-color .2s var(--ease), transform .2s var(--ease), opacity .2s var(--ease); }
.shots-btn:hover { border-color: var(--ink); transform: translateY(-1px); }
.shots-btn:active { transform: translateY(0) scale(.96); }
.shots-btn:disabled { opacity: .35; cursor: default; pointer-events: none; }
.shots-count { font-size: .82rem; font-weight: 500; letter-spacing: .04em; color: var(--muted-2); min-width: 3.5ch; text-align: center; font-variant-numeric: tabular-nums; }

/* Prototype carousel: live embeds in an iPad-landscape frame */
.proto-shots .shots-viewport { aspect-ratio: 4 / 3; background: var(--bg-tint); }
.proto-shots .shots-slide { display: block; }
.proto-shots .proto-frame { width: 100%; height: 100%; border: 0; display: block; background: transparent; }

/* ---------- Grouped figures (grid instead of a vertical stack) ---------- */
.figure-group { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2.2vw, 1.5rem) clamp(.9rem, 2vw, 1.3rem); align-items: start; margin-top: clamp(1.6rem, 3.5vw, 2.4rem) !important; }
.figure-group figure { margin: 0 !important; }
/* Uniform tiles: the source screenshots have mismatched aspect ratios, so each
   sits contained in an equal-sized frame rather than leaving ragged rows.
   contain (not cover) keeps every screenshot whole instead of cropping it. */
.figure-group img { width: 100%; display: block; aspect-ratio: 4 / 3; object-fit: contain; padding: .45rem; border-radius: var(--radius); border: 1px solid var(--line); background: var(--bg-tint); }
.figure-group figcaption { margin-top: .65rem; font-size: .82rem; color: var(--muted-2); text-align: center; line-height: 1.45; }
@media (max-width: 620px) { .figure-group { grid-template-columns: 1fr; max-width: 400px; margin-inline: auto; } }

/* ---------- Phone-screen panels ---------- */
.screens { margin-top: clamp(1.6rem,3.5vw,2.4rem) !important; padding: clamp(1.25rem, 3vw, 2rem); background: var(--bg-tint); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.screens-sub { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); font-weight: 600; margin-bottom: 1.1rem; }
.screens-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: clamp(.8rem, 2vw, 1.3rem); align-items: start; }
.screens-grid img, .screens-grid video { width: 100%; height: auto; border-radius: 14px; display: block; }
.screens-grid video { background: #0c2a28; }

/* ---------- Single-video flow carousel (one portrait tablet at a time) ---------- */
.flow-viewport { overflow: hidden; }
.flow-track { display: flex; transition: transform .45s var(--ease); }
@media (prefers-reduced-motion: reduce) { .flow-track { transition: none; } }
.flow-slide { flex: 0 0 100%; display: flex; justify-content: center; align-items: flex-start; }
.flow-slide video { width: auto; max-width: 100%; max-height: min(600px, 68vh); aspect-ratio: 720 / 1034; border-radius: 18px; display: block; background: #0c2a28; box-shadow: 0 14px 44px -16px rgba(0,0,0,.45); }
.flow-controls { display: flex; align-items: center; justify-content: center; gap: 1.2rem; margin-top: 1.3rem; }
.flow-dots { display: inline-flex; align-items: center; gap: .5rem; }
.flow-dot { width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; background: var(--line); cursor: pointer; transition: background .2s var(--ease), transform .2s var(--ease); }
.flow-dot:hover { background: var(--muted-2); }
.flow-dot[aria-current="true"] { background: var(--accent); transform: scale(1.3); }
.flow-dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Solution feature cards (with GIFs) ---------- */
.features { margin-top: clamp(1.8rem,4vw,2.5rem) !important; display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2.4vw, 1.6rem); }
.feature-card { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.fc-media { background: var(--bg-tint); display: flex; justify-content: center; align-items: flex-end; padding: clamp(1rem,2.5vw,1.6rem) clamp(1rem,2.5vw,1.6rem) 0; }
.fc-media img { width: auto; max-width: 62%; max-height: 380px; border-radius: 16px 16px 0 0; display: block; }
.fc-body { padding: 1.3rem 1.4rem 1.5rem; }
.fc-body h3 { font-family: var(--serif); font-weight: 440; font-size: 1.3rem; letter-spacing: -0.01em; }
.fc-body p { margin-top: .45rem; font-size: .96rem !important; line-height: 1.55; }
@media (max-width: 620px) { .features { grid-template-columns: 1fr; } }

/* ---------- Numbered list ---------- */
.num-list { list-style: none; counter-reset: n; display: grid; gap: clamp(1.3rem,3vw,1.9rem); margin-top: 1.6rem !important; padding: 0; }
.num-list > li { counter-increment: n; display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; }
.num-list > li::before { content: counter(n); font-family: var(--serif); font-size: 1.05rem; color: var(--accent); border: 1px solid var(--line); border-radius: 50%; width: 2.3rem; height: 2.3rem; display: grid; place-items: center; flex: none; }
.num-list h3 { font-size: 1.06rem; font-weight: 600; color: var(--ink); line-height: 1.35; }
.num-list p { margin-top: .3rem; font-size: .99rem !important; }

/* ---------- Stat grid ---------- */
.stat-grid { margin-top: 1.7rem !important; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: clamp(.9rem, 2vw, 1.3rem); }
.stat { padding: clamp(1.2rem,2.5vw,1.6rem); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.stat .num { font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 4vw, 2.7rem); color: var(--accent); line-height: 1; letter-spacing: -0.02em; }
.stat .lbl { margin-top: .7rem; font-size: .89rem; color: var(--muted); line-height: 1.45; }

/* ---------- Quotes ---------- */
.quotes { margin-top: 1.6rem !important; display: grid; gap: 1.1rem; }
.quote { font-family: var(--serif); font-style: italic; font-size: clamp(1.15rem,2.4vw,1.4rem); line-height: 1.4; color: var(--ink); padding-left: 1.3rem; border-left: 2px solid var(--accent); }

/* ---------- Task list ---------- */
.tasks { margin-top: 1.5rem !important; display: grid; gap: 1.4rem; }
.task-group .tg-label { font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); font-weight: 600; margin-bottom: .6rem; }
.task-group ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .4rem; }
.task-group li { color: var(--muted); font-size: .98rem; line-height: 1.5; }

/* ---------- Findings (grouped cards: what worked / room to improve) ---------- */
.findings { margin-top: clamp(1.6rem,3.5vw,2.4rem) !important; display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.1rem, 2.6vw, 1.9rem); align-items: start; }
.finding-group { display: grid; gap: .7rem; }
.finding-head { display: flex; align-items: center; gap: .55rem; margin-bottom: .2rem; }
.finding-head h3 { font-size: .76rem; letter-spacing: .07em; text-transform: uppercase; font-weight: 600; color: var(--ink); }
.finding-icon { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; flex: none; }
.finding-group--pos .finding-icon { color: var(--accent-ink); background: color-mix(in srgb, var(--accent) 15%, transparent); }
.finding-group--imp .finding-icon { color: var(--muted); background: var(--bg-tint); border: 1px solid var(--line); }
.finding-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: .82rem 1rem; font-size: .95rem; line-height: 1.5; color: var(--muted); }
.finding-group--pos .finding-card { border-left: 2px solid color-mix(in srgb, var(--accent) 50%, var(--line)); }
@media (max-width: 620px) { .findings { grid-template-columns: 1fr; } }

/* ---------- Design process (5-step cycle) ---------- */
.process-track { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(.9rem, 2.2vw, 1.7rem); }
.process-step { position: relative; text-align: center; }
/* connector line between adjacent nodes (sits behind the node circles) */
.process-step:not(:first-child)::before { content: ""; position: absolute; top: 1.3rem; right: 50%; width: 100%; height: 2px; background: var(--line); z-index: 0; }
.process-node { position: relative; z-index: 1; width: 2.6rem; height: 2.6rem; margin: 0 auto; display: grid; place-items: center; border-radius: 50%; font-family: var(--serif); font-size: 1.1rem; color: var(--accent); background: var(--card); border: 1px solid var(--line); }
.process-name { margin-top: 1rem; font-family: var(--serif); font-weight: 440; font-size: clamp(1.05rem, 1.6vw, 1.2rem); letter-spacing: -.01em; color: var(--ink); line-height: 1.2; }
/* `.case-body p` (0,1,1) would otherwise win over a bare class, so scope these. */
.process .process-desc { margin-top: .4rem; font-size: .9rem; line-height: 1.5; color: var(--muted); }
.process .process-cycle { margin-top: clamp(1.5rem, 3vw, 2.1rem); display: inline-flex; align-items: center; gap: .55rem; font-size: .92rem; line-height: 1.5; color: var(--muted); }
.process .process-cycle svg { color: var(--accent); flex: none; }
@media (max-width: 640px) {
  .process-track { grid-template-columns: 1fr; gap: 0; }
  .process-step { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: .1rem 1.1rem; text-align: left; padding-bottom: 1.5rem; }
  .process-step:not(:first-child)::before { top: -1.5rem; left: 1.3rem; right: auto; width: 2px; height: 1.5rem; }
  .process-node { grid-row: span 2; margin: 0; }
  .process-name { margin-top: .2rem; align-self: center; }
  .process-step:last-child { padding-bottom: 0; }
}

/* ---------- Note / callout ---------- */
.note { margin-top: 1.6rem !important; padding: 1.2rem 1.4rem; background: var(--bg-tint); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 12px; font-size: .97rem; color: var(--muted); line-height: 1.6; }
.note strong { color: var(--ink); }
.note a { color: var(--accent-ink); border-bottom: 1px solid var(--line); }

/* ---------- Next project ---------- */
.next { border-top: 1px solid var(--line); }
.next .case-wrap a { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding-block: clamp(4rem, 8vw, 6.5rem); }
.next .np-label { display: block; font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); font-weight: 600; margin-bottom: .6rem; }
.next .np-title { font-family: var(--serif); font-weight: 400; font-size: clamp(1.7rem, 4vw, 2.6rem); letter-spacing: -0.02em; color: var(--ink); transition: color .25s var(--ease); }
.next a:hover .np-title { color: var(--accent); }
.next .np-arrow { color: var(--muted-2); flex: none; transition: transform .3s var(--ease), color .25s var(--ease); }
.next a:hover .np-arrow { transform: translateX(6px); color: var(--accent); }

@media (max-width: 520px) {
  .next .case-wrap a { flex-direction: column; align-items: flex-start; gap: .8rem; }
}

/* ---------- Personas (horizontal, blended on white) ---------- */
.persona-panel { margin-top: clamp(1.6rem, 3.5vw, 2.4rem) !important; padding: clamp(1.25rem, 3vw, 2rem); background: #FFFFFF; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.persona-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.5vw, 1.6rem); align-items: start; }
.persona-grid img { width: 100%; display: block; border-radius: 14px; }
@media (max-width: 640px) { .persona-grid { grid-template-columns: 1fr; max-width: 320px; margin-inline: auto; } }

/* ---------- Case tabs (two case studies housed in one page) ---------- */
.case-tabs { margin-top: clamp(2rem, 4vw, 2.8rem); display: flex; flex-wrap: wrap; gap: 0 clamp(1.4rem, 3vw, 2rem); border-bottom: 1px solid var(--line); }
.case-tab { appearance: none; background: none; border: 0; cursor: pointer; font: inherit; font-size: 1rem; font-weight: 500; color: var(--muted); padding: .8rem .1rem; margin-bottom: -1px; border-bottom: 2px solid transparent; transition: color .2s var(--ease), border-color .2s var(--ease); }
.case-tab:hover { color: var(--ink); }
.case-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.case-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.tab-panel[hidden] { display: none; }
/* The tab underline already acts as the divider, so the panel's meta drops its
   own top rule to avoid a doubled line right beneath the tabs. */
.tab-panel .case-meta { margin-top: clamp(1.7rem, 3.6vw, 2.5rem); border-top: none; padding-top: 0; }

/* ============ Multi-project case study "bones" ============ */

/* Cover: logo on black */
.case-cover--logo { background: #000; display: grid; place-items: center; min-height: clamp(180px, 20vw, 240px); }
.case-cover--logo img { width: auto; max-width: min(540px, 72%); max-height: 66%; display: block; }

/* Confidentiality disclaimer */
.disclaimer { display: flex; gap: .9rem; align-items: flex-start; padding: 1.1rem 1.3rem; background: var(--bg-tint); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 12px; margin-top: 1.7rem !important; }
.disclaimer svg { color: var(--accent); flex: none; margin-top: 3px; }
.disclaimer p { color: var(--muted); font-size: .95rem !important; line-height: 1.6; margin: 0; }
.disclaimer strong { color: var(--ink); }

/* Placeholder markers */
.ph-badge { display: inline-block; font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--muted-2); background: var(--bg-tint); border: 1px dashed var(--line); border-radius: 999px; padding: .22rem .6rem; margin-bottom: .9rem; }
.ph-image { display: grid; place-items: center; align-content: center; gap: .5rem; text-align: center; background: var(--bg-tint); border: 1px dashed color-mix(in srgb, var(--muted-2) 42%, var(--line)); border-radius: var(--radius); color: var(--muted-2); padding: 2rem; margin-top: 1.5rem !important; }
.ph-image svg { opacity: .5; }
.ph-image .ph-label { font-size: .85rem; }
.ph-image.wide-ratio { aspect-ratio: 16 / 9; }
.ph-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin-top: 1.5rem !important; }
.ph-grid .ph-image { aspect-ratio: 9 / 16; padding: 1rem; margin-top: 0 !important; }

/* Project modules (repeatable) */
.projects { display: grid; gap: clamp(1.5rem, 3vw, 2.2rem); margin-top: 1.8rem !important; }
.project { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.5rem, 3.5vw, 2.5rem); background: var(--card); }
.project-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.project-kicker { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.project-title { font-family: var(--serif); font-weight: 420; font-size: clamp(1.45rem, 3vw, 1.95rem); letter-spacing: -.02em; margin-top: .3rem; }
.project-summary { color: var(--muted); margin-top: .9rem; font-size: 1.04rem; line-height: 1.6; }
.project-resource { display: inline-flex; align-items: center; gap: .42rem; margin-top: .9rem; font-size: .92rem; font-weight: 500; color: var(--accent-ink); border-bottom: 1px solid var(--line); padding-bottom: 1px; transition: border-color .2s var(--ease), gap .2s var(--ease); }
.project-resource:hover { border-color: var(--accent); gap: .6rem; }
.project-resource svg { flex: none; }
.project-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.1rem; }
.chip { font-size: .74rem; font-weight: 500; color: var(--ink); background: var(--bg-tint); border: 1px solid var(--line); border-radius: 999px; padding: .32rem .72rem; }
.chip-status { color: var(--accent-ink); background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: transparent; font-weight: 600; }
.chip-lock { display: inline-flex; align-items: center; gap: .4rem; color: var(--muted); }
.chip-lock svg { flex: none; }

.project-detail { margin-top: 1.6rem; display: grid; gap: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line-soft); }
.sub-label { display: block; font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted-2); font-weight: 600; margin-bottom: .45rem; }
.sub p { color: var(--muted); line-height: 1.65; }

/* Protected / locked project */
.locked-panel { margin-top: 1.6rem; border: 1px dashed color-mix(in srgb, var(--accent) 38%, var(--line)); border-radius: var(--radius); background: var(--bg-tint); padding: clamp(1.75rem, 4vw, 2.75rem); text-align: center; display: grid; justify-items: center; gap: .7rem; }
.locked-panel .lock-icon { color: var(--accent); }
.locked-panel h4 { font-family: var(--serif); font-weight: 440; font-size: 1.2rem; color: var(--ink); }
.locked-panel p { color: var(--muted); font-size: .95rem; max-width: 46ch; margin: 0; }
.lock-form { display: flex; gap: .5rem; margin-top: .5rem; flex-wrap: wrap; justify-content: center; }
.lock-form input { padding: .62rem .95rem; border: 1px solid var(--line); border-radius: 10px; font: inherit; background: var(--card); color: var(--ink); min-width: 210px; }
.lock-form input:focus { outline: none; border-color: var(--accent); }
.lock-error { color: #B23A48; font-size: .85rem; min-height: 1.1em; }
.lock-hint { font-size: .85rem !important; }
.lock-hint a { color: var(--accent-ink); border-bottom: 1px solid var(--line); }