/* ===========================================================================
   168 Institute. Page styles for everything under /168institute/.

   Tokens and the reset come from /assets/tokens.css and are never redefined
   here. Nothing in this file invents a colour or a type size that is not in
   the token layer. The only literals are the alpha whites the handoff spec
   states directly, and they are collected at the top as named values rather
   than scattered through the file.

   Shared by:
     /168institute/index.html
     /168institute/apply/index.html
     /168institute/apply/thanks/index.html

   This site is light theme. Dark sections carry data-theme="dark" on their
   inner container only, never on the outer section, because the outer section
   paints itself with --surface-inverse and that token flips inside a dark
   scope.
   =========================================================================== */

:root{
  /* Alpha whites, quoted directly by the handoff for copy on dark fields. */
  --on-dark-body:rgba(255,255,255,.76);
  --on-dark-intro:rgba(255,255,255,.72);
  --on-dark-step:rgba(255,255,255,.7);
  --on-dark-faint:rgba(255,255,255,.5);
  --rule-on-dark:rgba(255,255,255,.14);
  --rule-band:rgba(255,255,255,.08);
  --fill-inverse:rgba(255,255,255,.10);
  --fill-inverse-hover:rgba(255,255,255,.18);

  /* Section rhythm. Drops at the small breakpoint. */
  --sec-y:112px;
  --band-y:56px;
}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

a{color:inherit;text-decoration:none}
.icon{flex:none;display:block}

/* Anchor targets clear the sticky header. */
[id]{scroll-margin-top:88px}

.skip{
  position:absolute;left:-9999px;top:0;z-index:60;
  font-family:var(--font-mono);font-size:13px;
  padding:12px 16px;background:var(--surface-card);color:var(--text-primary);
  border:1px solid var(--border-brand);border-radius:var(--radius-sm);
}
.skip:focus{left:12px;top:12px}

/* Visually hidden but still read by assistive tech. */
.vh{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

.wrap{max-width:var(--container-max);margin-inline:auto;padding-inline:var(--gutter-page)}
.wrap--sec{padding-block:var(--sec-y)}
.wrap--band{padding-block:var(--band-y)}

/* ==========================================================================
   Wordmark. Mono numeral plus a Grotesk word, baseline aligned.
   ========================================================================== */
/* Padding, not min-height. A baseline-aligned flex line does not centre
   itself in spare cross-axis space, it sticks to the top. */
.mark{display:flex;align-items:baseline;gap:8px;padding-block:8px;color:var(--text-primary)}
.foot__brand .mark{padding-block:0}
.mark__num{
  font-family:var(--font-mono);font-size:22px;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;
}
.mark__word{
  font-family:var(--font-display);font-weight:var(--weight-semibold);
  font-size:22px;letter-spacing:-.02em;
}
.mark--sm .mark__num,.mark--sm .mark__word{font-size:20px}

/* ==========================================================================
   Header. Sticky, not fixed. Gains the glass backdrop and hairline on scroll.
   ========================================================================== */
.hdr{
  position:sticky;top:0;z-index:20;
  border-bottom:1px solid transparent;
  transition:background-color var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out);
}
.hdr[data-scrolled]{
  background:var(--surface-glass);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom-color:var(--border-subtle);
}
.hdr__in{
  max-width:var(--container-max);margin-inline:auto;
  padding:16px var(--gutter-page);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.hdr__nav{display:flex;align-items:center;gap:28px}
.hdr__link{
  display:inline-flex;align-items:center;
  min-height:44px; /* tap target, including in the desktop row */
  font-size:15px;color:var(--text-secondary);
  transition:color var(--dur-fast) var(--ease-out);
}
.hdr__link:hover{color:var(--text-link-hover)}

/* The compact cluster. Only exists below 640px, where the nav collapses and
   the primary CTA has to stay reachable without opening the menu. */
.hdr__side{display:none;align-items:center;gap:10px}

/* Menu button is desktop-hidden and only exists below 640px. */
.hdr__toggle{
  display:none;
  align-items:center;justify-content:center;
  width:44px;height:44px;
  background:transparent;border:1px solid var(--border-default);
  border-radius:var(--radius-md);color:var(--text-primary);cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out);
}
.hdr__toggle:hover{border-color:var(--border-strong);background:var(--surface-subtle)}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:var(--weight-semibold);
  border-radius:var(--radius-md);
  border:1px solid transparent;
  cursor:pointer;white-space:nowrap;
  transition:filter var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out);
}
.btn--sm{height:36px;padding:0 16px;font-size:14px}
/* The design puts the header button at 36px. That is under the 44px touch
   minimum, so touch pointers get the taller control and mice keep the
   designed height. */
