/* ============================================================
   arammughalyan.com
   Three acts: dark, paper, dark. Each band sets its own --fg /
   --accent tokens, so every component below is written once and
   works on either ground. See DESIGN.md before changing colours.
   ============================================================ */

:root{
  /* dark ground */
  --ink-bg:#121212;
  --ink-bg-sunk:#0B0B0B;
  --ink-fg:#FFFFFF;
  --ink-fg-2:#A1A1A1;
  --ink-fg-3:#818181;
  --ink-rule:rgba(255,255,255,.09);
  --ink-accent:#00A86B;
  --ink-accent-lift:#00C782;

  /* paper ground — warm sand, not cream and never white. Deep enough that the
     step down from #121212 does not glare, and it carries colour of its own. */
  --paper-bg:#E8DFCD;
  --paper-bg-sunk:#DED3BC;
  --paper-fg:#1C1B17;
  --paper-fg-2:#4A473E;
  --paper-fg-3:#625E52;
  --paper-rule:rgba(28,27,23,.16);
  --paper-accent:#A8421A;          /* terracotta. The light-ground accent. */
  --paper-accent-lift:#8A3714;     /* hover goes darker on a light ground */

  --nav-h:59px;

  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;

  --wrap:1180px;
  --measure:620px;
  --pad-x:clamp(20px,5vw,48px);
  --pad-y:clamp(72px,10vw,138px);
  --r:3px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  background:var(--ink-bg);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
summary::-webkit-details-marker{display:none}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad-x)}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink-accent);color:#04140D;padding:10px 16px;z-index:99}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ─────────────  BANDS  ───────────── */

.band{
  --fg:var(--ink-fg); --fg-2:var(--ink-fg-2); --fg-3:var(--ink-fg-3);
  --rule:var(--ink-rule); --accent:var(--ink-accent); --accent-lift:var(--ink-accent-lift);
  --accent-2:var(--ink-accent);
  --surface:#191919;
  background:var(--ink-bg);
  color:var(--fg-2);
}
.band--ink-sunk{background:var(--ink-bg-sunk)}

.band--paper{
  --fg:var(--paper-fg); --fg-2:var(--paper-fg-2); --fg-3:var(--paper-fg-3);
  --rule:var(--paper-rule); --accent:var(--paper-accent); --accent-lift:var(--paper-accent-lift);
  --accent-2:var(--paper-accent);
  --surface:#FFFFFF;
  background:var(--paper-bg);
  color:var(--fg-2);
}

/* Act seams. A hairline where two same-ground bands meet, nothing
   where the ground itself changes: the colour shift is the divider. */
.band--ink + .band--ink,
.band--ink-sunk + .band--ink,
.band--paper + .band--paper{border-top:1px solid var(--rule)}
.band--ink + .band--paper,
.band--paper + .band--ink{border-top:0}

/* ─────────────  TYPE  ───────────── */

h1,h2,h3{font-family:var(--serif);font-weight:400;color:var(--fg);letter-spacing:-.005em;text-wrap:balance}

h1{font-size:clamp(44px,8.2vw,104px);line-height:.99;letter-spacing:-.018em}
h2{font-size:clamp(32px,4.4vw,54px);line-height:1.08}
h3{font-family:var(--sans);font-size:17.5px;font-weight:500;line-height:1.35;letter-spacing:0}

.eyebrow{
  font-family:var(--mono);font-size:11.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
  margin-bottom:22px;
}
.eyebrow i{font-style:normal;color:var(--accent-2);opacity:.85;padding:0 3px}

.prose p{max-width:var(--measure);margin-bottom:20px;color:var(--fg-2)}
.prose p:last-child{margin-bottom:0}
.prose .accent{color:var(--fg)}
.prose .dim{color:var(--fg-3);font-size:15.5px}

.sec{padding-block:var(--pad-y)}
.sec__head{margin-bottom:clamp(40px,5.4vw,64px)}

/* Two-sentence heading: space between the sentences only. */
.h2--split span{display:block}
.h2--split span + span{margin-top:.3em}
.sec__sub{font-size:15.5px;color:var(--fg-3);margin-top:16px}

/* ─────────────  BUTTON  ───────────── */

