/* ═══════════════════════════════════════════════════════════════
   andrehogan.com — instrument approach plate
   Ink on chart stock. Three rule weights. One tinted field.
   Tokens and rules are documented in DESIGN.md.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --sheet:    #efefea;
  --sheet-2:  #e6e7e1;
  --terrain:  #e2dcc9;
  --ink:      #14171a;
  --ink-2:    #4a5158;
  --rule:     #a9aea8;
  --magenta:  #a80f63;
  --blue:     #0e5586;
  --box:      #14171a;

  --w-frame: 2px;
  --w-div:   1px;

  --sans: "Archivo", -apple-system, "Segoe UI", sans-serif;
  --narrow: "Archivo Narrow", "Archivo", -apple-system, sans-serif;

  --gut: clamp(.9rem, 3vw, 2.75rem);
  --max: 1320px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--sheet);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(.95rem,.3vw + .88rem,1.03rem);
  line-height:1.55;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}

/* the sheet itself, with the chart's faint printed grid */
.sheet{
  max-width:var(--max);
  margin:0 auto;
  padding:0 var(--gut) clamp(2rem,5vw,4rem);
  background-image:
    linear-gradient(var(--rule) var(--w-div), transparent var(--w-div)),
    linear-gradient(90deg, var(--rule) var(--w-div), transparent var(--w-div));
  background-size:100px 100px;
  background-position:0 0;
  background-blend-mode:normal;
  position:relative;
}
.sheet::before{
  /* screen the grid back so it reads as printed tint, never as a table */
  content:""; position:absolute; inset:0;
  background:var(--sheet); opacity:.94; pointer-events:none; z-index:0;
}
.sheet > *{ position:relative; z-index:1; }

a{ color:var(--magenta); text-decoration:none; border-bottom:1px solid currentColor; }
a:hover{ background:var(--magenta); color:var(--sheet); border-color:var(--magenta); }

:focus-visible{
  outline:2px solid var(--magenta);
  outline-offset:3px;
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:30;
  background:var(--box); color:var(--sheet);
  font-family:var(--narrow); font-weight:600; text-transform:uppercase;
  letter-spacing:.08em; font-size:.8rem; padding:.6rem 1rem;
}
.skip:focus{ left:var(--gut); top:.5rem; border:0; }

/* ── shared chart furniture ───────────────────────────────── */
.cell-label,
.block-title,
.brief-cells dt,
.step-rate,
thead th{
  font-family:var(--narrow);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.09em;
}

.block-title{
  font-size:.78rem;
  margin:0;
  background:var(--box);
  color:var(--sheet);
  padding:.5rem .85rem;
  display:inline-block;
  position:relative;
  top:calc(var(--w-frame) * -1);
  left:calc(var(--w-frame) * -1);
}

.cell-label{
  font-size:.66rem;
  color:var(--ink-2);
  margin:0 0 .45rem;
}

/* ══════════════  BRIEFING STRIP  ══════════════ */
.briefing{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,1.5fr) minmax(0,1fr);
  border:var(--w-frame) solid var(--ink);
  margin-top:clamp(1rem,3vw,2.25rem);
  background:var(--sheet);
}

.brief-id{ padding:clamp(1rem,2.2vw,1.6rem); border-right:var(--w-div) solid var(--ink); }
.brief-id h1{
  font-family:var(--narrow);
  font-weight:700;
  font-size:clamp(1.75rem,3.4vw,3.15rem);
  line-height:.98;
  letter-spacing:-.015em;
  text-transform:uppercase;
  margin:0;
}
.brief-role{
  font-family:var(--narrow);
  font-weight:500;
  font-size:clamp(.82rem,1vw,.95rem);
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--ink-2);
  margin:.7rem 0 0;
  max-width:34ch;
}

.brief-cells{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin:0;
  border-right:var(--w-div) solid var(--ink);
}
.cell{ padding:clamp(1rem,2.2vw,1.6rem) .9rem; border-right:var(--w-div) solid var(--rule); }
.cell:last-child{ border-right:0; }
.cell-key{ background:var(--terrain); }
.brief-cells dt{ font-size:.66rem; color:var(--ink-2); margin:0 0 .5rem; }
.brief-cells dd{ margin:0; }
.brief-cells b{
  display:block;
  font-family:var(--narrow);
  font-weight:700;
  font-size:clamp(1.15rem,1.8vw,1.5rem);
  line-height:1.05;
  letter-spacing:-.01em;
}
.brief-cells span{
  display:block;
  font-size:.8rem;
  line-height:1.35;
  color:var(--ink-2);
  margin-top:.35rem;
}

