/* Chintan Shingala — portfolio. Direction: "the annotated brief" (1a + 1c strip). */
:root{
  --paper:#f5f6f4;
  --paper-lift:#fbfcfa;
  --ink:#1c2733;
  --ink-soft:#4a5666;
  --line:#d8dbd4;
  --panel:#eceee9;
  --cobalt:#2547d0;
  --cobalt-deep:#1c38a8;
  --amber:#c47f17;
  --mono:'IBM Plex Mono',monospace;
  --serif:'Source Serif 4',Georgia,serif;
  --disp:'Bricolage Grotesque',sans-serif;
  --rail:300px;
  --gap:72px;
  --pad:28px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:1.075rem;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--cobalt)}
a:hover{color:var(--cobalt-deep)}
a:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px;border-radius:2px}
img{max-width:100%;display:block}

/* ---------- document frame ---------- */
.doc{max-width:1140px;margin:0 auto;padding:0 var(--pad)}
.row{display:grid;grid-template-columns:minmax(0,1fr) var(--rail);column-gap:var(--gap)}
.body-rail{position:relative}
.body-rail::before{
  content:"";position:absolute;top:0;bottom:0;
  right:calc(var(--pad) + var(--rail) + (var(--gap)/2));
  width:1px;background:var(--line);
}

/* ---------- masthead ---------- */
.masthead{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;
  padding:26px 0 16px;border-bottom:2px solid var(--ink);
  font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);
}
.masthead .tick{color:var(--cobalt)}
.masthead nav{display:flex;gap:22px}
.masthead a{color:var(--ink-soft);text-decoration:none;letter-spacing:.1em}
.masthead a:hover{color:var(--cobalt)}

/* ---------- type ---------- */
.eyebrow{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);
}
.eyebrow .tick{color:var(--cobalt)}
h1.display{
  font-family:var(--disp);font-weight:600;
  font-size:clamp(2.2rem,4.8vw,3.4rem);
  line-height:1.08;letter-spacing:-.018em;
  margin:20px 0 30px;max-width:17ch;text-wrap:pretty;
}
h1.display em,.pull blockquote em{font-style:normal;color:var(--cobalt)}
h2.sec{font-family:var(--disp);font-weight:600;font-size:1.05rem;letter-spacing:.01em;margin-bottom:18px}
h3.head{
  font-family:var(--disp);font-weight:600;
  font-size:clamp(1.35rem,2.6vw,1.7rem);
  line-height:1.26;letter-spacing:-.01em;margin:14px 0 18px;max-width:24ch;text-wrap:pretty;
}
.prose p{margin-bottom:1.05em;max-width:660px;text-wrap:pretty}

/* ---------- margin rail voices ---------- */
.railcell{min-width:0}
.rail-note{
  font-family:var(--mono);font-size:.78rem;line-height:1.7;color:var(--ink-soft);
  padding-left:14px;border-left:2px solid var(--line);
}
.rail-note.amber-edge{border-left-color:var(--amber)}
.marginalia{
  font-family:var(--serif);font-style:italic;
  font-size:1.02rem;line-height:1.55;color:var(--amber);
  padding-left:14px;border-left:1.5px solid var(--amber);
}
.fig-note-head{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink);margin-bottom:10px;
}
.fig-note-head b{color:var(--cobalt);font-weight:500}
.caption{
  font-family:var(--mono);font-size:.76rem;line-height:1.65;
  color:var(--ink-soft);margin-bottom:16px;
}
.belief-mark{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;color:var(--cobalt)}

/* ---------- buttons ---------- */
.links{display:flex;gap:12px;flex-wrap:wrap}
.btn{
  font-family:var(--mono);font-size:.78rem;letter-spacing:.05em;text-decoration:none;
  color:var(--ink);border:1px solid var(--ink);padding:9px 18px;border-radius:999px;
  transition:background .15s,color .15s;
}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn.primary{background:var(--cobalt);border-color:var(--cobalt);color:#fff}
.btn.primary:hover{background:var(--cobalt-deep);color:#fff}

/* ---------- 1c key/value strip ---------- */
.strip{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--ink);border-bottom:1px solid var(--line);
}
.strip>div{padding:18px 22px;border-left:1px solid var(--line)}
.strip>div:first-child{border-left:none;padding-left:0}
.strip .k{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:6px;
}
.strip .v{font-family:var(--serif);font-size:.98rem;line-height:1.5;color:var(--ink)}
.strip .v a{text-decoration:none}
.strip .v a:hover{text-decoration:underline}

/* ---------- figure unit ---------- */
.fig-tag{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:10px;
}
.fig-tag b{color:var(--cobalt);font-weight:500}
.fig-frame{background:var(--paper-lift);border:1px solid var(--line);border-radius:6px;padding:20px}
.fig-frame img{width:100%;height:auto}
.fig-slot{
  aspect-ratio:3/2;border:1.5px dashed #b9beb4;border-radius:4px;
  display:grid;place-items:center;
  background:repeating-linear-gradient(-45deg,rgba(28,39,51,.035) 0 10px,transparent 10px 20px);
}
.fig-slot span{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--ink-soft);
  background:var(--paper-lift);padding:6px 14px;border-radius:3px;
}

