/* =====================================================================
   แฟ้มสะสมงาน วPA · ครูลภัสร์ลดา พรมสอน
   Theme: "แฟ้มสีพาสเทล" (pastel folder tabs on cream paper)
   Fonts: Mitr (display), Sarabun (body), Fredoka (latin accents)
   No JS except the theme switcher. Menus/accordions use <details>, gallery uses scroll-snap.
   ===================================================================== */

:root{
  --paper:#FFF8EE;
  --paper-2:#FFF1E2;
  --card:#FFFFFF;
  --white:#FFFFFF;
  --ink:#2A2F4A;
  --ink-2:#4B5273;
  --muted:#7C829E;
  --line:#EAD9C6;
  --dot:rgba(42,47,74,.07);
  --header-bg:rgba(255,248,238,.86);

  --coral:#FF7B6B;   --coral-soft:#FFE1DC;   --coral-deep:#E45F50;
  --butter:#FFD565;  --butter-soft:#FFF3C7;  --butter-deep:#F2B92B;
  --mint:#5FD3B0;    --mint-soft:#D9F6EC;    --mint-deep:#2EB995;
  --sky:#6DBBFF;     --sky-soft:#DDEEFF;     --sky-deep:#2E9BEA;
  --lilac:#B69CFF;   --lilac-soft:#EAE2FF;   --lilac-deep:#8E6BF0;
  --rose:#FF9BC3;    --rose-soft:#FFE3EF;    --rose-deep:#F26FA6;
  --tangerine:#FFA15C; --tangerine-soft:#FFE6D0; --tangerine-deep:#F1832F;

  /* accent text on its own -soft background */
  --mint-ink:#1E8C6E;
  --sky-ink:#1C74BF;
  /* light wash behind dark ink text (hero highlight, butter button, active nav) */
  --highlight:var(--butter);

  --footer-bg:#2A2F4A;
  --footer-fg:#E9E6F5;
  --footer-fg-2:#C9C6DB;
  --footer-muted:#8F8CA6;

  --r-sm:12px; --r:20px; --r-lg:28px;
  --shadow:0 10px 30px -12px rgba(42,47,74,.18);
  --shadow-lg:0 24px 50px -20px rgba(42,47,74,.28);
  --font-display:"Mitr","Sarabun",sans-serif;
  --font-body:"Sarabun","Mitr",sans-serif;
  --font-latin:"Fredoka","Mitr",sans-serif;
  --wrap:1120px;
}

/* ---------- themes (token overrides only) ---------- */
html[data-theme="slate"]{
  --paper:#F7F5F0; --paper-2:#F0EDE6; --card:#FFFFFF; --white:#FFFFFF;
  --ink:#1F2A37; --ink-2:#3D4A5C; --muted:#6B7686; --line:#DDD8CF;
  --dot:rgba(31,42,55,.07); --header-bg:rgba(247,245,240,.86);

  --coral:#B5533C;   --coral-soft:#EBD8D0;   --coral-deep:#984632;
  --butter:#C8912A;  --butter-soft:#EFE3CC;  --butter-deep:#946B1F;
  --mint:#2A7F7A;    --mint-soft:#D2E0DB;    --mint-deep:#226864;
  --sky:#1E3A5F;     --sky-soft:#D0D3D6;     --sky-deep:#1E3A5F;
  --lilac:#5C5F8A;   --lilac-soft:#DBDADE;   --lilac-deep:#4A4D73;
  --rose:#A3586B;    --rose-soft:#E8D9D8;    --rose-deep:#8C4C5C;
  --tangerine:#B8712D; --tangerine-soft:#ECDDCD; --tangerine-deep:#A66628;

  --mint-ink:#226864; --sky-ink:#1E3A5F;
  --highlight:#EFD9A6;

  --footer-bg:#1E3A5F; --footer-fg:#E6ECF4; --footer-fg-2:#C2CEDE; --footer-muted:#8FA0B5;
}

html[data-theme="forest"]{
  --paper:#FAF7F0; --paper-2:#F3EEE2; --card:#FFFFFF; --white:#FFFFFF;
  --ink:#23301F; --ink-2:#3E4C38; --muted:#6F7A68; --line:#E0D9C8;
  --dot:rgba(35,48,31,.07); --header-bg:rgba(250,247,240,.86);

  --coral:#C96F3E;   --coral-soft:#F1DFD0;   --coral-deep:#AD5F35;
  --butter:#D9B45A;  --butter-soft:#F4EBD5;  --butter-deep:#877038;
  --mint:#6E8F4E;    --mint-soft:#E1E4D3;    --mint-deep:#5F7B43;
  --sky:#2F5D3A;     --sky-soft:#D5DBCF;     --sky-deep:#2F5D3A;
  --lilac:#6B4F6B;   --lilac-soft:#E0D9D8;   --lilac-deep:#6B4F6B;
  --rose:#A54A5E;    --rose-soft:#EBD8D6;    --rose-deep:#984456;
  --tangerine:#B6552F; --tangerine-soft:#EEDACD; --tangerine-deep:#994727;

  --mint-ink:#516A3A; --sky-ink:#2F5D3A;
  --highlight:#F0DFAF;

  --footer-bg:#233F2B; --footer-fg:#E8F0E6; --footer-fg-2:#C4D2C0; --footer-muted:#93A48E;
}