.brief-freq{ padding:clamp(1rem,2.2vw,1.6rem); }
.brief-freq ul{ list-style:none; margin:0; padding:0; }
.brief-freq li{ margin-bottom:.4rem; }
.brief-freq a{ font-size:.92rem; word-break:break-word; }
.brief-status{
  font-size:.78rem; line-height:1.4; color:var(--ink-2);
  margin:.9rem 0 0; padding-top:.75rem;
  border-top:var(--w-div) solid var(--rule);
}

/* ══════════════  PLAN VIEW  ══════════════ */
.plan{
  border:var(--w-frame) solid var(--ink);
  border-top:0;
  padding:0 clamp(1rem,2.2vw,1.6rem) clamp(1.25rem,2.5vw,2rem);
}
.plan-body{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,3.5rem);
  align-items:start;
  padding-top:clamp(1.25rem,2.5vw,2rem);
}

.claim{
  font-family:var(--narrow);
  font-weight:500;
  font-size:clamp(1.3rem,2.4vw,2.05rem);
  line-height:1.24;
  letter-spacing:-.012em;
  margin:0;
  max-width:26ch;
}
.claim b{ font-weight:700; color:var(--magenta); }
.claim-sub{
  margin:1.1rem 0 0;
  max-width:52ch;
  color:var(--ink-2);
  font-size:.98rem;
}

.fixes{
  list-style:none; margin:clamp(1.5rem,3vw,2.25rem) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,8.5rem),1fr));
  border-top:var(--w-div) solid var(--ink);
  border-left:var(--w-div) solid var(--ink);
}
.fixes li{
  padding:.8rem .9rem;
  border-right:var(--w-div) solid var(--ink);
  border-bottom:var(--w-div) solid var(--ink);
}
.fixes b{
  display:block;
  font-family:var(--narrow); font-weight:700;
  font-size:clamp(1.5rem,2.6vw,2.1rem); line-height:1;
  letter-spacing:-.02em;
}
.fixes span{
  display:block; margin-top:.4rem;
  font-size:.72rem; line-height:1.35; color:var(--ink-2);
}

.plan-chart{ margin:0; }
.track{ width:100%; height:auto; display:block; }
.track .grid path{ stroke:var(--rule); stroke-width:1; fill:none; }
.track .rose circle{ fill:none; stroke:var(--ink-2); stroke-width:1; }
.track .rose path{ stroke:var(--ink-2); stroke-width:1; fill:none; }
.track .rose-n{ fill:var(--ink); stroke:none; }
.track .rose text{
  fill:var(--ink); font-family:var(--narrow); font-size:11px;
  font-weight:600; text-anchor:middle;
}
.track .track-line{
  fill:none; stroke:var(--magenta); stroke-width:3;
  stroke-linecap:square; stroke-linejoin:miter;
}
.track .fix{ fill:var(--sheet); stroke:var(--ink); stroke-width:2.5; }
.track .fix-now{ fill:var(--sheet); stroke:var(--magenta); stroke-width:3; }
.track .fix-now-dot{ fill:var(--magenta); }
.track text{
  font-family:var(--narrow); font-weight:600; font-size:13px; fill:var(--ink);
}
.track .place{
  font-size:11px; letter-spacing:.07em; fill:var(--ink-2); font-weight:500;
}
.track .place-now{ fill:var(--magenta); font-weight:700; }

.station{ cursor:pointer; }
.station:hover .fix,
.station.lit .fix{ fill:var(--magenta); stroke:var(--magenta); }
.station:hover text,
.station.lit text{ fill:var(--magenta); }

.plan-chart figcaption{
  font-size:.74rem; color:var(--ink-2); line-height:1.4;
  margin-top:.75rem; padding-top:.6rem;
  border-top:var(--w-div) solid var(--rule);
}

/* ══════════════  PROFILE VIEW  ══════════════ */
.profile{
  border:var(--w-frame) solid var(--ink);
  border-top:0;
  background:var(--terrain);
  padding:0 clamp(1rem,2.2vw,1.6rem) clamp(.5rem,1.5vw,1rem);
}
.steps{ list-style:none; margin:0; padding:clamp(1.25rem,2.5vw,2rem) 0 0; counter-reset:none; }

