/* ============================================================
   asiainternships.com — shared foundation
   One office, one letterhead. This file owns the tokens, the
   chrome (nav + footer), buttons, forms, and shared primitives.
   Pages add their own <style> for page-specific layout ONLY.
   Blog posts link this file too (post-template.html), so a change
   here reaches every surface without a reskin.
   ============================================================ */

/* ---------- 1. Tokens ----------
   Six named colors. Two typefaces. 4/8 spacing. Three elevations.
   Three durations, ease-out only. */
:root{
  --paper:#ffffff;   /* sheet */
  --tint:#eef1f6;    /* panels, bands, table stripes */
  --ink:#0f1b2d;     /* navy — text, rules, the mark */
  --quiet:#5a6573;   /* secondary text */
  --seal:#0f1b2d;    /* same navy; the red chop is gone */
  --line:rgba(15,27,45,.16);

  --serif:'Spectral', Georgia, 'Times New Roman', serif;
  --sans:'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  --nums:tabular-nums;

  --lift-1:0 1px 2px rgba(15,27,45,.07);
  --lift-2:0 6px 18px -8px rgba(15,27,45,.20);
  --lift-3:0 20px 50px -20px rgba(15,27,45,.35);

  --fast:120ms;
  --med:200ms;
  --slow:280ms;
  --out:cubic-bezier(.2,.7,.3,1);

  --radius:2px;      /* printed matter, not pill UI */
  --wrap:1120px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h, 82px) + 12px)}
html,body{
  background:var(--paper);color:var(--ink);
  font-family:var(--serif);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
::selection{background:var(--tint);color:var(--ink)}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--seal);outline-offset:2px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px}
@media (max-width:640px){.wrap{padding:0 20px}}

/* ---------- 2. Shared primitives ---------- */

/* Letterspaced caps label — the letterhead voice for kickers and labels. */
.tag{
  font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--quiet);
}
.tag--seal{color:var(--seal)}

/* Ledger rules. .rule is a hairline; .rule-double is the signature
   thick-then-thin divider that opens a section. */
.rule{border:0;border-top:1px solid var(--line)}
.rule-double{
  border:0;border-top:2px solid var(--ink);
  position:relative;
}
.rule-double::after{
  content:'';position:absolute;left:0;right:0;top:3px;
  border-top:1px solid var(--ink);
}

/* City line — the office's signature. */
.cityline{
  font-family:var(--sans);font-size:12px;font-weight:500;
  letter-spacing:.08em;color:var(--quiet);
}
.cityline .zh{font-family:var(--serif);letter-spacing:0;opacity:.75;margin-left:2px}
.cityline .sep{margin:0 8px;opacity:.5}
/* Phones: the four cities stay on one line. With the native scripts the
   line is ~450px wide, wider than any phone, so they drop below 560px. */
@media (max-width:560px){
  .cityline{font-size:11px;letter-spacing:.05em;white-space:nowrap}
  .cityline .zh{display:none}
  .cityline .sep{margin:0 6px}
}

/* Prose measure for long-form copy. */
.prose{max-width:66ch}
.prose p{margin-bottom:1.1em;text-wrap:pretty;color:var(--ink)}
.prose p:last-child{margin-bottom:0}

/* Headline defaults. Pages size their own h1/h2 but inherit the voice. */
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.12;letter-spacing:-.015em;text-wrap:balance}