html[data-theme="ink-blue"]{
  --paper:#F8F9FB; --paper-2:#EEF1F6; --card:#FFFFFF; --white:#FFFFFF;
  --ink:#141B2D; --ink-2:#334159; --muted:#6B7588; --line:#D9DEE8;
  --dot:rgba(20,27,45,.07); --header-bg:rgba(248,249,251,.86);

  --coral:#22315E;   --coral-soft:#D1D5DF;   --coral-deep:#16224A;
  --butter:#D9A93A;  --butter-soft:#F2EBD8;  --butter-deep:#8F7026;
  --mint:#3B6FD1;    --mint-soft:#D6E0F3;    --mint-deep:#335FB4;
  --sky:#5B8DEF;     --sky-soft:#DCE6F9;     --sky-deep:#4971BF;
  --lilac:#22315E;   --lilac-soft:#D1D5DF;   --lilac-deep:#16224A;
  --rose:#4E6A9A;    --rose-soft:#D9DFEA;    --rose-deep:#465F8B;
  --tangerine:#C6952B; --tangerine-soft:#EFE7D6; --tangerine-deep:#936E20;

  --mint-ink:#335FB4; --sky-ink:#4063A7;
  --highlight:#EFD489;

  --footer-bg:#141B2D; --footer-fg:#E8ECF4; --footer-fg-2:#C4CBDA; --footer-muted:#8C96AB;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:1.0625rem;
  line-height:1.7;
  color:var(--ink);
  background:
    radial-gradient(circle at 1px 1px, var(--dot) 1.2px, transparent 0) 0 0/22px 22px,
    var(--paper);
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:500;line-height:1.25;margin:0;letter-spacing:-.01em}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
summary{list-style:none;cursor:pointer}
summary::-webkit-details-marker{display:none}
.wrap{width:min(var(--wrap),100% - 2.5rem);margin-inline:auto}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--white);padding:.5rem 1rem;border-radius:0 0 var(--r-sm) 0;z-index:100}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--sky);outline-offset:3px;border-radius:6px}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:var(--header-bg);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:2px dashed var(--line);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:74px}
.brand{display:flex;align-items:center;gap:.7rem}
.brand-badge{
  flex:none;width:44px;height:44px;border-radius:15px;
  background:var(--coral);color:var(--white);
  font:700 1.05rem/1 var(--font-latin);letter-spacing:.02em;
  display:grid;place-items:center;
  transform:rotate(-7deg);
  box-shadow:0 6px 0 -2px var(--coral-deep), var(--shadow);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.brand:hover .brand-badge{transform:rotate(4deg) scale(1.06)}
.brand-text{display:flex;flex-direction:column;line-height:1.2}
.brand-text strong{font-family:var(--font-display);font-weight:500;font-size:1.05rem}
.brand-text small{color:var(--muted);font-size:.78rem;white-space:nowrap}

.nav-desktop ul{display:flex;gap:.15rem;align-items:center;flex-wrap:nowrap}
.nav-desktop a{white-space:nowrap;
  display:inline-flex;align-items:center;gap:.3rem;
  padding:.5rem .8rem;border-radius:999px;
  font-family:var(--font-display);font-size:.95rem;font-weight:400;
  color:var(--ink-2);transition:background .2s,color .2s;
}
.nav-desktop a:hover{background:var(--butter-soft);color:var(--ink)}
.nav-desktop a.active{background:var(--highlight);color:var(--ink)}
.has-sub{position:relative}
.has-sub .sub{
  position:absolute;top:calc(100% + 8px);left:0;min-width:320px;
  background:var(--card);border-radius:var(--r);padding:.5rem;
  box-shadow:var(--shadow-lg);border:2px solid var(--line);
  display:flex;flex-direction:column;align-items:stretch;gap:2px;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .2s,transform .2s,visibility .2s;
}
.has-sub .sub::before{content:"";position:absolute;inset:-12px 0 auto;height:12px}
.has-sub:hover .sub,.has-sub:focus-within .sub{opacity:1;visibility:visible;transform:none}
.has-sub .sub a{display:flex;border-radius:var(--r-sm);width:100%;font-size:.9rem;padding:.55rem .75rem}
.dot{width:10px;height:10px;border-radius:50%;flex:none;margin-right:.35rem}
.dot-sky{background:var(--sky)}.dot-mint{background:var(--mint)}.dot-lilac{background:var(--lilac)}

.nav-mobile{display:none;position:relative}
.nav-mobile summary{padding:.4rem;border-radius:var(--r-sm);color:var(--ink)}
.nav-mobile[open] summary{background:var(--highlight)}
.nav-mobile > ul{
  position:absolute;right:0;top:calc(100% + 10px);width:min(320px,calc(100vw - 2.5rem));
  background:var(--card);border:2px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-lg);padding:.6rem;
  transform-origin:top right;
  animation:pop 180ms ease-out;
  transition:opacity 180ms ease-out,translate 180ms ease-out,scale 180ms ease-out;
}
/* exit mirrors entry: content stays rendered 180ms while the menu fades back to the trigger */
.nav-mobile:not([open]) > ul{opacity:0;translate:0 -6px;scale:.96}
.nav-mobile::details-content{transition:content-visibility 180ms allow-discrete}
.nav-mobile a{display:block;padding:.6rem .85rem;border-radius:var(--r-sm);font-family:var(--font-display)}
.nav-mobile a:hover,.nav-mobile a.active{background:var(--butter-soft)}
.nav-mobile ul ul{margin:.1rem 0 .3rem .9rem;border-left:3px solid var(--sky-soft)}
.nav-mobile ul ul a{font-size:.9rem;padding:.4rem .75rem;color:var(--ink-2)}