.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 26px;
  background:var(--accent);color:var(--paper-bg);
  font-family:var(--mono);font-size:12.5px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;
  border-radius:var(--r);white-space:nowrap;
  transition:background .2s ease,transform .2s ease;
}
.band--ink .btn{color:#04140D}
.band--paper .btn:not(.btn--ghost){color:#FFFFFF}
.btn:hover{background:var(--accent-lift);transform:translateY(-1px)}
.btn span{transition:transform .2s ease}
.btn:hover span{transform:translateX(3px)}

.btn--ghost{background:transparent;color:var(--accent);box-shadow:inset 0 0 0 1px currentColor}
.btn--ghost:hover{background:transparent;color:var(--accent-lift)}

/* ─────────────  NAV  ─────────────
   Fixed over three acts, so it repaints itself for whichever ground is
   behind it. script.js sets .nav--paper; everything below reads --n-* . */

.nav{
  --n-fg:#FFFFFF; --n-fg-2:var(--ink-fg-2); --n-accent:var(--ink-accent);
  --n-veil:rgba(18,18,18,.88); --n-rule:var(--ink-rule); --n-panel:#151515;
  position:fixed;inset:0 0 auto 0;z-index:50;
  border-bottom:1px solid transparent;
  transition:background .3s ease,border-color .3s ease,color .3s ease;
}
.nav--paper{
  --n-fg:var(--paper-fg); --n-fg-2:var(--paper-fg-2); --n-accent:var(--paper-accent);
  --n-veil:rgba(232,223,205,.92); --n-rule:var(--paper-rule); --n-panel:var(--paper-bg);
}
.nav.is-stuck{background:var(--n-veil);backdrop-filter:blur(14px);border-bottom-color:var(--n-rule)}

.nav__in{
  max-width:var(--wrap);margin-inline:auto;padding:16px var(--pad-x);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.nav__brand{display:flex;align-items:center;gap:11px;font-size:14.5px;color:var(--n-fg);font-weight:500;transition:color .3s ease}
.nav__brand img{border-radius:2px}

.nav__menu{display:flex;align-items:center;gap:clamp(16px,2.4vw,32px)}
.nav__menu > a{
  font-size:14px;color:var(--n-fg-2);
  transition:color .2s ease;white-space:nowrap;
}
.nav__menu > a:hover,.nav__menu > a.is-here{color:var(--n-fg)}

.nav__cta{
  display:flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--n-fg-2);transition:color .2s ease;
}
.nav__cta:hover{color:var(--n-fg)}
.dot{width:6px;height:6px;border-radius:50%;background:var(--n-accent);flex:none;transition:background .3s ease}

/* burger, mobile only */
.nav__burger{
  display:none;width:34px;height:34px;padding:0;
  background:none;border:0;cursor:pointer;position:relative;
}
.nav__burger span{
  position:absolute;left:7px;right:7px;height:1.5px;background:var(--n-fg);
  transition:transform .3s cubic-bezier(.22,1,.36,1),opacity .2s ease,background .3s ease;
}
.nav__burger span:first-child{top:13px}
.nav__burger span:last-child{top:20px}
.nav__burger[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

/* anchors clear the fixed bar */
[id]{scroll-margin-top:calc(var(--nav-h) + 12px)}

/* ─────────────  HERO  ───────────── */

.hero{padding-top:clamp(128px,18vw,208px);padding-bottom:clamp(64px,8vw,104px)}
.hero h1{margin-bottom:clamp(40px,5vw,64px)}
.hero__foot{
  display:grid;grid-template-columns:1fr auto;gap:clamp(24px,4vw,56px);
  align-items:end;padding-top:clamp(28px,3.4vw,40px);border-top:1px solid var(--rule);
}
.lede{font-size:clamp(18px,1.75vw,23px);max-width:34em;color:var(--fg-2);line-height:1.5}
.lede b{font-weight:400;color:var(--fg)}

/* ─────────────  CREDIBILITY STRIP  ───────────── */

.strip__grid{display:grid;grid-template-columns:repeat(4,1fr)}
.strip__item{padding:clamp(30px,3.4vw,44px) clamp(18px,2.2vw,34px);border-left:1px solid var(--rule)}
.strip__item:first-child{border-left:0;padding-left:0}
.strip__k{font-family:var(--mono);font-size:14.5px;font-weight:500;color:var(--accent);margin-bottom:9px}
.strip__v{font-size:14.5px;line-height:1.5;color:var(--fg-3)}

/* ─────────────  SPLIT  ───────────── */

.split{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(32px,5.5vw,86px)}
.split__head h2{max-width:12em}
.split__body{padding-top:6px}

/* ─────────────  ACCORDION  ───────────── */

.acc{border-top:1px solid var(--rule)}
.acc__i{border-bottom:1px solid var(--rule)}

.acc__i summary{
  display:grid;grid-template-columns:78px 1fr 22px;align-items:center;
  gap:clamp(14px,2.4vw,40px);
  padding:clamp(22px,2.5vw,30px) 0;
  cursor:pointer;list-style:none;
  transition:opacity .2s ease;
}
.acc--plain .acc__i summary{grid-template-columns:1fr 22px}
.acc__i summary:hover{opacity:.66}

.acc__n{font-family:var(--mono);font-size:12.5px;font-weight:500;color:var(--accent-2);letter-spacing:.12em}
.acc__t{font-family:var(--sans);font-size:clamp(17px,1.6vw,19.5px);font-weight:500;color:var(--fg)}

.acc__x{position:relative;width:14px;height:14px;justify-self:end}
.acc__x::before,.acc__x::after{
  content:"";position:absolute;inset:50% 0 auto 0;height:1.5px;background:var(--accent);
  transform:translateY(-50%);transition:transform .28s cubic-bezier(.22,1,.36,1);
}
.acc__x::after{transform:translateY(-50%) rotate(90deg)}
.acc__i[open] .acc__x::after{transform:translateY(-50%) rotate(0deg)}

.acc__b{padding:0 0 clamp(24px,2.6vw,32px) 0;max-width:var(--measure)}
.acc--plain .acc__b{padding-right:34px}
.acc:not(.acc--plain) .acc__b{margin-left:calc(78px + clamp(14px,2.4vw,40px))}
.acc__b p{font-size:16px;color:var(--fg-2)}

.js-anim .acc__i[open] .acc__b{animation:accIn .34s cubic-bezier(.22,1,.36,1)}
@keyframes accIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.js-anim .acc__i[open] .acc__b{animation:none}}

.note{margin-top:38px;max-width:var(--measure);font-size:15.5px;color:var(--fg-3)}

/* ─────────────  RESULT  ───────────── */

.result{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(34px,6vw,90px);align-items:start}
.result__figure{border-left:2px solid var(--accent);padding-left:clamp(20px,2.4vw,34px)}
.result__n{font-family:var(--serif);font-size:clamp(50px,7vw,86px);line-height:.95;color:var(--fg);letter-spacing:-.02em}
.result__n span{color:var(--accent-2)}
.result__n--sm{font-size:clamp(30px,3.6vw,46px);margin-top:26px}
.result__cap{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3);margin-top:8px}
.result__copy .btn{margin-top:34px}

/* ─────────────  GATES  ───────────── */

.gates{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--rule)}
.gate{padding:clamp(28px,3vw,40px) clamp(20px,2.4vw,34px) clamp(28px,3vw,40px) 0;border-right:1px solid var(--rule)}
.gate:last-child{border-right:0}
.gate:not(:first-child){padding-left:clamp(20px,2.4vw,34px)}
.gate__t{color:var(--fg);margin-bottom:12px}
.gate__d{font-size:15.5px;color:var(--fg-2)}