@media (pointer:coarse){.hdr .btn--sm{height:44px}}
.btn--lg{height:48px;padding:0 24px;font-size:16px}
.btn--primary{background:var(--gradient-labs);color:var(--ink-0)}
.btn--primary:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn--primary:active{transform:scale(var(--press-scale))}
.btn--inverse{background:var(--fill-inverse);color:var(--ink-0)}
.btn--inverse:hover{background:var(--fill-inverse-hover)}
.btn--inverse:active{transform:scale(var(--press-scale))}

/* ==========================================================================
   Card. White, hairline, shadow-sm, 18px radius. Never a coloured left
   border. The one permitted stripe is a 3px gradient bar across the top.
   ========================================================================== */
.card{
  position:relative;overflow:hidden;
  background:var(--surface-card);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
}
.card--p28{padding:28px}
.card--p32{padding:32px}
.card--accent::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--gradient-labs);
}

/* ==========================================================================
   Badge. Read-only status pill.
   ========================================================================== */
.badge{
  display:inline-flex;align-items:center;gap:7px;flex:none;
  height:24px;padding:0 12px;border-radius:var(--radius-pill);
  font-size:12px;font-weight:var(--weight-semibold);
  background:var(--accent-success-bg);color:var(--accent-success);
}
.badge__dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}

/* ==========================================================================
   Stat. One mono value plus an uppercase label. Optional delta.
   ========================================================================== */
.stat{display:grid;gap:8px;align-content:start}
.stat__row{display:flex;align-items:baseline;gap:10px}
.stat__value{
  font-family:var(--font-mono);font-weight:var(--weight-medium);
  font-size:38px;line-height:1.05;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;color:var(--text-primary);
}
.stat__delta{
  display:inline-flex;align-items:center;gap:3px;
  font-family:var(--font-mono);font-size:13px;
  font-variant-numeric:tabular-nums;color:var(--accent-success);
}
.stat__label{
  font-weight:var(--weight-bold);font-size:12px;
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;
  color:var(--text-muted);
}

/* ==========================================================================
   Eyebrows and headings
   ========================================================================== */
.eyebrow{
  font-family:var(--font-mono);font-size:12px;
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;
  color:var(--text-brand);
}
.eyebrow--dark{color:var(--orchid-300)}
.eyebrow--muted{color:var(--text-muted)}
.eyebrow--faint{color:var(--on-dark-faint)}
.eyebrow--sm{font-size:11px}

.h-sec{font-size:44px;line-height:1.08;letter-spacing:-.026em;margin:0}
.h-card{font-size:22px;line-height:1.3;letter-spacing:-.02em;margin:0}
.h-step{
  font-family:var(--font-display);font-weight:var(--weight-semibold);
  font-size:24px;line-height:1.3;letter-spacing:-.02em;
}

.body-lg{font-size:18px;line-height:1.65;color:var(--text-secondary)}
.body-sm{font-size:15px;line-height:1.6;color:var(--text-secondary)}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{position:relative;overflow:hidden;background:var(--ink-950)}
.hero__glow{
  position:absolute;width:720px;height:720px;left:-220px;top:-300px;
  background:radial-gradient(circle,rgba(139,92,240,.34),rgba(139,92,240,0) 68%);
  filter:blur(70px);pointer-events:none;
}
.hero__in{
  position:relative;
  display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;
}
.hero__copy{display:grid;gap:28px}
.hero__title{
  font-size:64px;line-height:1.02;letter-spacing:-.03em;margin:0;
  color:var(--text-primary);max-width:14ch;text-wrap:pretty;
}
.hero__body{font-size:18px;line-height:1.6;color:var(--on-dark-body);max-width:52ch;margin:0}
.hero__actions{display:flex;gap:12px;flex-wrap:wrap;padding-top:8px}
.hero__figure{margin:0;height:480px;border-radius:var(--radius-lg);overflow:hidden}
.hero__img{width:100%;height:100%;object-fit:cover;display:block}

