/*
  Trinity Innovation Group — Base styles
  Modern reset + typography + layout primitives (.container, .section,
  .eyebrow, .section-title, .btn family) consumed by every later task.

  Font strategy: the real families (Anuphan / IBM Plex Sans Thai) are
  named first in the stacks below so Task 2 only has to add the
  font-face rules below — no selector here needs to change. Until
  then, browsers fall through to the system-ui stack.
*/

/* ---------------------------------------------------------------------
   0. Self-hosted fonts (Task 2)
   Anuphan (headings, --font-head) + IBM Plex Sans Thai (body,
   --font-body), Thai + Latin subsets, downloaded from Google Fonts
   (fonts.gstatic.com) into assets/fonts/ — no runtime dependency on
   Google's CDN. The swap display value avoids invisible text while
   the files load.

   Anuphan is shipped by Google as a variable font: the thai/latin
   subset files are byte-identical across weights 300–700, so each
   subset needs only one file with a font-weight RANGE (300 700) —
   the browser interpolates the exact weight requested by CSS.
   IBM Plex Sans Thai is static, so each weight is its own file.
--------------------------------------------------------------------- */
@font-face{
  font-family:"Anuphan";
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url("../fonts/Anuphan-300-700-thai.woff2") format("woff2");
  unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC;
}
@font-face{
  font-family:"Anuphan";
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url("../fonts/Anuphan-300-700-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"IBM Plex Sans Thai";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("../fonts/IBMPlexSansThai-400-thai.woff2") format("woff2");
  unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC;
}
@font-face{
  font-family:"IBM Plex Sans Thai";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("../fonts/IBMPlexSansThai-400-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"IBM Plex Sans Thai";
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("../fonts/IBMPlexSansThai-500-thai.woff2") format("woff2");
  unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC;
}
@font-face{
  font-family:"IBM Plex Sans Thai";
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("../fonts/IBMPlexSansThai-500-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"IBM Plex Sans Thai";
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("../fonts/IBMPlexSansThai-600-thai.woff2") format("woff2");
  unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC;
}
@font-face{
  font-family:"IBM Plex Sans Thai";
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("../fonts/IBMPlexSansThai-600-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --font-head:"Anuphan", ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Noto Sans Thai", sans-serif;
  --font-body:"IBM Plex Sans Thai", "Noto Sans Thai", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme:light;
}

/* ---------------------------------------------------------------------
   1. Modern reset
--------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
*{margin:0;}

html{
  font-size:100%;
  height:100%;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:var(--header-h);
  /* Backstop against horizontal scroll from off-canvas decoration and
     slide-in reveals (data-reveal="left|right"). `clip` (not `hidden`)
     doesn't create a scroll container, so it never breaks position:sticky. */
  overflow-x:clip;
}

body{
  min-height:100vh;
  min-height:100dvh;
  overflow-x:clip;
  font-family:var(--font-body);
  font-size:var(--step-0);
  line-height:1.65;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

img,picture,svg,video{display:block;max-width:100%;height:auto;}
input,button,textarea,select{font:inherit;color:inherit;}
button{cursor:pointer;background:none;border:0;}
a{color:inherit;text-decoration-color:currentColor;text-underline-offset:.15em;}
a:hover{text-decoration-color:var(--gold-deep);}

/* Preserve native list styling for content lists (legal pages etc.);
   only lists explicitly marked as UI (nav/menus) opt out. */
ul[role="list"],ol[role="list"]{list-style:none;padding:0;}
table{border-collapse:collapse;}

::selection{background:var(--gold-bright);color:var(--night);}

/* ---------------------------------------------------------------------
   2. Typography
--------------------------------------------------------------------- */
.font-head,
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-head);
  font-weight:500;
  line-height:1.15;
  letter-spacing:-0.01em;
  text-wrap:balance;
}

h1{font-size:var(--step-4);}
h2{font-size:var(--step-3);}
h3{font-size:var(--step-2);}
h4{font-size:var(--step-1);}

small{font-size:.85em;}
strong,b{font-weight:600;}

/* ---------------------------------------------------------------------
   3. Layout primitives
--------------------------------------------------------------------- */
.container{
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.section{padding-block:clamp(3.5rem,8vw,7rem);}

.section--dark{
  background:var(--night);
  color:#EDECE8;
}

/* Eyebrow: uppercase label preceded by a short gradient rule.
   Text color is --ink-2 on light backgrounds because --gold-deep only
   reaches ~3.9:1 against #FFFFFF, failing the AA 4.5:1 requirement for
   this 13px label; --ink-2 clears AA on light sections. The gold stays
   on the decorative ::before rule on every background. On dark
   sections the text switches to --gold-bright, which clears >11:1
   against --night and is the intended look there. */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.65em;
  margin-block-end:.85em;
  font-family:var(--font-body);
  font-size:.8125rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-2);
}
.eyebrow::before{
  content:"";
  flex:none;
  width:28px;
  height:2px;
  border-radius:2px;
  background:var(--gold-grad);
}
.section--dark .eyebrow{color:var(--gold-bright);}

.section-title{
  font-family:var(--font-head);
  font-size:var(--step-3);
  font-weight:300;
  line-height:1.1;
  letter-spacing:-0.01em;
  text-wrap:balance;
}

/* ---------------------------------------------------------------------
   4. Buttons
--------------------------------------------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6em;
  padding:.85em 1.75em;
  border:1px solid transparent;
  border-radius:999px;
  font-family:var(--font-body);
  font-size:var(--step-0);
  font-weight:600;
  line-height:1;
  white-space:nowrap;
  text-decoration:none;
  cursor:pointer;
  transition:
    background-color .35s var(--ease-out),
    background-position .5s var(--ease-out),
    border-color .35s var(--ease-out),
    color .35s var(--ease-out),
    box-shadow .35s var(--ease-out),
    transform .35s var(--ease-out);
}
.btn:active{transform:translateY(1px);}

.btn--gold{
  background:var(--gold-grad);
  background-size:200% 100%;
  background-position:0% 0%;
  color:var(--night);
  box-shadow:var(--shadow-sm);
}
.btn--gold:hover{
  background-position:100% 0%;
  box-shadow:var(--shadow-lg);
  transform:translateY(-1px);
}

.btn--ghost{
  background:transparent;
  color:var(--ink);
  border-color:var(--line);
}
.btn--ghost:hover{
  border-color:var(--gold-deep);
  background:var(--paper-soft);
}
.section--dark .btn--ghost{
  color:#EDECE8;
  border-color:rgba(237,236,232,.35);
}
.section--dark .btn--ghost:hover{
  border-color:var(--gold-bright);
  background:rgba(255,255,255,.06);
}

/* ---------------------------------------------------------------------
   5. Accessibility helpers
--------------------------------------------------------------------- */
.visually-hidden{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.skip-link:focus{
  position:fixed;
  z-index:1000;
  top:1rem;left:1rem;
  width:auto;height:auto;
  margin:0;
  padding:.75em 1.25em;
  overflow:visible;
  clip:auto;
  white-space:normal;
  background:var(--night);
  color:var(--paper);
  border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
}

:focus{outline:none;}
:focus-visible{
  outline:2px solid var(--gold-deep);
  outline-offset:3px;
  border-radius:4px;
}

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