/* ==========================================================================
   GLING MAGAZINE — The Shine of Our Culture
   Stylesheet · v1.0
   Palette: white / navy (#003049) / red (#C1121F) / wine (#780000)
            cream (#FDF0D5) / sky (#669BBC)
   ========================================================================== */

:root{
  --white:#FFFFFF;
  --cream:#FDF0D5;
  --navy:#003049;
  --navy-deep:#002234;
  --sky:#669BBC;
  --red:#C1121F;
  --wine:#780000;
  --ink:#11161B;

  --display:"Arial Black","Archivo Black","Arial Bold","Helvetica Neue",Helvetica,Arial,sans-serif;
  --body:"Helvetica Neue",Helvetica,Arial,"Segoe UI",Roboto,sans-serif;
  --mono:"Courier New",Courier,monospace;

  --maxw:1280px;
  --gutter:clamp(20px,5vw,64px);
  --nav-h:64px;
}

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

html{
  scroll-behavior:smooth;
  scroll-padding-top:var(--nav-h);
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(16px,1.05vw,18px);
  line-height:1.7;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block;}
picture{display:contents;}
a{color:inherit;}

::selection{background:var(--red);color:var(--white);}

/* ---------- Typography -------------------------------------------------- */

.display,h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:-.02em;
  line-height:.88;
  margin:0;
}

h1{font-size:clamp(2.8rem,11vw,8.5rem);}
h2{font-size:clamp(2.2rem,7.5vw,6rem);}
h3{font-size:clamp(1.4rem,3vw,2.4rem);line-height:1;}
h4{font-size:clamp(1rem,1.6vw,1.25rem);letter-spacing:.02em;}

p{margin:0 0 1.25em;}
p:last-child{margin-bottom:0;}

.kicker{
  font-family:var(--display);
  text-transform:uppercase;
  font-size:.72rem;
  letter-spacing:.28em;
  line-height:1;
  display:inline-block;
}

.lede{
  font-size:clamp(1.15rem,2vw,1.6rem);
  line-height:1.35;
  font-weight:700;
  letter-spacing:-.01em;
}

/* Outlined display type (90s poster trick) */
.t-outline{
  color:transparent;
  -webkit-text-stroke:2px currentColor;
}
.t-outline.of-white{-webkit-text-stroke-color:var(--white);}
.t-outline.of-red{-webkit-text-stroke-color:var(--red);}

/* ---------- Layout ------------------------------------------------------ */

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

section{padding-block:clamp(64px,9vw,128px);}

.rule{
  border:0;
  border-top:4px solid currentColor;
  margin:0;
  opacity:1;
}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--red);color:#fff;padding:12px 20px;
  font-family:var(--display);text-transform:uppercase;
}
.skip-link:focus{left:0;}

:focus-visible{outline:3px solid var(--red);outline-offset:3px;}

/* ---------- Navigation -------------------------------------------------- */

.nav{
  position:sticky;top:0;z-index:100;
  height:var(--nav-h);
  background:var(--white);
  border-bottom:3px solid var(--navy);
}
.nav__inner{
  height:100%;
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;
}
.nav__brand{
  font-family:var(--display);
  font-size:1.35rem;letter-spacing:-.03em;
  color:var(--navy);text-decoration:none;
  display:flex;align-items:baseline;gap:7px;
}
.nav__brand span{
  font-size:.55rem;letter-spacing:.22em;color:var(--red);
}
.nav__links{
  display:flex;align-items:center;gap:clamp(14px,2.2vw,32px);
  list-style:none;margin:0;padding:0;
}
.nav__links a{
  font-family:var(--display);
  text-transform:uppercase;
  font-size:.7rem;letter-spacing:.14em;
  text-decoration:none;color:var(--navy);
  padding:6px 0;
  border-bottom:3px solid transparent;
  transition:color .18s ease,border-color .18s ease;
  white-space:nowrap;
}
.nav__links a:hover,.nav__links a:focus,.nav__links a.is-active{
  color:var(--red);border-bottom-color:var(--red);
}
.nav__toggle{
  display:none;
  background:var(--navy);color:#fff;border:0;
  font-family:var(--display);text-transform:uppercase;
  font-size:.7rem;letter-spacing:.14em;
  padding:10px 14px;cursor:pointer;
}