.exclude{
  margin-top:clamp(34px,4vw,52px);padding-left:clamp(16px,2vw,26px);
  border-left:2px solid var(--accent-2);max-width:var(--measure);
  font-size:16px;color:var(--fg-3);
}

/* ─────────────  ABOUT  ───────────── */

.about__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(34px,6vw,84px);align-items:center}
.about__photo img{
  filter:grayscale(.16) contrast(1.05);
  -webkit-mask-image:linear-gradient(to bottom,#000 68%,transparent 99%);
          mask-image:linear-gradient(to bottom,#000 68%,transparent 99%);
}

/* ─────────────  SPONSORED  ───────────── */

.sponsor{padding-block:clamp(58px,7vw,96px)}
.sponsor h2{font-size:clamp(27px,3.3vw,41px)}
.sponsor .prose a{color:var(--accent);border-bottom:1px solid currentColor;transition:color .2s ease}
.sponsor .prose a:hover{color:var(--accent-lift)}

/* ─────────────  CONTACT  ───────────── */

.contact__in{max-width:840px}
.contact__lede{font-size:clamp(17px,1.5vw,20px);max-width:34em;margin-top:22px;color:var(--fg-2)}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,300px));gap:16px;margin-top:clamp(38px,4.4vw,56px)}
.tile{
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);
  padding:26px 26px 24px;
  transition:border-color .25s ease,background .25s ease,transform .25s ease;
}
.tile:hover{border-color:var(--accent);background:#1C1C1C;transform:translateY(-2px)}
.tile__i{width:22px;height:22px;fill:var(--accent);margin-bottom:20px}
.tile__l{display:block;color:var(--fg);font-size:16px;font-weight:500;margin-bottom:4px}
.tile__h{display:block;font-family:var(--mono);font-size:12.5px;color:var(--fg-3)}

/* ─────────────  FOOTER  ───────────── */

.foot{padding-block:26px}
.foot__in{
  display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);
}