/* ==========================================================================
   Stat band
   ========================================================================== */
.band{background:var(--surface-inverse);border-top:1px solid var(--rule-band)}
.band__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}

/* ==========================================================================
   The method
   ========================================================================== */
.intro{display:grid;gap:16px;max-width:66ch;margin-bottom:48px}
.method__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.method__card{display:grid;gap:12px;align-content:start}

/* ==========================================================================
   Your week
   ========================================================================== */
.week{
  background:var(--surface-sunken);
  border-top:1px solid var(--border-subtle);
  border-bottom:1px solid var(--border-subtle);
}
.week__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
.week__copy{display:grid;gap:20px}
.week__copy .body-lg{max-width:54ch}
.report{display:grid;gap:24px}
.report__head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.report__title{
  font-family:var(--font-display);font-weight:var(--weight-semibold);
  font-size:20px;letter-spacing:-.018em;color:var(--text-primary);
}
.report__stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.report__note{padding-top:20px;border-top:1px solid var(--border-subtle);display:grid;gap:8px}

/* ==========================================================================
   Admission
   ========================================================================== */
.adm{background:var(--surface-inverse);position:relative;overflow:hidden}
.adm__glow{
  position:absolute;width:680px;height:680px;right:-200px;bottom:-320px;
  background:radial-gradient(circle,rgba(76,123,255,.30),rgba(76,123,255,0) 68%);
  filter:blur(70px);pointer-events:none;
}
.adm__in{position:relative;display:grid;gap:48px}
.adm__intro{display:grid;gap:16px;max-width:62ch}
.adm__title{color:var(--text-primary)}
.adm__lede{font-size:18px;line-height:1.65;color:var(--on-dark-intro);margin:0}
.adm__steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.adm__step{display:grid;gap:10px;padding-top:24px;border-top:1px solid var(--rule-on-dark)}
.adm__step .h-step{color:var(--text-primary)}
/* Body copy only. Do not widen this to .adm__step p, it outranks .h-step and
   collapses the 24px step title down to body size. */
.adm__body{font-size:15px;line-height:1.6;color:var(--on-dark-step);margin:0}
.adm__actions{display:flex;gap:12px;flex-wrap:wrap}

/* ==========================================================================
   Footer
   ========================================================================== */
.foot{
  max-width:var(--container-max);margin-inline:auto;
  padding:56px var(--gutter-page) 72px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.foot__brand{display:grid;gap:6px}
.foot__tag{font-size:14px;color:var(--text-muted)}
.foot__meta{font-family:var(--font-mono);font-size:13px;color:var(--text-muted)}
.foot__link{
  color:var(--text-muted);text-decoration:underline;
  text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);
  text-underline-offset:.18em;
  transition:color var(--dur-fast) var(--ease-out);
}
.foot__link:hover{color:var(--text-link-hover)}

/* ==========================================================================
   Application form
   ========================================================================== */
.page{padding-block:var(--sec-y)}
.page__head{display:grid;gap:16px;max-width:60ch;margin-bottom:40px}
.page__title{font-size:44px;line-height:1.08;letter-spacing:-.026em;margin:0}

.form{max-width:640px;display:grid;gap:24px}
.field{display:grid;gap:8px}
.field__label{font-size:15px;font-weight:var(--weight-semibold);color:var(--text-primary)}
.field__hint{font-size:13px;color:var(--text-muted)}
.field__req{
  font-family:var(--font-mono);font-weight:var(--weight-regular);
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-brand);margin-left:2px;
}