@media (max-width:960px){
  .nav-desktop{display:none}
  .nav-mobile{display:block}
}
@media (max-width:480px){
  .brand-text small{display:none}
}

/* ---------- shared bits ---------- */
.section{padding:4.5rem 0}
.section-tight{padding:3rem 0}
.section-head{max-width:640px;margin:0 auto 2.5rem;text-align:center}
.section-head h2{font-size:clamp(1.7rem,3.2vw,2.3rem);display:inline-block;position:relative}
.section-head h2::after{
  content:"";display:block;height:10px;margin:.2rem auto 0;width:64%;
  background:var(--highlight);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='10' viewBox='0 0 80 10'%3E%3Cpath d='M1 6c8-6 12 6 20 0s12 6 20 0 12 6 20 0 12 6 18 0' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x center/80px 10px;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='10' viewBox='0 0 80 10'%3E%3Cpath d='M1 6c8-6 12 6 20 0s12 6 20 0 12 6 20 0 12 6 18 0' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x center/80px 10px;
}
.section-head p{color:var(--ink-2);margin-top:.75rem}
.kicker{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.3rem .85rem;border-radius:999px;
  background:var(--card);border:2px solid var(--line);
  font-family:var(--font-display);font-size:.82rem;color:var(--ink-2);
}
.kicker::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--coral)}
.kicker.k-mint::before{background:var(--mint)}
.kicker.k-sky::before{background:var(--sky)}
.kicker.k-lilac::before{background:var(--lilac)}
.kicker.k-butter::before{background:var(--butter)}

.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.8rem 1.4rem;border-radius:999px;
  font-family:var(--font-display);font-size:1rem;
  border:2px solid var(--ink);background:var(--card);color:var(--ink);
  box-shadow:0 4px 0 0 var(--ink);
  transition:transform .15s,box-shadow .15s;
}
.btn:hover{transform:translate(-1px,-2px);box-shadow:0 6px 0 0 var(--ink)}
.btn:active{transform:translate(1px,2px);box-shadow:0 2px 0 0 var(--ink)}
.btn-primary{background:var(--coral);color:var(--white)}
.btn-butter{background:var(--highlight)}
.btn svg{width:18px;height:18px}

.chip{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.35rem .8rem .35rem .6rem;border-radius:999px;
  background:var(--card);border:2px solid var(--line);
  font-size:.86rem;font-weight:500;color:var(--ink-2);
  transition:border-color .2s,transform .2s;
}
.chip:hover{border-color:var(--sky);transform:translateY(-2px)}
.chip svg{width:16px;height:16px;color:var(--coral)}

/* ---------- home hero ---------- */
.hero{position:relative;overflow:hidden;padding:4rem 0 4.5rem;isolation:isolate}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:3rem;align-items:center}
.hero-copy > *{animation:rise .7s both cubic-bezier(.2,.8,.2,1)}
.hero-copy > :nth-child(2){animation-delay:.08s}
.hero-copy > :nth-child(3){animation-delay:.16s}
.hero-copy > :nth-child(4){animation-delay:.24s}
.hero-copy > :nth-child(5){animation-delay:.32s}
.hero h1{
  font-size:clamp(2.2rem,5.2vw,3.7rem);font-weight:600;margin:1rem 0 .6rem;
}
.hero h1 .hl{
  position:relative;display:inline-block;white-space:nowrap;
}
.hero h1 .hl::before{
  content:"";position:absolute;inset:auto -.15em .08em;height:.42em;
  background:var(--highlight);border-radius:6px;z-index:-1;
  transform:rotate(-1.2deg);
}
.hero .lead{font-size:1.15rem;color:var(--ink-2);max-width:32rem}
.hero .lead b{font-family:var(--font-latin);color:var(--coral);font-weight:600}
.hero-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem}
.hero-meta{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;margin-top:1.8rem;color:var(--muted);font-size:.92rem}
.hero-meta span{display:inline-flex;align-items:center;gap:.4rem}
.hero-meta svg{width:16px;height:16px;color:var(--mint)}

/* sticker board */
.board{position:relative;aspect-ratio:1/1;max-width:440px;margin-inline:auto;width:100%}
.avatar{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:56%;aspect-ratio:1;border-radius:50%;
  background:linear-gradient(145deg,var(--card),var(--paper-2));
  border:6px solid var(--card);box-shadow:var(--shadow-lg);
  display:grid;place-items:center;text-align:center;overflow:hidden;
  animation:rise .8s .2s both cubic-bezier(.2,.8,.2,1);
}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar .ph{font-family:var(--font-display);color:var(--muted);font-size:.9rem;line-height:1.3}
.avatar .ph b{display:block;font:600 2.6rem/1 var(--font-latin);color:var(--coral);margin-bottom:.3rem}
.sticker{
  position:absolute;
  background:var(--card);border-radius:18px;padding:.7rem .95rem;
  box-shadow:var(--shadow-lg);border:2px solid var(--line);
  display:flex;align-items:center;gap:.7rem;
  animation:rise .8s both cubic-bezier(.2,.8,.2,1);
}
.sticker b{
  font:600 1.6rem/1 var(--font-latin);
  width:48px;height:48px;border-radius:14px;display:grid;place-items:center;flex:none;color:var(--ink);
}
.sticker span{font-family:var(--font-display);font-size:.85rem;line-height:1.25;color:var(--ink-2)}
.sticker span small{display:block;color:var(--muted);font-size:.75rem}
.s1{left:-2%;top:8%;transform:rotate(-6deg);animation-delay:.35s}
.s2{right:-3%;top:22%;transform:rotate(5deg);animation-delay:.45s}
.s3{left:4%;bottom:12%;transform:rotate(4deg);animation-delay:.55s}
.s4{right:0;bottom:4%;transform:rotate(-4deg);animation-delay:.65s}
.s1 b{background:var(--sky-soft)}.s2 b{background:var(--mint-soft)}.s3 b{background:var(--lilac-soft)}.s4 b{background:var(--coral-soft)}
.sticker:hover{animation:none;transform:rotate(0) scale(1.05);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}