.step{
  display:grid;
  grid-template-columns:minmax(0,.34fr) minmax(0,1fr);
  gap:clamp(1rem,3vw,2.75rem);
  padding:clamp(1.25rem,2.5vw,2rem) 0;
  border-top:var(--w-div) solid var(--ink);
  scroll-margin-top:1rem;
}
.step:first-child{ border-top:0; }
.step.lit{ background:rgba(168,15,99,.06); }

.step-date{
  font-family:var(--narrow); font-weight:700;
  font-size:clamp(1rem,1.5vw,1.2rem); text-transform:uppercase;
  letter-spacing:.02em; margin:0; line-height:1.3;
}
.step-place{
  font-size:.86rem; color:var(--ink-2); margin:.45rem 0 0; line-height:1.35;
}
.step-rate{
  font-size:.66rem; color:var(--ink-2); margin:.6rem 0 0;
}

.step-what h3{
  font-family:var(--narrow); font-weight:700;
  font-size:clamp(1.15rem,2vw,1.6rem); line-height:1.1;
  letter-spacing:-.01em; margin:0 0 .9rem;
  text-transform:uppercase;
}
.step-what ul{ margin:0; padding-left:1.15rem; max-width:68ch; }
.step-what li{ margin-bottom:.55rem; }
.step-what li::marker{ color:var(--magenta); }
.step-what b{ font-weight:700; }

/* ══════════════  MINIMUMS TABLE  ══════════════ */
.minimums{
  border:var(--w-frame) solid var(--ink);
  border-top:0;
  padding:0 clamp(1rem,2.2vw,1.6rem) clamp(1.25rem,2.5vw,2rem);
}
.minimums table{
  width:100%; border-collapse:collapse;
  margin-top:clamp(1.25rem,2.5vw,2rem);
  font-size:.9rem;
}
.minimums thead th{
  font-size:.66rem; color:var(--ink-2); text-align:left;
  padding:0 .9rem .5rem 0;
  border-bottom:var(--w-frame) solid var(--ink);
}
.minimums tbody th{
  font-family:var(--narrow); font-weight:600;
  font-size:.95rem; text-align:left; vertical-align:top;
  padding:.85rem 1.5rem .85rem 0;
  white-space:normal; width:22%;
  border-bottom:var(--w-div) solid var(--rule);
}
.minimums td{
  vertical-align:top; padding:.85rem 0;
  color:var(--ink-2); line-height:1.5;
  border-bottom:var(--w-div) solid var(--rule);
}
.minimums tbody tr:last-child th,
.minimums tbody tr:last-child td{ border-bottom:0; }

/* ══════════════  NOTES  ══════════════ */
.notes{
  border:var(--w-frame) solid var(--ink);
  border-top:0;
  padding:0 clamp(1rem,2.2vw,1.6rem) clamp(1.25rem,2.5vw,2rem);
}
.notes-grid{
  display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(1.5rem,4vw,3.5rem);
  padding-top:clamp(1.25rem,2.5vw,2rem);
}
.note h3{
  font-family:var(--narrow); font-weight:600; text-transform:uppercase;
  letter-spacing:.07em; font-size:.74rem; color:var(--ink-2);
  margin:0 0 .75rem; padding-bottom:.5rem;
  border-bottom:var(--w-div) solid var(--ink);
}
.note h3 + ul + h3{ margin-top:1.9rem; }
.note-list{ list-style:none; margin:0; padding:0; font-size:.92rem; }
.note-list li{ padding:.4rem 0; line-height:1.45; }
.note-list.two{ columns:2; column-gap:2rem; }
.note-list.two li{ break-inside:avoid; }
.pend{
  font-family:var(--narrow); font-size:.68rem; text-transform:uppercase;
  letter-spacing:.07em; color:var(--blue); white-space:nowrap;
  border:var(--w-div) solid var(--blue); padding:.1rem .35rem; margin-left:.3rem;
}

/* ══════════════  SUPPLEMENT  ══════════════ */
.supplement{
  border:var(--w-frame) solid var(--ink);
  border-top:0;
  padding:0 clamp(1rem,2.2vw,1.6rem) clamp(1.25rem,2.5vw,2rem);
}
.supp-list{
  list-style:none; margin:0;
  padding:clamp(1.25rem,2.5vw,2rem) 0 0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));
  gap:0;
  border-left:var(--w-div) solid var(--rule);
}
.supp-list li{
  padding:0 1.25rem 1rem;
  border-right:var(--w-div) solid var(--rule);
}
.supp-list h3{
  font-family:var(--narrow); font-weight:700; text-transform:uppercase;
  font-size:1.02rem; letter-spacing:.01em; margin:0 0 .6rem;
}
.supp-list p{ margin:0; font-size:.88rem; color:var(--ink-2); line-height:1.5; }