/* ─────────────  REVEAL  ─────────────
   Opt-in only. Content is visible by default; the hidden state applies
   solely once script.js confirms it can animate. A script failure can
   never blank the page. */

.js-anim .reveal{
  opacity:0;transform:translateY(18px);
  transition:opacity .62s cubic-bezier(.22,1,.36,1),transform .62s cubic-bezier(.22,1,.36,1);
}
.js-anim .reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js-anim .reveal{opacity:1;transform:none;transition:none}}

/* ─────────────  RESPONSIVE  ───────────── */

/* Menu collapses to a panel. Kept as real links so they still work with
   JavaScript off: the panel is simply always open in that case. */
@media (max-width:900px){
  .nav__burger{display:block}
  .nav.is-stuck,.nav.is-open{background:var(--n-veil);backdrop-filter:blur(14px);border-bottom-color:var(--n-rule)}

  /* No-JS fallback: the panel never opens, so the links wrap instead of
     running off the side of the screen. */
  .nav__menu{flex-wrap:wrap;justify-content:flex-end;gap:8px 18px;max-width:62%}
  .nav__menu > a{font-size:13.5px}

  .js-anim .nav__menu{
    position:absolute;left:0;right:0;top:100%;
    display:grid;gap:0;max-width:none;
    background:var(--n-panel);
    border-bottom:1px solid var(--n-rule);
    padding:0 var(--pad-x);
    max-height:0;overflow:hidden;
    transition:max-height .34s cubic-bezier(.22,1,.36,1);
  }
  .js-anim .nav.is-open .nav__menu{max-height:60vh}
  .js-anim .nav__menu > a{
    padding:17px 0;font-size:16px;border-bottom:1px solid var(--n-rule);
  }
  .js-anim .nav__menu > a:last-child{border-bottom:0;padding-bottom:22px}
  .js-anim .nav__cta{font-size:12.5px}
}

@media (max-width:1000px){
  .strip__grid{grid-template-columns:repeat(2,1fr)}
  .strip__item{border-left:0;border-top:1px solid var(--rule);padding-inline:0 24px}
  .strip__item:nth-child(-n+2){border-top:0}
  .gates{grid-template-columns:1fr}
  .gate{border-right:0;border-bottom:1px solid var(--rule);padding-inline:0}
  .gate:last-child{border-bottom:0}
  .gate:not(:first-child){padding-left:0}
}

@media (max-width:860px){
  .hero__foot{grid-template-columns:1fr;gap:30px;align-items:start}
  .split,.result,.about__grid{grid-template-columns:1fr;gap:36px}
  .about__photo{max-width:340px;order:2}
  .result__figure{display:grid;grid-template-columns:repeat(3,1fr);gap:0 18px;align-items:end}
  .result__n--sm{margin-top:0}
}

@media (max-width:620px){
  body{font-size:16px}
  .acc__i summary{grid-template-columns:44px 1fr 18px;gap:12px}
  .acc:not(.acc--plain) .acc__b{margin-left:56px}
  .result__figure{grid-template-columns:1fr;gap:0}
  .result__n--sm{margin-top:24px}
  .tiles{grid-template-columns:1fr}
  .strip__grid{grid-template-columns:1fr}
  .strip__item:nth-child(2){border-top:1px solid var(--rule)}
  .foot__in{flex-direction:column;gap:8px}
}