/* floating shapes */
.blob{position:absolute;z-index:-1;pointer-events:none;animation:float 9s ease-in-out infinite}
.blob-1{width:260px;height:260px;border-radius:50%;background:var(--butter-soft);left:-90px;top:-60px}
.blob-2{width:180px;height:180px;border-radius:38% 62% 55% 45%/48% 40% 60% 52%;background:var(--mint-soft);right:-40px;top:-30px;animation-delay:-3s}
.blob-3{width:140px;height:140px;border-radius:50%;background:var(--sky-soft);right:18%;bottom:-50px;animation-delay:-6s}
.blob-star{color:var(--coral);width:34px;height:34px;left:56%;top:12%;animation:spin 14s linear infinite}
.blob-star-2{color:var(--butter);width:22px;height:22px;left:44%;bottom:14%;animation:spin 18s linear infinite reverse}

@media (max-width:860px){
  .hero{padding:2.5rem 0 3.5rem}
  .hero-grid{grid-template-columns:1fr;gap:2.5rem}
  .board{max-width:360px}
}

/* ---------- folder tiles ---------- */
.tiles{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.tile{
  --c:var(--coral);--c-soft:var(--coral-soft);
  position:relative;display:flex;flex-direction:column;gap:.5rem;
  background:var(--card);border-radius:var(--r);padding:1.6rem 1.4rem 1.3rem;
  margin-top:14px;
  border:2px solid var(--line);box-shadow:var(--shadow);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s,border-color .3s;
}
.tile::before{ /* folder tab */
  content:"";position:absolute;left:18px;top:-14px;width:76px;height:26px;
  background:var(--c);border-radius:10px 10px 0 0;
  clip-path:polygon(0 100%,8% 0,92% 0,100% 100%);
}
.tile:hover{transform:translateY(-6px) rotate(-.6deg);box-shadow:var(--shadow-lg);border-color:var(--c)}
.tile-icon{
  width:54px;height:54px;border-radius:16px;background:var(--c-soft);color:var(--c);
  display:grid;place-items:center;margin-bottom:.3rem;
}
.tile-icon svg{width:28px;height:28px}
.tile h3{font-size:1.28rem}
.tile p{color:var(--ink-2);font-size:.93rem;line-height:1.55}
.tile-no{position:absolute;right:1.1rem;top:.9rem;font:600 1rem var(--font-latin);color:var(--c);opacity:.8}
.tile-go{
  margin-top:auto;padding-top:.6rem;display:inline-flex;align-items:center;gap:.35rem;
  font-family:var(--font-display);font-size:.9rem;color:var(--c);
}
.tile-go svg{width:16px;height:16px;transition:transform .25s}
.tile:hover .tile-go svg{transform:translateX(4px)}

.t-coral{--c:var(--coral);--c-soft:var(--coral-soft)}
.t-butter{--c:var(--butter-deep);--c-soft:var(--butter-soft)}
.t-mint{--c:var(--mint-deep);--c-soft:var(--mint-soft)}
.t-sky{--c:var(--sky-deep);--c-soft:var(--sky-soft)}
.t-lilac{--c:var(--lilac-deep);--c-soft:var(--lilac-soft)}
.t-rose{--c:var(--rose-deep);--c-soft:var(--rose-soft)}
.t-tangerine{--c:var(--tangerine-deep);--c-soft:var(--tangerine-soft)}

/* ---------- what is PA ---------- */
.pa-panel{
  background:var(--card);border:2px solid var(--line);border-radius:var(--r-lg);
  padding:2.5rem;box-shadow:var(--shadow);
  display:grid;grid-template-columns:1.1fr 1fr;gap:2.5rem;align-items:center;
}
.pa-panel h2{font-size:1.9rem}
.pa-panel .pa-lead{color:var(--ink-2);margin:.8rem 0 1.2rem}
.pa-facts{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.fact{border-radius:var(--r-sm);padding:.9rem 1rem;background:var(--paper)}
.fact b{display:block;font:600 1.5rem/1.1 var(--font-latin);color:var(--ink)}
.fact span{font-size:.85rem;color:var(--ink-2)}
.steps{display:flex;flex-direction:column;gap:.9rem;counter-reset:s}
.step{
  display:grid;grid-template-columns:52px 1fr;gap:1rem;align-items:start;
  padding:1rem 1.1rem;border-radius:var(--r);background:var(--paper);
  position:relative;
}
.step::before{
  counter-increment:s;content:counter(s);
  width:52px;height:52px;border-radius:16px;display:grid;place-items:center;
  font:700 1.4rem var(--font-latin);color:var(--white);background:var(--coral);
  transform:rotate(-5deg);
}
.step:nth-child(2)::before{background:var(--mint-deep)}
.step:nth-child(3)::before{background:var(--sky-deep)}
.step h4{font-size:1.1rem}
.step p{font-size:.9rem;color:var(--ink-2);line-height:1.55}
@media (max-width:860px){.pa-panel{grid-template-columns:1fr;padding:1.8rem}}

/* ---------- resources + gallery ---------- */
.band{background:var(--paper-2);border-block:2px dashed var(--line)}
.two-col{display:grid;grid-template-columns:.9fr 1.1fr;gap:3rem}
.two-col > *{min-width:0}
.two-col h2{font-size:1.6rem;margin-bottom:1.2rem;display:flex;align-items:center;gap:.6rem}
.two-col h2 i{width:12px;height:12px;border-radius:50%;background:var(--coral);display:inline-block}
.res{display:flex;flex-direction:column;gap:.8rem}
.res a{
  display:flex;align-items:center;gap:1rem;padding:.9rem 1.1rem;
  background:var(--card);border:2px solid var(--line);border-radius:var(--r);
  transition:transform .2s,border-color .2s;
}
.res a:hover{transform:translateX(6px);border-color:var(--sky)}
.res-ico{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;flex:none;color:var(--white)}
.res-ico.fb{background:#1877F2}
.res-ico.web{background:var(--mint-deep)}
.res-ico.yt{background:#FF4F4F}
.res-ico svg{width:22px;height:22px}
.res strong{font-family:var(--font-display);font-weight:500;display:block;line-height:1.3}
.res small{color:var(--muted);font-size:.85rem}

.gallery{
  overflow:hidden;padding:.3rem 0 1.2rem;
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.gallery-track{display:flex;gap:1rem;width:max-content;animation:marquee 36s linear infinite}
.gallery:hover .gallery-track{animation-play-state:paused}
/* track holds the 3 cards twice; shifting by half the track (plus half a gap) loops seamlessly */
@keyframes marquee{to{translate:calc(-50% - .5rem) 0}}
.shot{
  width:min(78vw,380px);
  background:var(--card);border:2px solid var(--line);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--shadow);
}
.shot-img{
  aspect-ratio:4/3;display:grid;place-items:center;
  color:var(--ink-2);font-family:var(--font-display);font-size:.9rem;
  background:linear-gradient(135deg,var(--sky-soft),var(--mint-soft));
}
.shot:nth-child(3n+2) .shot-img{background:linear-gradient(135deg,var(--rose-soft),var(--butter-soft))}
.shot:nth-child(3n) .shot-img{background:linear-gradient(135deg,var(--lilac-soft),var(--sky-soft))}
.shot-img img{width:100%;height:100%;object-fit:cover}
.shot figcaption{padding:.8rem 1rem 1rem}
.shot figcaption strong{font-family:var(--font-display);font-weight:500;display:block}
.shot figcaption small{color:var(--muted)}
.gallery-hint{font-size:.82rem;color:var(--muted);display:flex;align-items:center;gap:.4rem}
@media (max-width:860px){.two-col{grid-template-columns:1fr;gap:2.5rem}}

/* ---------- e-service ---------- */
.services{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1.2rem;max-width:800px;margin-inline:auto}
.service{text-align:center;display:flex;flex-direction:column;align-items:center;gap:.6rem}
.service b{
  width:88px;height:88px;border-radius:50%;display:grid;place-items:center;
  font:600 .8rem var(--font-latin);color:var(--white);letter-spacing:.03em;
  box-shadow:var(--shadow);border:5px solid var(--card);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.service:hover b{transform:scale(1.1) rotate(-6deg)}
.service span{font-size:.85rem;color:var(--ink-2);line-height:1.4}
.svc-1{background:var(--lilac)}.svc-2{background:var(--sky-deep)}.svc-3{background:var(--coral)}.svc-4{background:var(--mint-deep)}

/* ---------- footer ---------- */
.site-footer{margin-top:3rem;background:var(--footer-bg);color:var(--footer-fg);padding:3.5rem 0 1.5rem;position:relative}
.site-footer::before{
  content:"";position:absolute;left:0;right:0;top:-18px;height:20px;
  background:var(--footer-bg);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='20' viewBox='0 0 60 20'%3E%3Cpath d='M0 20V10C15 10 15 0 30 0s15 10 30 10v10z' fill='%23000'/%3E%3C/svg%3E") repeat-x bottom/60px 20px;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='20' viewBox='0 0 60 20'%3E%3Cpath d='M0 20V10C15 10 15 0 30 0s15 10 30 10v10z' fill='%23000'/%3E%3C/svg%3E") repeat-x bottom/60px 20px;
}
.footer-inner{display:grid;grid-template-columns:1.4fr 1fr auto;gap:2.5rem;align-items:start}
.footer-brand{display:flex;gap:1rem;align-items:flex-start}
.footer-brand strong{font-family:var(--font-display);font-weight:500;font-size:1.1rem;display:block;margin-bottom:.4rem;color:var(--white)}
.footer-brand p{font-size:.92rem;color:var(--footer-fg-2);line-height:1.65}
.footer-nav{display:grid;grid-template-columns:1fr 1fr;gap:.4rem 1.2rem}
.footer-nav a{font-size:.92rem;color:var(--footer-fg-2);padding:.15rem 0}
.footer-nav a:hover{color:var(--butter)}
.footer-social{display:flex;gap:.6rem}
.footer-social a{width:42px;height:42px;border-radius:14px;background:rgba(255,255,255,.08);display:grid;place-items:center;transition:background .2s,transform .2s}
.footer-social a:hover{background:var(--coral);transform:rotate(-6deg)}
.footer-copy{text-align:center;color:var(--footer-muted);font-size:.8rem;margin-top:2.5rem;padding:1.2rem 1.25rem 0;border-top:1px dashed rgba(255,255,255,.15)}
@media (max-width:860px){.footer-inner{grid-template-columns:1fr}}

/* ---------- sub pages ---------- */
.page-head{
  --c:var(--coral);--c-soft:var(--coral-soft);
  position:relative;overflow:hidden;padding:3.2rem 0 2.8rem;
  background:linear-gradient(180deg,var(--c-soft),transparent);
  border-bottom:2px dashed var(--line);
}
.page-head::after{
  content:"";position:absolute;right:-60px;top:-60px;width:260px;height:260px;border-radius:50%;
  background:var(--card);opacity:.55;pointer-events:none;
}
.crumbs{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center;font-size:.85rem;color:var(--muted);margin-bottom:1rem}
.crumbs a:hover{color:var(--ink)}
.crumbs svg{width:14px;height:14px}
.page-head h1{font-size:clamp(1.9rem,4vw,2.7rem);font-weight:600;max-width:820px}
.page-head .lead{color:var(--ink-2);max-width:640px;margin-top:.7rem;font-size:1.05rem}
.page-head .tab{
  display:inline-block;padding:.35rem 1rem;border-radius:12px 12px 0 0;
  background:var(--c);color:var(--white);font-family:var(--font-display);font-size:.85rem;
  margin-bottom:.9rem;transform:rotate(-2deg);transform-origin:bottom left;
}
.ph-coral{--c:var(--coral);--c-soft:var(--coral-soft)}
.ph-butter{--c:var(--butter-deep);--c-soft:var(--butter-soft)}
.ph-mint{--c:var(--mint-deep);--c-soft:var(--mint-soft)}
.ph-sky{--c:var(--sky-deep);--c-soft:var(--sky-soft)}
.ph-lilac{--c:var(--lilac-deep);--c-soft:var(--lilac-soft)}
.ph-rose{--c:var(--rose-deep);--c-soft:var(--rose-soft)}
.ph-tangerine{--c:var(--tangerine-deep);--c-soft:var(--tangerine-soft)}

.card{
  background:var(--card);border:2px solid var(--line);border-radius:var(--r-lg);
  padding:2rem;box-shadow:var(--shadow);
}
.card + .card{margin-top:1.5rem}
.card h2{font-size:1.45rem;margin-bottom:1rem;display:flex;align-items:center;gap:.6rem}
.card h2 i{width:12px;height:12px;border-radius:4px;background:var(--coral);display:inline-block;transform:rotate(12deg)}
.card h3{font-size:1.15rem;margin:1.4rem 0 .5rem}
.card .muted{color:var(--muted)}
.card p + p{margin-top:.6rem}
.card ol,.card ul.list{margin:.4rem 0 0 1.3rem;padding:0;list-style:revert;color:var(--ink-2)}
.card li{margin:.25rem 0}
@media (max-width:640px){.card{padding:1.4rem;border-radius:var(--r)}}

/* profile */
.profile-grid{display:grid;grid-template-columns:300px 1fr;gap:2rem;align-items:start}
.profile-photo{
  position:sticky;top:96px;
  background:var(--card);border:2px solid var(--line);border-radius:var(--r-lg);padding:1.4rem;
  box-shadow:var(--shadow);text-align:center;
}
.profile-photo .frame{
  aspect-ratio:3/4;border-radius:var(--r);overflow:hidden;
  background:linear-gradient(160deg,var(--butter-soft),var(--rose-soft));
  display:grid;place-items:center;color:var(--muted);font-family:var(--font-display);font-size:.9rem;
  border:5px solid var(--card);box-shadow:var(--shadow);transform:rotate(-1.5deg);
}
.profile-photo .frame img{width:100%;height:100%;object-fit:cover}
.profile-photo h2{font-size:1.3rem;margin-top:1.2rem}
.profile-photo p{color:var(--muted);font-size:.9rem}
.tags{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem;margin-top:.8rem}
.tag{padding:.2rem .7rem;border-radius:999px;font-size:.8rem;font-family:var(--font-display);background:var(--butter-soft);color:var(--ink-2)}
.tag.t2{background:var(--mint-soft)}.tag.t3{background:var(--sky-soft)}
.dl{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.dl > div{padding:.9rem 1rem;border-radius:var(--r-sm);background:var(--paper);border:1.5px solid var(--line)}
.dl dt{font-size:.78rem;color:var(--muted);font-family:var(--font-display);margin-bottom:.15rem}
.dl dd{margin:0;font-weight:500}
.dl .full{grid-column:1/-1}
@media (max-width:860px){.profile-grid{grid-template-columns:1fr}.profile-photo{position:static;max-width:340px;margin-inline:auto}}
@media (max-width:520px){.dl{grid-template-columns:1fr}}

/* agreement (form-like document) */
.doc{
  background:var(--card);border:2px solid var(--line);border-radius:var(--r-lg);
  padding:2.5rem;box-shadow:var(--shadow);position:relative;
  background-image:repeating-linear-gradient(transparent 0 35px,rgba(42,47,74,.05) 35px 36px);
}
.doc-head{text-align:center;border-bottom:2px dashed var(--line);padding-bottom:1.2rem;margin-bottom:1.6rem}
.doc-head h2{font-size:1.5rem}
.doc-head p{color:var(--ink-2);font-size:.95rem}
.doc-stamp{
  position:absolute;right:1.5rem;top:1.5rem;
  border:3px solid var(--coral);color:var(--coral);border-radius:10px;padding:.2rem .7rem;
  font:600 .8rem var(--font-latin);letter-spacing:.1em;transform:rotate(8deg);opacity:.8;
}
.field{display:grid;grid-template-columns:200px 1fr;gap:.4rem 1rem;align-items:baseline;padding:.55rem 0}
.field dt{font-family:var(--font-display);color:var(--ink-2);font-size:.95rem}
.field dd{margin:0;font-weight:500;border-bottom:2px dotted var(--line);padding-bottom:.2rem}
.doc h3{font-size:1.15rem;margin:1.6rem 0 .4rem;display:flex;align-items:center;gap:.5rem}
.doc h3::before{content:"";width:10px;height:22px;border-radius:4px;background:var(--butter)}
.doc ol{margin:.4rem 0 0 1.3rem;color:var(--ink-2)}
.doc .sign{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:2.2rem;text-align:center;font-size:.92rem;color:var(--ink-2)}
.doc .sign div{padding-top:2.6rem;border-top:2px dotted var(--line)}
@media (max-width:640px){.doc{padding:1.5rem}.field{grid-template-columns:1fr;gap:0}.doc .sign{grid-template-columns:1fr}}

/* challenge PDCA */
.pdca{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:1.2rem}
.pd{
  --c:var(--coral);
  background:var(--card);border:2px solid var(--line);border-radius:var(--r);padding:1.4rem 1.2rem;
  box-shadow:var(--shadow);position:relative;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),border-color .3s;
}
.pd:hover{transform:translateY(-5px);border-color:var(--c)}
.pd b{
  display:inline-grid;place-items:center;width:52px;height:52px;border-radius:16px;
  background:var(--c);color:var(--white);font:700 1.5rem var(--font-latin);transform:rotate(-5deg);margin-bottom:.8rem;
}
.pd h3{font-size:1.15rem}
.pd h3 small{display:block;font-size:.8rem;color:var(--muted);font-family:var(--font-latin);font-weight:500;letter-spacing:.06em}
.pd p{font-size:.9rem;color:var(--ink-2);line-height:1.55;margin-top:.5rem}
.pd-1{--c:var(--coral)}.pd-2{--c:var(--butter-deep)}.pd-3{--c:var(--mint-deep)}.pd-4{--c:var(--sky-deep)}
@media (max-width:960px){.pdca{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.pdca{grid-template-columns:1fr}}
.result-pair{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1rem}
.result{border-radius:var(--r);padding:1.3rem;border:2px solid var(--line);background:var(--paper)}
.result h3{margin:0 0 .4rem;font-size:1.05rem;display:flex;align-items:center;gap:.5rem}
.result h3 i{width:10px;height:10px;border-radius:50%;background:var(--mint);display:inline-block}
.result p{font-size:.93rem;color:var(--ink-2)}
@media (max-width:640px){.result-pair{grid-template-columns:1fr}}

/* performance overview */
.domains{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.domain{
  --c:var(--sky);--c-soft:var(--sky-soft);
  background:var(--card);border:2px solid var(--line);border-radius:var(--r-lg);padding:1.8rem;
  box-shadow:var(--shadow);display:flex;flex-direction:column;gap:.6rem;position:relative;overflow:hidden;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),border-color .3s;
}
.domain::after{content:"";position:absolute;right:-40px;bottom:-40px;width:150px;height:150px;border-radius:50%;background:var(--c-soft)}
.domain:hover{transform:translateY(-6px);border-color:var(--c)}
.domain .num{font:700 3rem/1 var(--font-latin);color:var(--c)}
.domain .num small{font-size:1rem;font-family:var(--font-display);color:var(--muted);font-weight:400;margin-left:.3rem}
.domain h3{font-size:1.25rem;position:relative}
.domain p{font-size:.92rem;color:var(--ink-2);position:relative}
.domain .btn{align-self:flex-start;margin-top:.6rem;position:relative}
.d-sky{--c:var(--sky-deep);--c-soft:var(--sky-soft)}
.d-mint{--c:var(--mint-deep);--c-soft:var(--mint-soft)}
.d-lilac{--c:var(--lilac-deep);--c-soft:var(--lilac-soft)}
@media (max-width:900px){.domains{grid-template-columns:1fr}}

/* indicators accordion */
.subnav{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.8rem}
.subnav a{padding:.45rem .95rem;border-radius:999px;background:var(--card);border:2px solid var(--line);font-family:var(--font-display);font-size:.9rem;color:var(--ink-2)}
.subnav a:hover{border-color:var(--ink)}
.subnav a.on{background:var(--ink);color:var(--white);border-color:var(--ink)}
.ind{
  --c:var(--sky);
  background:var(--card);border:2px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);overflow:hidden;
  interpolate-size:allow-keywords;
}
/* open/close height in browsers with ::details-content; others snap as before */
.ind::details-content{height:0;overflow:hidden;transition:height 250ms ease-out,content-visibility 250ms allow-discrete}
.ind[open]::details-content{height:auto}
.ind + .ind{margin-top:.9rem}
.ind[open]{border-color:var(--c)}
.ind summary{display:flex;align-items:center;gap:1rem;padding:1.1rem 1.3rem}
.ind summary:hover{background:var(--paper)}
.ind-no{
  flex:none;width:58px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:var(--c);color:var(--white);font:600 1.05rem var(--font-latin);transform:rotate(-3deg);
}
.ind-title{font-family:var(--font-display);font-size:1.1rem;flex:1}
.ind-chev{flex:none;width:32px;height:32px;border-radius:50%;background:var(--paper);display:grid;place-items:center;transition:transform .3s}
.ind-chev svg{width:16px;height:16px}
.ind[open] .ind-chev{transform:rotate(180deg);background:var(--highlight)}
.ind-body{padding:0 1.3rem 1.4rem;border-top:2px dashed var(--line);margin-top:0;animation:fade-up 200ms ease-out}
.ind-body > p{padding-top:1rem;color:var(--ink-2)}
.ev{margin-top:1.1rem;padding:1.1rem;border-radius:var(--r-sm);background:var(--paper)}
.ev h4{font-size:.95rem;display:flex;align-items:center;gap:.5rem;margin-bottom:.8rem}
.ev h4 svg{width:18px;height:18px;color:var(--coral)}
.ev-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.7rem}
.ev-grid figure{margin:0}
.ev-thumb{
  aspect-ratio:4/3;border-radius:var(--r-sm);overflow:hidden;border:3px solid var(--card);box-shadow:var(--shadow);
  background:linear-gradient(135deg,var(--sky-soft),var(--lilac-soft));
  display:grid;place-items:center;color:var(--muted);font-size:.8rem;font-family:var(--font-display);
  transition:transform .3s;
}
.ev-thumb:hover{transform:scale(1.04) rotate(-1deg)}
.ev-thumb img{width:100%;height:100%;object-fit:cover}
.ev-grid figcaption{font-size:.78rem;color:var(--muted);margin-top:.3rem;text-align:center}
.ev-files{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.9rem}
.i-sky{--c:var(--sky-deep)}.i-mint{--c:var(--mint-deep)}.i-lilac{--c:var(--lilac-deep)}
/* inline-dot and image-gradient helpers (were inline style= on the pages) */
.bg-sky{background:var(--sky)}.bg-mint{background:var(--mint)}.bg-coral{background:var(--coral)}
.grad-1{background:linear-gradient(135deg,var(--sky-soft),var(--mint-soft))}
.grad-2{background:linear-gradient(135deg,var(--lilac-soft),var(--rose-soft))}
.grad-3{background:linear-gradient(135deg,var(--butter-soft),var(--mint-soft))}

/* orders table */
.table-wrap{overflow-x:auto;background:var(--card);border:2px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow)}
table{width:100%;border-collapse:collapse;min-width:640px}
th,td{padding:1rem 1.2rem;text-align:left;vertical-align:top}
thead th{font-family:var(--font-display);font-weight:500;font-size:.9rem;color:var(--ink-2);background:var(--paper);border-bottom:2px solid var(--line)}
tbody tr + tr td{border-top:1.5px dashed var(--line)}
tbody tr:hover td{background:var(--butter-soft)}
td.date{white-space:nowrap;font-family:var(--font-display);color:var(--ink-2)}
.org{display:inline-block;padding:.15rem .6rem;border-radius:999px;font-size:.8rem;font-family:var(--font-display);background:var(--mint-soft);color:var(--mint-ink)}
.org.o2{background:var(--sky-soft);color:var(--sky-ink)}

/* awards */
.awards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1.4rem}
.award{
  background:var(--card);border:2px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),border-color .3s;
}
.award:hover{transform:translateY(-6px) rotate(-.5deg);border-color:var(--butter)}
.award-img{
  aspect-ratio:4/3;display:grid;place-items:center;color:var(--muted);font-family:var(--font-display);font-size:.85rem;
  background:linear-gradient(135deg,var(--butter-soft),var(--rose-soft));
}
.award-img img{width:100%;height:100%;object-fit:cover}
.award-body{padding:1rem 1.1rem 1.2rem}
.award-body .yr{font:600 .78rem var(--font-latin);color:var(--coral);letter-spacing:.06em}
.award-body h3{font-size:1.05rem;margin:.2rem 0 .3rem}
.award-body p{font-size:.88rem;color:var(--ink-2);line-height:1.5}