/* ══════════════  AMENDMENT BLOCK  ══════════════ */
.amendment{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  border:var(--w-frame) solid var(--ink);
  border-top:0;
}
.amend-cta{ padding:clamp(1.25rem,2.5vw,2rem); border-right:var(--w-div) solid var(--ink); }
.amend-line{ margin:0 0 .5rem; font-size:1.02rem; }
.amend-meta{
  padding:clamp(1.25rem,2.5vw,2rem);
  background:var(--sheet-2);
  font-size:.88rem; color:var(--ink-2);
}
.amend-meta p{ margin:0 0 .35rem; }
.amend-meta b{ color:var(--ink); font-family:var(--narrow); text-transform:uppercase; letter-spacing:.03em; }

/* ══════════════  MOTION  ══════════════ */
.js .track-line{
  stroke-dasharray:var(--len,620);
  stroke-dashoffset:var(--len,620);
}
.js .track-line.plotted{
  animation:plot 1.1s cubic-bezier(.16,.84,.3,1) forwards;
}
@keyframes plot{ to{ stroke-dashoffset:0; } }

.js .station{ opacity:0; }
.js .station.settled{ animation:settle .5s ease-out forwards; }
@keyframes settle{ to{ opacity:1; } }

@media (prefers-reduced-motion:reduce){
  .js .track-line{ stroke-dasharray:none; stroke-dashoffset:0; animation:none; }
  .js .station{ opacity:1; animation:none; }
}