@media (max-width:860px){
  .nav__toggle{display:block;}
  .nav__links{
    position:absolute;left:0;right:0;top:var(--nav-h);
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--navy);
    border-bottom:4px solid var(--red);
    max-height:0;overflow:hidden;
    transition:max-height .3s ease;
  }
  .nav__links.is-open{max-height:340px;}
  .nav__links a{
    color:var(--cream);
    padding:16px var(--gutter);
    border-bottom:1px solid rgba(253,240,213,.18);
    font-size:.85rem;
  }
  .nav__links a:hover,.nav__links a:focus,.nav__links a.is-active{
    color:var(--white);background:var(--red);border-bottom-color:var(--red);
  }
}

/* ---------- Ticker ------------------------------------------------------ */

.ticker{
  background:var(--red);color:var(--white);
  overflow:hidden;white-space:nowrap;
  border-block:3px solid var(--navy);
  padding-block:9px;
}
.ticker__track{
  display:inline-flex;gap:0;
  animation:ticker 34s linear infinite;
  will-change:transform;
}
.ticker__track span{
  font-family:var(--display);text-transform:uppercase;
  font-size:.78rem;letter-spacing:.2em;
  padding-inline:22px;
}
@keyframes ticker{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){
  .ticker__track{animation:none;}
  html{scroll-behavior:auto;}
}

/* ---------- Hero -------------------------------------------------------- */

.hero{
  background:var(--white);
  padding-block:clamp(40px,6vw,80px) clamp(48px,7vw,96px);
  text-align:center;
  position:relative;
}
.hero__logo{
  width:min(720px,88vw);
  margin:0 auto clamp(18px,3vw,32px);
}
.hero__tagline{
  font-size:clamp(1.3rem,4.6vw,3.4rem);
  color:var(--navy);
}
.hero__tagline em{font-style:normal;color:var(--red);}
.hero__meta{
  margin-top:clamp(20px,3vw,34px);
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:10px 14px;
}
.chip{
  font-family:var(--display);text-transform:uppercase;
  font-size:.64rem;letter-spacing:.18em;
  border:2px solid var(--navy);color:var(--navy);
  padding:7px 13px;
}
.chip--red{background:var(--red);border-color:var(--red);color:#fff;}
.chip--navy{background:var(--navy);color:var(--cream);}

/* ---------- Manifesto --------------------------------------------------- */

.manifesto{background:var(--navy);color:var(--cream);}
.manifesto h2{color:var(--white);font-size:clamp(1.8rem,4vw,3.4rem);word-break:normal;overflow-wrap:break-word;}
.manifesto .kicker{color:var(--sky);}
.manifesto__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.45fr);
  gap:clamp(28px,5vw,72px);
  align-items:start;
  margin-top:clamp(24px,4vw,44px);
}
.manifesto__body p:first-child::first-letter{
  font-family:var(--display);
  float:left;
  font-size:3.6em;
  line-height:.8;
  padding:6px 14px 0 0;
  color:var(--red);
}
@media (max-width:820px){
  .manifesto__grid{grid-template-columns:1fr;}
}

/* ---------- Mission / Vision ------------------------------------------- */

.mv{background:var(--cream);}
.mv__grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(28px,4vw,56px);
}
.mv__card{
  background:var(--white);
  border:3px solid var(--navy);
  padding:clamp(24px,3vw,40px);
}
.mv__card h3{color:var(--wine);margin-bottom:.6em;}
@media (max-width:820px){.mv__grid{grid-template-columns:1fr;}}

/* ---------- Mood boards ------------------------------------------------- */