.input,.select,.textarea{
  width:100%;
  font-family:var(--font-sans);font-size:16px;line-height:1.5;
  color:var(--text-primary);
  background:var(--surface-card);
  border:1px solid var(--border-default);
  border-radius:var(--radius-md);
  padding:12px 14px;
  min-height:48px;
  transition:border-color var(--dur-fast) var(--ease-out);
}
.input:hover,.select:hover,.textarea:hover{border-color:var(--border-strong)}
.input:focus-visible,.select:focus-visible,.textarea:focus-visible{
  border-color:var(--border-brand);
  border-radius:var(--radius-md);
}
.textarea{min-height:132px;resize:vertical}
.select{appearance:none;padding-right:40px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236E778F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
}
.form__actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-top:8px}
.form__note{font-size:13px;color:var(--text-muted);max-width:44ch}

/* Honeypot. Kept out of the layout and out of the tab order. */
.hp{position:absolute;left:-9999px;top:0;opacity:0;pointer-events:none}

/* ==========================================================================
   Confirmation
   ========================================================================== */
.done{display:grid;gap:20px;max-width:56ch;padding-block:var(--sec-y)}
.done__title{font-size:44px;line-height:1.08;letter-spacing:-.026em;margin:0}
.done__back{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;
  font-family:var(--font-mono);font-size:14px;color:var(--text-brand);
  transition:color var(--dur-fast) var(--ease-out);
}
.done__back:hover{color:var(--text-link-hover)}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* 960 to 1199: the container takes the gutter, method cards go to 2 columns. */
@media (max-width:1199px){
  .method__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero__title{font-size:56px}
  .week__in{gap:48px}
}

/* Below 960: hero stacks with the image under the copy, stat band to 2
   columns, Your week stacks, admission steps stack. */
@media (max-width:959px){
  :root{--sec-y:88px}
  .hero__in{grid-template-columns:minmax(0,1fr);gap:40px}
  .hero__figure{height:320px}
  .hero__title{font-size:48px;max-width:18ch}
  .band__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
  .week__in{grid-template-columns:minmax(0,1fr);gap:40px}
  .adm__steps{grid-template-columns:minmax(0,1fr);gap:20px}
  .h-sec,.page__title,.done__title{font-size:38px}
}

/* Below 640: everything one column, header nav collapses to a menu button
   plus the primary CTA, section padding drops to 72px. */
@media (max-width:639px){
  :root{--sec-y:72px;--band-y:44px}

  .hdr__toggle{display:inline-flex}
  .hdr__in{gap:12px}
  .hdr__nav{
    position:absolute;left:0;right:0;top:100%;
    display:none;
    flex-direction:column;align-items:stretch;gap:0;
    padding:8px var(--gutter-page) 16px;
    background:var(--surface-glass);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid var(--border-subtle);
  }
  .hdr__nav[data-open]{display:flex}
  .hdr__link{display:flex;align-items:center;min-height:44px;font-size:16px}
  .hdr__nav .btn{display:none}
  .hdr__side{display:flex}
  /* The header CTA is a touch target down here, so it grows past the 36px
     the desktop header uses. */
  .hdr__side .btn--sm{height:44px}

  .method__grid{grid-template-columns:minmax(0,1fr)}
  .report__stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  .card--p32{padding:24px}
  .card--p28{padding:24px}

  .hero__title{font-size:40px;max-width:none}
  .hero__body{font-size:17px}
  .hero__actions .btn{flex:1 1 auto;min-width:180px}
  .h-sec,.page__title,.done__title{font-size:32px}
  .stat__value{font-size:32px}

  .foot{padding:44px var(--gutter-page) 56px;gap:20px}
  .adm__actions .btn{flex:1 1 auto}
}

/* Below 480 the wordmark, the CTA and the menu button will not fit on one
   line without either shrinking the tap targets or truncating the CTA label.
   Neither is acceptable, so the header wraps: wordmark on the first row, the
   CTA and the menu button on the second with the CTA taking the free space. */
@media (max-width:479px){
  .hdr__in{flex-wrap:wrap;gap:4px 12px;padding-bottom:12px}
  .hdr__side{order:1;width:100%;gap:10px}
  .hdr__side .btn--sm{flex:1 1 auto}
  .hdr__nav{top:auto}
}

@media (max-width:399px){
  .report__stats{grid-template-columns:minmax(0,1fr)}
  .hero__title{font-size:34px}
}