/* ══════════════  RESPONSIVE  ══════════════ */
@media (max-width:1040px){
  .briefing{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .brief-id{ grid-column:1 / -1; border-right:0; border-bottom:var(--w-div) solid var(--ink); }
  .brief-cells{ border-right:var(--w-div) solid var(--ink); }
  .plan-body,.notes-grid{ grid-template-columns:1fr; }
  .plan-chart{ max-width:26rem; }
}

@media (max-width:720px){
  .sheet{ background-size:60px 60px; }
  .briefing,.amendment{ grid-template-columns:1fr; }
  /* the briefing strip stays a strip: three compact cells across, as on paper */
  .brief-cells{ border-right:0; border-bottom:var(--w-div) solid var(--ink);
                grid-template-columns:repeat(3,minmax(0,1fr)); }
  .cell{ padding:.75rem .6rem; border-right:var(--w-div) solid var(--rule); }
  .cell:last-child{ border-right:0; }
  .brief-cells dt{ margin-bottom:.3rem; font-size:.6rem; }
  .brief-cells b{ font-size:1rem; }
  .brief-cells span{ font-size:.7rem; margin-top:.2rem; }
  .brief-id{ padding-bottom:.85rem; }
  .brief-freq{ padding:.85rem clamp(1rem,2.2vw,1.6rem) 1rem; }
  .brief-status{ margin-top:.7rem; padding-top:.6rem; }
  .amend-cta{ border-right:0; border-bottom:var(--w-div) solid var(--ink); }
  .step{ grid-template-columns:1fr; gap:.9rem; }
  .step-when{
    display:flex; flex-wrap:wrap; gap:.5rem 1rem; align-items:baseline;
    padding-bottom:.35rem;
  }
  .step-place,.step-rate{ margin:0; }
  .minimums table,.minimums tbody,.minimums tr,.minimums th,.minimums td{ display:block; width:auto; }
  .minimums thead{ display:none; }
  .minimums tbody tr{ padding:.9rem 0; border-bottom:var(--w-div) solid var(--rule); }
  .minimums tbody tr:last-child{ border-bottom:0; }
  .minimums tbody th{ padding:0 0 .3rem; border-bottom:0; }
  .minimums td{ padding:0; border-bottom:0; }
  .note-list.two{ columns:1; }
  .supp-list{ border-left:0; }
  .supp-list li{ padding-left:0; padding-right:0; border-right:0; border-bottom:var(--w-div) solid var(--rule); padding-bottom:1rem; margin-bottom:1rem; }
  .supp-list li:last-child{ border-bottom:0; margin-bottom:0; }
}

@media print{
  .sheet::before{ display:none; }
  .skip{ display:none; }
  a{ border:0; color:var(--ink); }
  .step.lit{ background:none; }
}

/* ── late additions: plate furniture ─────────────────────── */
.fixes-label{ margin:clamp(1.5rem,3vw,2.25rem) 0 .5rem; }
.fixes{ margin-top:0; }

.amend-note{
  margin:1rem 0 0; padding-top:.8rem;
  border-top:var(--w-div) solid var(--rule);
  font-size:.82rem; color:var(--ink-2);
}
.amend-rev{
  margin-top:1rem !important; padding-top:.7rem;
  border-top:var(--w-div) solid var(--rule);
  font-family:var(--narrow); font-size:.68rem; text-transform:uppercase;
  letter-spacing:.08em; color:var(--blue);
}

/* the profile view earns its name: a stepped elevation down the left edge */
.steps{ position:relative; }
.step{ position:relative; }
.step::before{
  content:""; position:absolute; left:0; top:0; bottom:0;
  width:var(--w-div); background:var(--ink); opacity:.28;
}
.step:nth-child(1)::before{ left:0; }
.step:nth-child(2)::before{ left:.75rem; }
.step:nth-child(3)::before{ left:1.5rem; }
.step-when{ padding-left:clamp(1.1rem,2.4vw,2.4rem); }
.step:nth-child(2) .step-when{ padding-left:calc(clamp(1.1rem,2.4vw,2.4rem) + .75rem); }
.step:nth-child(3) .step-when{ padding-left:calc(clamp(1.1rem,2.4vw,2.4rem) + 1.5rem); }
.step::after{
  content:""; position:absolute; top:calc(clamp(1.25rem,2.5vw,2rem) + .55rem);
  width:.55rem; height:var(--w-frame); background:var(--ink);
}
.step:nth-child(1)::after{ left:0; }
.step:nth-child(2)::after{ left:.75rem; }
.step:nth-child(3)::after{ left:1.5rem; }
.step.lit::before,.step.lit::after{ background:var(--magenta); opacity:1; }

@media (max-width:720px){
  .step::before,.step::after{ display:none; }
  .step-when,
  .step:nth-child(2) .step-when,
  .step:nth-child(3) .step-when{ padding-left:0; }
}

/* ── legend: the plate's key, and the real cross-reference control ── */
.legend{ margin-top:1rem; padding-top:.85rem; border-top:var(--w-div) solid var(--ink); }
.legend ul{ list-style:none; margin:0; padding:0; display:grid; gap:var(--w-div); background:var(--rule); border:var(--w-div) solid var(--rule); }
.legend li{ background:var(--sheet); }
.fix-btn{
  display:flex; align-items:center; gap:.6rem; width:100%;
  font:inherit; text-align:left; cursor:pointer;
  background:var(--sheet); border:0; padding:.55rem .7rem;
  color:var(--ink);
}
.fix-btn:hover,.fix-btn[aria-current="true"]{ background:var(--terrain); }
.fix-btn .sym{ width:13px; height:13px; flex:0 0 13px; }
.sym-past{ background:var(--sheet); border:2px solid var(--ink); transform:rotate(45deg); }
.sym-now{ background:var(--magenta); border:2px solid var(--magenta); border-radius:50%; }
.sym-yr{ font-family:var(--narrow); font-weight:700; font-size:.9rem; }
.sym-pl{ font-size:.8rem; color:var(--ink-2); }

/* ── altitude callout on each profile step ── */
.step-alt{
  margin:.7rem 0 0; display:inline-block;
  border:var(--w-div) solid var(--ink); padding:.2rem .45rem;
  font-family:var(--narrow); font-size:.7rem; text-transform:uppercase; letter-spacing:.07em;
  color:var(--ink-2);
}
.step-alt b{ color:var(--ink); font-size:.95rem; font-weight:700; }

/* ── minimums table reads as a boxed grid, as the world promises ── */
.minimums tbody th{ border-right:var(--w-div) solid var(--ink); padding-right:1.2rem; }
.minimums td{ padding-left:1.2rem; }

/* ── mobile: the chart enters the first viewport, table cells go full width ── */
@media (max-width:720px){
  .plan-body{ display:flex; flex-direction:column; gap:0; }
  .plan-claim{ display:contents; }
  .claim{ order:1; }
  .plan-chart{ order:2; margin:1.25rem 0 0; max-width:22rem; }
  .claim-sub{ order:3; margin-top:1.4rem; }
  .fixes-label{ order:4; }
  .fixes{ order:5; }
  .minimums tbody th{ width:auto; border-right:0; padding-right:0; }
  .minimums td{ padding-left:0; }
}