@import url('/tokens.css');

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  font-family: var(--font-body);
}

a { color: var(--accent-dark); }
a:hover { color: var(--ink); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
}

.skip-link:focus { left: 1rem; top: 1rem; z-index: 10; padding: 0.6rem; background: var(--surface); }

.hub-shell {
  width: min(100% - 3rem, 82rem);
  margin-inline: auto;
  padding-block: clamp(2rem, 6vw, 5rem);
}

.top-nav,
.hub-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  font: 500 0.82rem/1.4 var(--font-display);
}

.top-nav { padding-bottom: 1rem; border-bottom: 1px solid var(--ink); }
.top-nav a, .hub-footer a { color: var(--ink); text-decoration: none; }

.hub-header {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(18rem, 0.75fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: end;
  padding-block: clamp(3rem, 8vw, 7rem);
}

.hub-header h1 {
  max-width: 16ch;
  margin: 0;
  font: 700 clamp(2.6rem, 6.5vw, 6.8rem)/0.94 var(--font-display);
  letter-spacing: -0.06em;
}

.hub-header__side { display: grid; gap: 1rem; align-content: end; }
.eyebrow { margin: 0; color: var(--accent-text); font: 700 0.72rem/1.2 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; }
.deck { margin: 0; color: var(--body-text); font-size: clamp(1.05rem, 1.8vw, 1.25rem); line-height: 1.6; }

.hub-visual { margin: 0 0 clamp(3rem, 7vw, 6rem); }
.hub-visual img { display: block; width: 100%; height: auto; border: 1px solid var(--border); }
.hub-visual figcaption { max-width: 72ch; margin-top: 0.75rem; color: var(--muted); font: 400 0.76rem/1.5 var(--font-display); }

.practice-directions { margin: 0 0 clamp(3rem, 7vw, 6rem); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); padding-block: 1.4rem; }
.practice-directions h2 { margin: 0.7rem 0 1.4rem; font: 700 clamp(1.8rem, 4vw, 3.8rem)/1 var(--font-display); letter-spacing: -0.045em; }
.practice-directions__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--border); }
.practice-directions__grid article { display: grid; min-height: 10rem; padding: 1rem; border-left: 1px solid var(--border); color: var(--ink); }
.practice-directions__grid article:first-child { border-left: 0; }
.practice-directions__grid strong { align-self: end; font: 700 1rem/1.25 var(--font-display); }
.practice-directions__grid span { color: var(--accent-text); font: 700 0.68rem/1.2 var(--font-display); }
.practice-directions__grid p { margin: 0.55rem 0 0; color: var(--body-text); font-size: 0.88rem; line-height: 1.45; }
.practice-directions__grid .practice-directions__wide { grid-column: 1 / -1; min-height: 7rem; border-top: 1px solid var(--border); border-left: 0; }

.materials { border-top: 1px solid var(--ink); }
.materials > h2 { margin: 0; padding: 1.1rem 0; font: 700 clamp(1.2rem, 2.2vw, 1.7rem)/1.2 var(--font-display); }
.material-list { border-bottom: 1px solid var(--ink); }

.material-row {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) auto 2rem;
  gap: 1rem;
  align-items: center;
  min-height: 7.5rem;
  padding: 1rem 0;
  border-top: 1px solid var(--border);
  color: var(--ink);
  text-decoration: none;
}

.material-row:hover { color: var(--accent-dark); }
.material-number, .material-time { color: var(--muted); font: 500 0.7rem/1.3 var(--font-display); }
.material-copy { display: grid; gap: 0.35rem; }
.material-copy strong { font: 700 clamp(1.05rem, 2vw, 1.45rem)/1.25 var(--font-display); }
.material-copy span { max-width: 64ch; color: var(--body-text); line-height: 1.5; }
.material-arrow { color: var(--accent-text); font: 600 1.5rem/1 var(--font-display); }

.passport-section { padding-block: clamp(4rem, 8vw, 7rem); }
.passport-section__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.6fr); gap: 2rem 5rem; align-items: end; margin-bottom: 2rem; }
.passport-section h2 { margin: 0; font: 700 clamp(2rem, 4.2vw, 4rem)/1 var(--font-display); letter-spacing: -0.045em; }
.passport-section__head p { margin: 0; color: var(--body-text); line-height: 1.6; }
.passport-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.passport-card { display: grid; min-height: 14rem; padding: 1.35rem; border: 1px solid var(--ink); color: var(--ink); background: var(--surface); text-decoration: none; }
.passport-card:hover { box-shadow: 0.4rem 0.4rem 0 var(--accent-pale); }
.passport-card__id { color: var(--accent-text); font: 700 0.68rem/1 var(--font-display); }
.passport-card strong { align-self: end; font: 700 clamp(1.2rem, 2vw, 1.6rem)/1.2 var(--font-display); }
.passport-card p { margin: 0.65rem 0 0; color: var(--body-text); line-height: 1.5; }
.passport-card--wide { grid-column: 1 / -1; }

.hub-footer { margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--ink); }

@media (max-width: 720px) {
  .hub-shell { width: min(100% - 2rem, 82rem); }
  .hub-header, .passport-section__head { grid-template-columns: 1fr; gap: 1.4rem; }
  .material-row { grid-template-columns: 2.2rem minmax(0, 1fr) 1.5rem; }
  .material-time { grid-column: 2; }
  .material-arrow { grid-column: 3; grid-row: 1 / span 2; }
  .passport-grid { grid-template-columns: 1fr; }
  .passport-card--wide { grid-column: auto; }
  .practice-directions__grid { grid-template-columns: 1fr; }
  .practice-directions__grid article { min-height: 8rem; border-top: 1px solid var(--border); border-left: 0; }
  .practice-directions__grid article:first-child { border-top: 0; }
  .practice-directions__grid .practice-directions__wide { grid-column: auto; }
}