.moods{background:var(--white);}
.moods__grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,2.4vw,30px);
  margin-top:clamp(26px,4vw,48px);
}
.mood{
  display:block;text-decoration:none;color:inherit;
  border:3px solid var(--navy);
  background:var(--white);
  transition:transform .22s ease,box-shadow .22s ease;
}
.mood:hover,.mood:focus{
  transform:translateY(-6px);
  box-shadow:10px 10px 0 var(--red);
}
.mood__img{aspect-ratio:4/3;overflow:hidden;background:var(--navy);}
.mood__img img{width:100%;height:100%;object-fit:cover;}
.mood__label{
  padding:16px 18px 20px;
  border-top:3px solid var(--navy);
}
.mood__label .kicker{color:var(--red);margin-bottom:8px;}
.mood__label h3{color:var(--navy);font-size:clamp(1.1rem,2vw,1.6rem);}
@media (max-width:820px){.moods__grid{grid-template-columns:1fr;}}

/* ---------- Articles ---------------------------------------------------- */

.article{border-top:6px solid var(--navy);}
.article--cream{background:var(--cream);}
.article--white{background:var(--white);}
.article--navy{background:var(--navy);color:var(--cream);}
.article--navy .article__num{color:var(--sky);}

.article__head{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:clamp(14px,2.4vw,32px);
  align-items:start;
}
.article__num{
  font-family:var(--display);
  font-size:clamp(2.4rem,7vw,6rem);
  line-height:.8;
  color:var(--sky);
}
.article__title{margin-bottom:.35em;}
.article__sub{
  font-family:var(--body);
  font-size:clamp(1.05rem,2.1vw,1.6rem);
  font-weight:700;font-style:italic;
  line-height:1.3;
  letter-spacing:-.01em;
  max-width:34ch;
}
.article__body{
  margin-top:clamp(28px,4vw,52px);
  columns:2;column-gap:clamp(28px,4vw,64px);
  max-width:96ch;
}
.article__body p{break-inside:avoid;}
@media (max-width:820px){
  .article__body{columns:1;}
  .article__head{grid-template-columns:1fr;}
}

/* Figures / photo grids */
.figs{
  display:grid;gap:clamp(14px,2.2vw,28px);
  margin-top:clamp(30px,4.5vw,60px);
}
.figs--2{grid-template-columns:repeat(2,minmax(0,1fr));}
.figs--1{grid-template-columns:1fr;}
@media (max-width:820px){.figs--2{grid-template-columns:1fr;}}

figure{margin:0;}
figure img{
  width:100%;
  border:3px solid var(--navy);
}
.article--navy figure img{border-color:var(--cream);}
figcaption{
  font-family:var(--mono);
  font-size:.74rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  margin-top:9px;
  opacity:.85;
}

/* Video */
.video{margin-top:clamp(26px,4vw,48px);}
.video__frame{
  position:relative;
  aspect-ratio:16/9;
  border:3px solid var(--navy);
  background:var(--navy);
}
.article--navy .video__frame{border-color:var(--cream);background:var(--navy-deep);}
.video__frame iframe,
.video__frame video{
  position:absolute;inset:0;
  width:100%;height:100%;border:0;
  display:block;
}

/* ---------- About ------------------------------------------------------- */

.about{background:var(--white);}
.about__grid{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(28px,5vw,72px);
  align-items:start;
  margin-top:clamp(24px,4vw,44px);
}
.about__card{
  background:var(--cream);
  border:3px solid var(--navy);
  padding:clamp(22px,3vw,36px);
}
.about__card .kicker{color:var(--red);}
.about__card h3{color:var(--wine);margin:10px 0 6px;}
.about__role{
  font-family:var(--mono);text-transform:uppercase;
  font-size:.76rem;letter-spacing:.12em;color:var(--navy);
}
.about__quote{
  border-left:6px solid var(--red);
  padding-left:clamp(16px,2.4vw,28px);
  font-size:clamp(1.1rem,2vw,1.5rem);
  font-weight:700;line-height:1.35;
  color:var(--navy);
  margin:clamp(20px,3vw,34px) 0 0;
}
@media (max-width:820px){.about__grid{grid-template-columns:1fr;}}

