/* =========================================================
   GO PREMIUM · EXCLUSIVE — Top tier luxury landing
   Palette & type strictly from Brand Book Part III
   ========================================================= */

:root{
  /* — Exclusive palette (Brand Book 17.3) — */
  --navy:#0B1D3A;            /* Exclusive Navy — main bg */
  --navy-deep:#06122A;       /* deeper layer */
  --navy-abyss:#040D20;      /* darkest */
  --navy-soft:#11294B;       /* raised surfaces */
  --navy-line:#1C3559;       /* hairlines on navy */

  --gold:#CAA14E;            /* Metallic Gold (foil) — primary metal */
  --gold-light:#EAD09A;
  --gold-bright:#F4E2B0;
  --gold-deep:#9A7634;
  --gold-shadow:#6E5326;

  --silver:#C2CAD6;          /* Silver (foil) — secondary metal */
  --silver-light:#E4E8EF;
  --silver-deep:#8C97A8;

  --ivory:#F4F1EA;           /* warm light surface (rhythm) */
  --ivory-deep:#E9E3D6;
  --ivory-card:#FBFAF6;
  --ink:#16203A;             /* text on light */
  --ink-soft:#4A5066;

  /* metallic gold "foil" gradient — jewelry, not flat yellow */
  --foil-gold:linear-gradient(110deg,#8A6A2E 0%,#CAA14E 22%,#F4E2B0 42%,#CAA14E 60%,#9A7634 78%,#EAD09A 100%);
  --foil-silver:linear-gradient(110deg,#7E8A9C 0%,#C2CAD6 26%,#F2F5FA 46%,#C2CAD6 64%,#8C97A8 82%,#E4E8EF 100%);

  --metal:var(--gold);       /* swappable accent metal (tweak) */
  --metal-foil:var(--foil-gold);
  --metal-light:var(--gold-light);
  --metal-deep:var(--gold-deep);

  /* type */
  --f-display:'Anuphan',sans-serif;
  --f-body:'IBM Plex Sans Thai',sans-serif;
  --f-tier:'Sora',sans-serif;
  --f-serif:'Cormorant Garamond',serif;   /* editorial flair */

  /* rhythm */
  --gutter:clamp(22px,5.5vw,96px);
  --section:clamp(96px,13vw,200px);
  --maxw:1320px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --reveal-y:46px;       /* tweakable motion distance */
  --reveal-dur:1.15s;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--f-body);
  background:var(--navy);
  color:var(--silver-light);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  letter-spacing:.005em;
}
body[data-density="airy"]{ --section:clamp(120px,16vw,260px); }
body[data-density="compact"]{ --section:clamp(72px,10vw,140px); }

img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* film grain + vignette overlay */
.grain{
  position:fixed;inset:0;pointer-events:none;z-index:90;opacity:.5;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}
body[data-grain="off"] .grain{display:none}

/* ===== shared layout ===== */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
section{position:relative}
.section-pad{padding-block:var(--section)}

/* ===== metallic type ===== */
.foil{
  background:var(--metal-foil);
  background-size:280% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:foilSweep 7s linear infinite;
}
.foil-silver{
  background:var(--foil-silver);background-size:280% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  animation:foilSweep 9s linear infinite;
}
@keyframes foilSweep{0%{background-position:0% 50%}100%{background-position:280% 50%}}
body[data-motion="calm"] .foil,body[data-motion="calm"] .foil-silver{animation:none;background-position:30% 50%}

/* tier descriptor — Sora tracked uppercase (Brand Book 17.2) */
.tier{
  font-family:var(--f-tier);font-weight:600;text-transform:uppercase;
  letter-spacing:.34em;
}
.eyebrow{
  font-family:var(--f-tier);font-weight:600;text-transform:uppercase;
  letter-spacing:.32em;font-size:clamp(10px,1vw,12.5px);
  color:var(--metal);display:inline-flex;align-items:center;gap:.85em;
}
.eyebrow::before,.eyebrow.flanked::after{
  content:"";width:34px;height:1px;background:linear-gradient(90deg,transparent,var(--metal));
}
.eyebrow.flanked::after{background:linear-gradient(90deg,var(--metal),transparent)}

h1,h2,h3{font-family:var(--f-display);font-weight:600;line-height:1.08;letter-spacing:-.01em;color:#fff;text-wrap:balance}
.display{font-size:clamp(40px,7vw,98px);font-weight:600;line-height:1.02}
.h2{font-size:clamp(30px,4.6vw,62px)}
.h3{font-size:clamp(21px,2vw,30px);font-weight:600}
.lead{font-size:clamp(16px,1.35vw,20px);color:var(--silver);line-height:1.75;text-wrap:pretty;font-weight:300}
.serif-num{font-family:var(--f-serif);font-weight:500;font-variant-numeric:lining-nums}

.hr-metal{height:1px;border:0;background:linear-gradient(90deg,transparent,var(--metal),transparent);opacity:.55}

/* ===== buttons ===== */
.btn{
  --pad:1.05em 2.2em;
  display:inline-flex;align-items:center;gap:.7em;justify-content:center;
  font-family:var(--f-tier);font-weight:600;font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  padding:var(--pad);border-radius:2px;cursor:pointer;border:1px solid transparent;
  position:relative;overflow:hidden;transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out),color .4s,border-color .4s;
  will-change:transform;white-space:nowrap;
}
.btn .ic{width:16px;height:16px;flex:none;transition:transform .5s var(--ease-out)}
.btn-gold{
  color:var(--navy-deep);
  background:var(--metal-foil);background-size:200% 100%;background-position:0% 50%;
  box-shadow:0 10px 34px -12px rgba(202,161,78,.55),inset 0 1px 0 rgba(255,255,255,.45);
}
.btn-gold:hover{background-position:100% 50%;box-shadow:0 18px 50px -14px rgba(202,161,78,.7),inset 0 1px 0 rgba(255,255,255,.55)}
.btn-gold:hover .ic{transform:translateX(4px)}
.btn-ghost{
  color:var(--silver-light);border-color:var(--silver-deep);background:rgba(194,202,214,.02);
  backdrop-filter:blur(4px);
}
.btn-ghost:hover{border-color:var(--metal);color:#fff}
.btn-ghost::after{content:"";position:absolute;inset:0;background:var(--metal);opacity:0;transition:opacity .5s;z-index:-1}
.btn:active{transform:scale(.97)}

/* link with metal underline */
.tlink{
  font-family:var(--f-tier);font-weight:600;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--metal);display:inline-flex;align-items:center;gap:.6em;position:relative;padding-bottom:3px;
}
.tlink::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--metal);transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease-out)}
.tlink:hover::after{transform:scaleX(1)}
.tlink .ic{width:15px;height:15px;transition:transform .5s var(--ease-out)}
.tlink:hover .ic{transform:translateX(4px)}