/* ---------- animations ---------- */
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.sticker{animation-name:rise-keep}
@keyframes rise-keep{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
.avatar{animation-name:rise-avatar}
@keyframes rise-avatar{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
@keyframes pop{from{opacity:0;translate:0 -6px;scale:.96}to{opacity:1;translate:0 0;scale:1}}
@keyframes fade-up{from{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  /* keep a gentle opacity-only bridge for state changes */
  .ind-body,.nav-mobile > ul{animation:fade 200ms ease-out!important}
  .nav-mobile:not([open]) > ul{translate:0 0;scale:1}
  .gallery{overflow-x:auto;mask-image:none}
}

/* ---------- theme switcher (preview tool) ---------- */
.theme-switch{
  position:fixed;right:1rem;bottom:1rem;z-index:60;
  display:flex;align-items:center;gap:.5rem;
  padding:.45rem .6rem .45rem .9rem;border-radius:999px;
  background:var(--card);border:2px solid var(--line);box-shadow:var(--shadow-lg);
  font-family:var(--font-display);font-size:.85rem;color:var(--ink-2);
}
.theme-switch select{
  font:inherit;color:var(--ink);background:var(--paper);border:1.5px solid var(--line);
  border-radius:999px;padding:.25rem .6rem;cursor:pointer;
}