/* ---------- 3. Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:.02em;
  padding:12px 20px;border-radius:var(--radius);border:1px solid var(--ink);
  cursor:pointer;text-decoration:none;
  transition:background var(--med) var(--out),color var(--med) var(--out),
             transform var(--fast) var(--out),box-shadow var(--med) var(--out);
}
.btn .arrow{transition:transform var(--med) var(--out)}
.btn:hover .arrow{transform:translateX(3px)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--ink);color:var(--paper)}
.btn-primary:hover{background:#0a1422;box-shadow:var(--lift-2)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--tint)}
.btn[disabled]{opacity:.55;cursor:default;pointer-events:none}

/* Text links inside copy. */
.link{color:var(--seal);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.link:hover{color:var(--ink)}

/* ---------- 4. Masthead / nav ----------
   Navy bar, cream type — same field as the mark, so the lockup sits flush. */
.nav{
  position:sticky;top:0;z-index:80;background:var(--ink);color:var(--paper);
  border-bottom:2px solid var(--paper);
}
.nav::after{
  content:'';display:block;border-top:1px solid var(--paper);
  margin-top:2px;
}
.nav :focus-visible{outline-color:var(--paper)}
.nav-inner{
  max-width:var(--wrap);margin:0 auto;padding:14px 32px;
  display:flex;align-items:center;gap:24px;
}
@media (max-width:640px){.nav-inner{padding:12px 20px}}
.brand{display:flex;align-items:center;text-decoration:none;line-height:0;margin-right:auto}
.brand-logo{display:block;height:52px;width:auto;max-width:none}
@media (max-width:640px){.brand-logo{height:44px}}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-link,.nav-dd-toggle{
  font-family:var(--sans);font-size:13.5px;font-weight:500;color:var(--paper);
  text-decoration:none;padding:8px 10px;background:none;border:0;cursor:pointer;
  border-radius:var(--radius);
  transition:background var(--fast) var(--out);
}
.nav-link:hover,.nav-dd-toggle:hover{background:rgba(255,255,255,.08)}
.nav-link[aria-current="page"],.nav-dd-item[aria-current="page"]{
  color:var(--paper);font-weight:600;
}
.nav-dd{position:relative}
.nav-dd-caret{font-size:9px;margin-left:5px;opacity:.6;display:inline-block;transition:transform var(--med) var(--out)}
.nav-dd.open .nav-dd-caret{transform:rotate(180deg)}
.nav-dd-menu{
  position:absolute;top:calc(100% + 10px);left:0;min-width:230px;
  background:var(--ink);border:1px solid var(--paper);border-radius:var(--radius);
  box-shadow:var(--lift-2);padding:6px;
  opacity:0;transform:translateY(-4px);pointer-events:none;
  transition:opacity var(--med) var(--out),transform var(--med) var(--out);
}
.nav-dd.open .nav-dd-menu{opacity:1;transform:none;pointer-events:auto}
.nav-dd-item{
  display:block;font-family:var(--sans);font-size:13.5px;font-weight:500;
  color:var(--paper);text-decoration:none;padding:9px 12px;border-radius:var(--radius);
  transition:background var(--fast) var(--out);
}
.nav-dd-item:hover{background:rgba(255,255,255,.08)}
.nav-dd-item--all{border-top:1px solid rgba(255,255,255,.2);margin-top:6px;padding-top:11px;color:rgba(255,255,255,.7)}
.nav-cta{margin-left:8px}
/* Invert the primary button on the navy bar: cream fill, navy type. */
.nav .btn-primary{
  background:var(--paper);color:var(--ink);border-color:var(--paper);
}
.nav .btn-primary:hover{background:transparent;color:var(--paper);box-shadow:none}

/* Burger + mobile sheet */
.nav-burger{
  display:none;place-items:center;width:40px;height:40px;
  background:none;border:1px solid var(--paper);border-radius:var(--radius);cursor:pointer;
}
.nav-burger span,.nav-burger span::before,.nav-burger span::after{
  content:'';display:block;width:16px;height:2px;background:var(--paper);position:relative;
}
.nav-burger span::before{position:absolute;top:-5px}
.nav-burger span::after{position:absolute;top:5px}
.nav-scrim{
  position:fixed;inset:0;z-index:70;background:rgba(15,27,45,.45);
  opacity:0;pointer-events:none;transition:opacity var(--slow) var(--out);
}
body.menu-open .nav-scrim{opacity:1;pointer-events:auto}
.nav-mobile{
  position:fixed;top:0;right:0;bottom:0;z-index:75;width:min(86vw,340px);
  display:flex;flex-direction:column;gap:2px;
  padding:84px 22px 32px;overflow-y:auto;
  background:var(--ink);border-left:2px solid var(--paper);
  box-shadow:var(--lift-3);
  transform:translateX(100%);transition:transform var(--slow) var(--out);
}
body.menu-open .nav-mobile{transform:translateX(0)}
.nav-mobile>a{
  font-family:var(--sans);font-size:15px;font-weight:500;color:var(--paper);
  text-decoration:none;padding:12px 8px;border-bottom:1px solid rgba(255,255,255,.15);
}
.nav-mobile .nav-m-label{
  font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(255,255,255,.55);padding:18px 8px 4px;
}
.nav-mobile a.nav-m-sub{font-size:14px;color:rgba(255,255,255,.7);padding-left:20px}
/* .nav-mobile>a outranks .btn-primary, so restate the inverted button's
   navy type here — without it the CTA is cream-on-cream. */
.nav-mobile a.nav-m-cta{
  margin-top:20px;justify-content:center;border-bottom:0;
  background:var(--paper);color:var(--ink);border-color:var(--paper);
}
@media (max-width:940px){
  .nav-links,.nav-cta{display:none}
  .nav-burger{display:grid}
}
@media (min-width:941px){.nav-scrim,.nav-mobile{display:none}}

/* ---------- 5. Footer — the signature block ---------- */
.foot{
  margin-top:96px;border-top:2px solid var(--paper);position:relative;
  padding:6px 0 56px;background:var(--ink);color:var(--paper);
}
.foot::before{
  content:'';display:block;border-top:1px solid var(--paper);margin-bottom:36px;
}
.foot :focus-visible{outline-color:var(--paper)}
.foot-inner{
  display:flex;justify-content:space-between;align-items:center;
  gap:32px;flex-wrap:wrap;
}
.foot-id{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.foot-brand{display:flex;align-items:center;text-decoration:none;line-height:0;flex:0 0 auto}
.foot-logo{display:block;height:48px;width:auto;max-width:none}
.foot .cityline{margin-top:0;color:rgba(255,255,255,.72)}
.foot-links{
  display:flex;flex-wrap:wrap;gap:4px 18px;align-items:center;
  font-family:var(--sans);font-size:13px;
}
.foot-links a{color:rgba(255,255,255,.72);text-decoration:none}
.foot-links a:hover{color:var(--paper);text-decoration:underline;text-underline-offset:3px}
.foot-mail{color:var(--paper) !important}
.foot-copy{
  background:none;border:0;color:rgba(255,255,255,.72);font:inherit;cursor:pointer;
  padding:2px 6px;border-radius:var(--radius);font-size:13px;line-height:1;
  vertical-align:middle;position:relative;
}
.foot-copy:hover{color:var(--paper);background:rgba(255,255,255,.08)}
.foot-copy.copied::after,
.copy-mail.copied::after{
  content:"Copied";position:absolute;left:50%;top:-24px;transform:translateX(-50%);
  font-family:var(--sans);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--paper);background:var(--ink);padding:3px 7px;border-radius:var(--radius);
  white-space:nowrap;pointer-events:none;
}
.foot-copy.copied::after{color:var(--ink);background:var(--paper)}
.foot-legal{
  font-family:var(--sans);font-size:11.5px;color:rgba(255,255,255,.55);
  margin-top:28px;
}

/* ---------- 6. Enquire form ----------
   The lead path. States: idle → sending → sent / error / slow.
   Markup contract: <form class="enquire-form" data-source="..."> inside an
   .enquire shell, with input[name=_honey] and sibling .ef-done / .ef-error /
   .ef-slow blocks. Every other named control is posted as-is (the placement
   request sends field/city/duration/email; the host form sends company/
   city/host/email; the match brief adds start + brief_url).
   Wired by /assets/enquire.js. */
.enquire{
  border:1px solid var(--ink);border-radius:var(--radius);background:var(--tint);
  box-shadow:var(--lift-1);
}
.enquire-head{
  padding:20px 28px 16px;border-bottom:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;
}
.enquire-head h3{font-size:22px;font-weight:600}
.enquire-body{padding:24px 28px 28px}
.enquire-form{display:grid;grid-template-columns:repeat(4,1fr) auto;gap:16px;align-items:end}
.ef-field{display:flex;flex-direction:column;gap:6px}
.ef-field label{
  font-family:var(--sans);font-size:10.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--quiet);
}
.ef-field select,.ef-field input{
  font-family:var(--sans);font-size:14px;color:var(--ink);
  background:var(--paper);border:1px solid var(--ink);border-radius:var(--radius);
  padding:11px 12px;width:100%;appearance:none;
  transition:border-color var(--fast) var(--out),box-shadow var(--fast) var(--out);
}
.ef-field select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%230f1b2d' stroke-width='1.5'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:30px;
}
.ef-field input::placeholder{color:var(--quiet)}
.ef-field select:focus,.ef-field input:focus{outline:none;border-color:var(--seal);box-shadow:0 0 0 1px var(--seal)}
.ef-honey{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ef-note{
  margin-top:14px;font-family:var(--sans);font-size:12px;color:var(--quiet);
}
.ef-note a{color:var(--quiet)}
.ef-note a:hover{color:var(--ink)}
.copy-mail{
  background:none;border:0;padding:0;margin:0;font:inherit;cursor:pointer;
  color:var(--quiet);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;position:relative;
}
.copy-mail:hover{color:var(--ink)}
.copy-mail:focus-visible{outline:2px solid var(--seal);outline-offset:2px;border-radius:2px}

/* form states */
.ef-done,.ef-error,.ef-slow{display:none;padding:4px 0 0}
.ef-done p,.ef-error p,.ef-slow p{font-size:15px}
.ef-error p,.ef-slow p{color:var(--ink)}
.ef-error .tag,.ef-slow .tag{color:var(--seal)}
.enquire[data-state="sent"] .enquire-form,
.enquire[data-state="sent"] .ef-note{display:none}
.enquire[data-state="sent"] .ef-done{display:block}
.enquire[data-state="error"] .ef-error{display:block}
.enquire[data-state="slow"] .ef-slow{display:block}
@media (max-width:940px){.enquire-form{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.enquire-form{grid-template-columns:1fr}}

/* ---------- 8. Intake ----------
   The three-answer start: field / city / length / season → /match.html.
   A plain GET form, no email. On /match.html the same block carries
   data-live and re-drafts the brief in place instead of navigating.
   Reuses .ef-field for the controls so the two forms read as one hand. */
.intake{
  border:1px solid var(--ink);border-radius:var(--radius);background:var(--tint);
  box-shadow:var(--lift-1);
}
.intake-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;
  padding:12px 18px;border-bottom:1px solid var(--line);
}
.intake-head .tag{color:var(--ink)}
.intake-note{font-family:var(--sans);font-size:12px;color:var(--quiet)}
.intake-body{padding:16px 18px 18px}
.intake-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.intake-foot{margin-top:14px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.intake-hint{font-family:var(--sans);font-size:12.5px;color:var(--quiet);max-width:52ch}
.intake[data-live] .intake-foot{display:none}
@media (max-width:760px){.intake-grid{grid-template-columns:1fr 1fr}}
@media (max-width:400px){.intake-grid{grid-template-columns:1fr}}

/* ---------- 7. Motion discipline ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
  }
}

.fees td, .fees th, table.fees, .spec dd, .price, .num{font-variant-numeric:tabular-nums;}