/* ---------- home: work blocks ---------- */
.work-text{border-top:1px solid var(--line);padding:56px 0 0}
.work-fig{padding:30px 0 56px}
.judgment{
  font-family:var(--mono);font-size:.8rem;line-height:1.65;color:var(--ink-soft);
  border-left:2px solid var(--cobalt);padding-left:14px;margin:22px 0;max-width:560px;
}
.judgment b{color:var(--cobalt);font-weight:500}
a.more{
  font-family:var(--mono);font-size:.8rem;color:var(--cobalt);
  text-decoration:none;border-bottom:1px solid transparent;
}
a.more:hover{border-bottom-color:var(--cobalt)}
.concept-tag{
  display:inline-block;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--amber);border:1px solid var(--amber);
  border-radius:999px;padding:3px 10px;margin-left:10px;vertical-align:middle;
}

/* ---------- beliefs ---------- */
.belief{padding:34px 0;border-bottom:1px solid var(--line)}
.belief:last-of-type{border-bottom:none}
.belief h3{
  font-family:var(--disp);font-weight:600;font-size:1.25rem;line-height:1.3;
  letter-spacing:-.005em;margin-bottom:10px;max-width:30ch;
}
.belief h3 em{font-style:italic}
.belief p{color:var(--ink-soft);font-size:1rem;max-width:640px;text-wrap:pretty}

/* ---------- case pages ---------- */
.case-head{padding-top:44px}
.case-head .strip{margin-top:40px}
.alt{
  font-family:var(--mono);font-size:.78rem;line-height:1.65;color:var(--ink-soft);
  border-left:2px solid var(--line);padding-left:14px;margin:22px 0;max-width:560px;
}
.alt b{color:var(--ink);font-weight:500}
.d-eyebrow{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cobalt);margin-bottom:12px;
}
.decision-text{border-top:1px solid var(--line);padding:56px 0 0}
.decision-fig{padding:30px 0 56px}
.situation{padding:56px 0}
.outcome{border-top:1px solid var(--line);padding:56px 0}
.conf-note{font-family:var(--mono);font-size:.75rem;color:var(--ink-soft);max-width:560px}

/* ---------- pull quote ---------- */
.pull{border-top:1px solid var(--line);padding:72px 0}
.pull blockquote{
  font-family:var(--disp);font-weight:500;
  font-size:clamp(1.3rem,3vw,1.75rem);line-height:1.4;letter-spacing:-.01em;
  max-width:24ch;text-wrap:pretty;
}
.pull .attribution{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-soft);
}

/* ---------- portrait ---------- */
.portrait{width:100%;max-width:260px;border-radius:10px;border:1px solid var(--line)}

/* ---------- footers ---------- */
.close{border-top:1px solid var(--ink);padding:64px 0 96px}
.pagenav{
  border-top:1px solid var(--line);padding:40px 0 88px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;
}
.pagenav a{font-family:var(--mono);font-size:.8rem;color:var(--cobalt);text-decoration:none}
.pagenav a:hover{text-decoration:underline}
a.back{font-family:var(--mono);font-size:.78rem;color:var(--ink-soft);text-decoration:none;letter-spacing:0;text-transform:none}

/* ---------- motion ---------- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---------- rail collapse ---------- */
@media (max-width:899px){
  .row{grid-template-columns:1fr;row-gap:0}
  .body-rail::before{display:none}
  .railcell{margin-top:26px}
  .railcell>*+*{margin-top:20px}
  .rail-note,.marginalia{max-width:560px}
  .hero .railcell{margin-top:36px}
  .strip{grid-template-columns:repeat(2,1fr)}
  .strip>div:nth-child(odd){border-left:none;padding-left:0}
  .strip>div:nth-child(n+3){border-top:1px solid var(--line)}
  .belief .railcell{margin-top:8px}
  .portrait{max-width:200px}
}
@media (min-width:900px){
  .railcell>*+*{margin-top:24px}
  .belief-mark{display:block;padding-top:40px}
}