/* NCCU EA webfonts.
   No original brand font files were supplied. Substitutions (flagged in readme.md):
   - Display / Latin lockup  -> Archivo Narrow Bold  (nearest match to the bold condensed
     grotesque in "NC|CU ENTREPRENEUR ASSOCIATION.")
   - Chinese + UI text       -> Noto Sans TC
   - Meta / tags             -> IBM Plex Mono
   Traditional-Chinese webfonts are served as hundreds of unicode-range subsets, so the
   Google Fonts stylesheet is imported rather than hand-written @font-face rules. */
@import url("https://fonts.googleapis.com/css2?family=Archivo+Narrow:wght@500;600;700&family=Noto+Sans+TC:wght@400;500;700;900&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

/* Latin display face, self-declared so the closure names the binaries explicitly. */
@font-face{font-family:"Archivo Narrow Fallback";font-style:normal;font-weight:700;font-display:swap;src:url("https://fonts.gstatic.com/s/archivonarrow/v30/tss5ApVBdCYD5Q7hcxTE1ArZ0Zz8oY2KRmwvKhhvLFGKpHOtFCQ76Q.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* ---- Base palette -------------------------------------------------------- */
:root{
  /* Brand yellow — the single saturated colour in the system. */
  --yellow-500:#FFCC00;   /* brand primary */
  --yellow-600:#E6B400;   /* hover / pressed */
  --yellow-700:#C79B00;   /* pressed on light, borders on yellow */
  --yellow-300:#FFE066;   /* highlight fill */
  --yellow-100:#FFF6CC;   /* tint surface */
  --yellow-050:#FFFBE8;   /* faintest wash */

  /* Ink — logo black and its steps. Neutrals are pure grey (no blue cast). */
  --ink-900:#0A0A0A;      /* logo black, body text */
  --ink-800:#1C1C1C;
  --ink-700:#3D3D3D;      /* secondary text */
  --ink-500:#707070;       /* muted text, icons */
  --ink-300:#B8B8B8;      /* disabled text */
  --ink-200:#D9D9D9;      /* hairlines */
  --ink-100:#EDEDED;      /* rails, track fills */
  --ink-050:#F6F6F6;      /* page tint */
  --white:#FFFFFF;

  /* Semantic hues — deliberately desaturated so yellow stays the loudest colour. */
  --green-600:#1E7A46;
  --green-100:#E3F2E9;
  --red-600:#C22B2B;
  --red-100:#FBE7E7;
  --blue-600:#1F5FA8;
  --blue-100:#E5EEF8;
}

/* ---- Semantic aliases ---------------------------------------------------- */
:root{
  /* Text */
  --text-strong:var(--ink-900);
  --text-body:var(--ink-800);
  --text-muted:var(--ink-500);
  --text-subtle:var(--ink-300);
  --text-on-yellow:var(--ink-900);
  --text-on-ink:var(--white);
  --text-link:var(--ink-900);
  --text-link-hover:var(--yellow-700);

  /* Surfaces */
  --surface-page:var(--white);
  --surface-tint:var(--ink-050);
  --surface-card:var(--white);
  --surface-inverse:var(--ink-900);
  --surface-brand:var(--yellow-500);
  --surface-brand-soft:var(--yellow-100);
  --surface-disabled:var(--ink-100);

  /* Lines */
  --border-hairline:var(--ink-200);
  --border-strong:var(--ink-900);
  --border-brand:var(--yellow-500);
  --border-focus:var(--ink-900);

  /* Semantic states */
  --state-success-fg:var(--green-600);
  --state-success-bg:var(--green-100);
  --state-danger-fg:var(--red-600);
  --state-danger-bg:var(--red-100);
  --state-info-fg:var(--blue-600);
  --state-info-bg:var(--blue-100);
  --state-warning-fg:var(--ink-900);
  --state-warning-bg:var(--yellow-100);
}
:root{
  /* Families */
  --font-display:"Archivo Narrow","Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
  --font-sans:"Noto Sans TC","PingFang TC","Microsoft JhengHei",-apple-system,sans-serif;
  --font-mono:"IBM Plex Mono","Noto Sans TC",ui-monospace,monospace;

  /* Weights */
  --weight-regular:400;
  --weight-medium:500;
  --weight-bold:700;
  --weight-black:900;

  /* Sizes — 1.25 ratio, floored at 13px for meta only. */
  --text-3xs:11px;
  --text-2xs:13px;
  --text-xs:14px;
  --text-sm:15px;
  --text-md:17px;
  --text-lg:20px;
  --text-xl:26px;
  --text-2xl:34px;
  --text-3xl:46px;
  --text-4xl:62px;
  --text-5xl:84px;
  --text-6xl:112px;

  /* Line heights */
  --leading-tight:0.94;
  --leading-snug:1.15;
  --leading-normal:1.5;
  --leading-loose:1.75;

  /* Tracking. Chinese text is never letterspaced negatively. */
  --tracking-display:-0.01em;
  --tracking-normal:0;
  --tracking-wide:0.06em;
  --tracking-caps:0.14em;   /* mono/Latin all-caps labels */

  /* Roles */
  --type-hero-family:var(--font-display);
  --type-hero-size:var(--text-5xl);
  --type-hero-weight:var(--weight-bold);
  --type-hero-leading:var(--leading-tight);

  --type-title-family:var(--font-display);
  --type-title-size:var(--text-2xl);
  --type-title-weight:var(--weight-bold);

  --type-body-family:var(--font-sans);
  --type-body-size:var(--text-md);
  --type-body-leading:var(--leading-loose);

  --type-label-family:var(--font-mono);
  --type-label-size:var(--text-2xs);
  --type-label-tracking:var(--tracking-caps);
}
:root{
  /* 4px base scale. */
  --space-0:0px;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-8:32px;
  --space-10:40px;
  --space-12:48px;
  --space-16:64px;
  --space-20:80px;
  --space-24:96px;
  --space-32:128px;

  /* Layout */
  --container-max:1200px;
  --container-narrow:720px;
  --gutter-mobile:20px;
  --gutter-desktop:40px;
  --section-y:96px;
  --section-y-tight:64px;
  --header-height:72px;

  /* Control sizing */
  --control-height-sm:32px;
  --control-height-md:44px;
  --control-height-lg:56px;
  --control-pad-x-sm:14px;
  --control-pad-x-md:22px;
  --control-pad-x-lg:28px;
  --tap-min:44px;
}
:root{
  /* Corners — near-square. The logo is built from hard 90°/45° edges, so the UI
     stays sharp: 2px is the default, pills are reserved for tags and avatars. */
  --radius-none:0px;
  --radius-sm:2px;
  --radius-md:4px;
  --radius-lg:8px;
  --radius-pill:999px;

  /* Borders — the system leans on 1px hairlines and 2px ink outlines, not shadow. */
  --border-width-hairline:1px;
  --border-width-strong:2px;
  --border-hair:1px solid var(--border-hairline);
  --border-ink:2px solid var(--ink-900);

  /* Shadows — flat by default. Offset ink shadow is the only decorative one and is
     used on hero cards and yellow callouts, never on form controls. */
  --shadow-none:none;
  --shadow-raise:0 1px 2px rgba(10,10,10,.06);
  --shadow-card:0 2px 10px rgba(10,10,10,.07);
  --shadow-pop:0 12px 32px rgba(10,10,10,.12);
  --shadow-offset-ink:6px 6px 0 var(--ink-900);
  --shadow-offset-yellow:6px 6px 0 var(--yellow-500);
  --focus-ring:0 0 0 3px var(--yellow-300),0 0 0 5px var(--ink-900);

  /* Overlays, blur */
  --overlay-scrim:rgba(10,10,10,.6);
  --overlay-frost:rgba(255,255,255,.78);
  --blur-frost:saturate(140%) blur(12px); /* @kind other */

  /* Protection gradient for text over photography (bottom-up). */
  --gradient-protect:linear-gradient(180deg,rgba(10,10,10,0) 0%,rgba(10,10,10,.72) 100%); /* @kind color */
  --gradient-yellow-wash:linear-gradient(180deg,var(--yellow-050) 0%,var(--white) 100%);
}
:root{
  --duration-instant:80ms; /* @kind other */
  --duration-fast:140ms; /* @kind other */
  --duration-base:220ms; /* @kind other */
  --duration-slow:420ms; /* @kind other */
  --ease-standard:cubic-bezier(.2,0,.2,1); /* @kind other */
  --ease-out:cubic-bezier(0,0,.2,1); /* @kind other */
  --ease-in:cubic-bezier(.4,0,1,1); /* @kind other */
  --transition-control:background-color var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard),transform var(--duration-fast) var(--ease-standard);
  --press-scale:0.98; /* @kind other */
  --lift-y:-2px;
}
@media (prefers-reduced-motion:reduce){:root{--duration-fast:0ms; /* @kind other */--duration-base:0ms; /* @kind other */--duration-slow:0ms; /* @kind other */--press-scale:1; /* @kind other */--lift-y:0px}}
/* Minimal global resets. Components carry their own styling inline via tokens. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-sans);font-size:var(--type-body-size);line-height:var(--leading-normal);font-weight:var(--weight-regular);-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--text-strong);font-weight:var(--weight-bold);line-height:var(--leading-snug);letter-spacing:var(--tracking-display);margin:0}
h1{font-size:var(--text-4xl);line-height:var(--leading-tight)}
h2{font-size:var(--text-2xl)}
h3{font-size:var(--text-xl)}
h4{font-size:var(--text-lg)}
p{margin:0}
a{color:var(--text-link);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;text-decoration-color:var(--yellow-500);transition:var(--transition-control)}
a:hover{color:var(--text-link-hover);text-decoration-color:var(--ink-900)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:none;box-shadow:var(--focus-ring)}
img{max-width:100%;display:block}
::selection{background:var(--yellow-300);color:var(--ink-900)}
.ea-mono-label{font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--text-muted)}