/* ---------- Footer ------------------------------------------------------ */

.footer{
  background:var(--navy);color:var(--cream);
  padding-block:clamp(44px,6vw,76px) 28px;
}
.footer h2{color:var(--white);}
.footer__grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(24px,4vw,48px);
  margin-top:clamp(24px,4vw,44px);
}
.footer .kicker{color:var(--sky);display:block;margin-bottom:12px;}
.footer ul{list-style:none;margin:0;padding:0;}
.footer li{margin-bottom:8px;}
.footer a{text-decoration:none;border-bottom:1px solid rgba(253,240,213,.35);}
.footer a:hover,.footer a:focus{color:var(--white);border-bottom-color:var(--red);}
.footer__bottom{
  margin-top:clamp(30px,4vw,54px);
  padding-top:20px;
  border-top:2px solid rgba(253,240,213,.28);
  display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;
  font-family:var(--mono);font-size:.74rem;
  text-transform:uppercase;letter-spacing:.08em;
}
@media (max-width:820px){.footer__grid{grid-template-columns:1fr;}}

/* ---------- Reveal on scroll ------------------------------------------- */

.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease;}
.reveal.is-in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
}

@media print{
  .nav,.ticker,.video{display:none;}
  body{color:#000;background:#fff;}
}

/* ---------- Color utilities (declared last so they always win) ---------- */
.t-red,h1 .t-red,h2 .t-red,h3 .t-red,.article__num.t-red{color:var(--red);}
.t-wine,h1 .t-wine,h2 .t-wine,h3 .t-wine{color:var(--wine);}
.t-navy,h1 .t-navy,h2 .t-navy,h3 .t-navy{color:var(--navy);}
.t-white,h1 .t-white,h2 .t-white,h3 .t-white{color:var(--white);}
.t-cream,h1 .t-cream,h2 .t-cream,h3 .t-cream{color:var(--cream);}
.t-sky,h1 .t-sky,h2 .t-sky,h3 .t-sky{color:var(--sky);}

/* ---------- Moodboard lead + editorial photo spread --------------------- */

.moodlead{margin-top:clamp(30px,4.5vw,58px);}
.moodlead__label{
  display:flex;align-items:center;gap:14px;
  margin-bottom:14px;
}
.moodlead__label .kicker{color:var(--red);}
.article--navy .moodlead__label .kicker{color:var(--sky);}
.moodlead__label::after{
  content:"";flex:1;height:3px;background:currentColor;opacity:.35;
}
.moodlead__grid{display:grid;grid-template-columns:1fr;gap:clamp(14px,2.2vw,28px);}

.spread{
  display:grid;grid-template-columns:1fr;
  gap:clamp(16px,2.4vw,30px);
  margin-top:clamp(18px,2.6vw,34px);
}
.spread figcaption{display:flex;gap:10px;align-items:baseline;}
.spread figcaption b{
  font-family:var(--display);font-weight:900;
  color:var(--red);letter-spacing:.06em;
}
.article--navy .spread figcaption b{color:var(--sky);}

@media (min-width:821px){
  .moodlead__grid{grid-template-columns:repeat(12,1fr);}
  .spread{grid-template-columns:repeat(12,1fr);}
  .moodlead__grid .c5,.spread .c5{grid-column:span 5;}
  .moodlead__grid .c7,.spread .c7{grid-column:span 7;}
  .moodlead__grid .c12,.spread .c12{grid-column:span 12;}
  .spread .c4{grid-column:span 4;}
  .spread .c6{grid-column:span 6;}
  .spread .off{margin-top:clamp(28px,5.5vw,86px);}
}

/* ---------- Self-hosted video ------------------------------------------ */

.video__frame--local{aspect-ratio:auto;background:#000;}
.video__frame--local video{position:static;aspect-ratio:9/16;max-height:min(78vh,760px);
  width:auto;max-width:100%;margin-inline:auto;object-fit:contain;background:#000;}
.video__wrap{display:flex;justify-content:center;background:#000;}