/* ===== decorative ===== */
.dotgrid{
  position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(var(--navy-line) 1px,transparent 1px);
  background-size:30px 30px;opacity:.4;mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000,transparent);
}
.gold-arc{position:absolute;pointer-events:none;opacity:.5}
.glow{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;opacity:.5}

/* ===== reveal animation ===== */
.rv{opacity:0;transform:translateY(var(--reveal-y));transition:opacity var(--reveal-dur) var(--ease-out),transform var(--reveal-dur) var(--ease-out)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.09s}.rv-d2{transition-delay:.18s}.rv-d3{transition-delay:.27s}
.rv-d4{transition-delay:.36s}.rv-d5{transition-delay:.45s}.rv-d6{transition-delay:.54s}
.clip{overflow:hidden;display:block}
.clip .cinner{display:block;transform:translateY(108%);transition:transform 1.25s var(--ease-out)}
.clip.in .cinner{transform:none}
body[data-motion="calm"] .rv{transition-duration:.6s;transform:translateY(16px)}
body[data-motion="calm"] .clip .cinner{transition-duration:.6s}
@media (prefers-reduced-motion:reduce){
  .rv,.clip .cinner{transition:none!important;opacity:1!important;transform:none!important}
  .foil,.foil-silver{animation:none}
}

/* image slots — framed luxury (placeholder until real photos dropped in) */
image-slot{background:linear-gradient(135deg,var(--navy-soft),var(--navy-deep));display:grid;place-items:center;text-align:center;padding:24px;color:var(--silver-deep);font-family:var(--f-tier);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;line-height:1.7}
image-slot::before{content:attr(placeholder)}
image-slot img{width:100%;height:100%;object-fit:cover}
image-slot:has(img)::before{content:none}
.frame{position:relative;padding:10px;background:linear-gradient(135deg,rgba(202,161,78,.0),rgba(202,161,78,.0))}
.frame::before{content:"";position:absolute;inset:0;border:1px solid var(--metal);opacity:.5;pointer-events:none}
.frame::after{content:"";position:absolute;inset:6px;border:1px solid var(--metal);opacity:.22;pointer-events:none}