/* ============================================================
   Hazel Alberta — Marketing Portfolio
   Palette: Indomaret tricolour (red / blue / yellow) on cream.
   Signature: the "struk karier" — a career receipt.
   ============================================================ */

:root{
  /* Indomaret tricolour, tuned for large surfaces */
  --red:        #D2141C;
  --red-deep:   #9E0F16;
  --red-bright: #EE1C25;
  --navy:       #0B3B75;
  --navy-deep:  #072850;
  --blue:       #1266B8;
  --yellow:     #FFD100;
  --yellow-deep:#E0B600;

  --cream:      #FAF4EA;
  --cream-2:    #F0E5D5;
  --paper:      #FFFCF5;
  --ink:        #16130F;
  --ink-2:      #201C17;

  --display: "Anton", "Arial Narrow", Impact, sans-serif;
  --script:  "Yellowtail", "Brush Script MT", cursive;
  --body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:    "Courier Prime", "Courier New", ui-monospace, monospace;

  --pad-x: clamp(1.25rem, 5vw, 6rem);
  --pad-y: clamp(4.5rem, 11vh, 9rem);
  --maxw:  1440px;
  --script-size: clamp(2rem, 5.2vw, 3.9rem);

  --ease: cubic-bezier(.22,.61,.36,1);
}

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

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(.95rem,.9rem + .2vw,1.0625rem);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,p,dl,dd,dt{ margin:0; }
a{ color:inherit; }

::selection{ background:var(--yellow); color:var(--ink); }

:where(a,button,[tabindex]):focus-visible{
  outline:3px solid var(--blue);
  outline-offset:3px;
  border-radius:2px;
}

.skip-link{
  position:fixed; top:.5rem; left:.5rem; z-index:200;
  transform:translateY(-200%);
  background:var(--ink); color:var(--cream);
  padding:.6rem 1rem; border-radius:999px;
  font:600 .85rem/1 var(--body); text-decoration:none;
}
.skip-link:focus{ transform:none; }

/* ─────────────── tricolour scroll progress ─────────────── */
.progress{
  position:fixed; inset:0 0 auto 0; z-index:120;
  display:grid; height:6px; pointer-events:none;
}
.progress__bar{
  display:block; height:2px; width:100%;
  transform:scaleX(var(--p,0)); transform-origin:0 50%;
  transition:transform .12s linear;
}
.progress__bar--red{ background:var(--red-bright); }
.progress__bar--blue{ background:var(--blue); transition-delay:.03s; }
.progress__bar--yellow{ background:var(--yellow); transition-delay:.06s; }

/* ─────────────── top bar ─────────────── */
.topbar{
  position:fixed; top:6px; left:0; right:0; z-index:110;
  display:flex; align-items:center; gap:1.5rem;
  padding:.7rem var(--pad-x);
  mix-blend-mode:normal;
  transition:background .35s var(--ease), box-shadow .35s var(--ease), color .35s var(--ease);
  color:var(--cream);
}
.topbar.is-stuck{
  background:color-mix(in srgb, var(--cream) 92%, transparent);
  backdrop-filter:blur(10px);
  box-shadow:0 1px 0 rgb(0 0 0 / .08);
  color:var(--ink);
}
.topbar__mark{
  font:700 .8rem/1 var(--mono); letter-spacing:.12em;
  text-decoration:none; border:1.5px solid currentColor;
  padding:.4rem .5rem; border-radius:3px;
}
.topbar__nav{ display:flex; gap:1.35rem; margin-left:auto; }
.topbar__nav a{
  font:500 .8rem/1 var(--body); letter-spacing:.02em;
  text-decoration:none; opacity:.85; position:relative; padding-bottom:2px;
}
.topbar__nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px;
  background:currentColor; transform:scaleX(0); transform-origin:0 50%;
  transition:transform .25s var(--ease);
}
.topbar__nav a:hover{ opacity:1; }
.topbar__nav a:hover::after,
.topbar__nav a.is-active::after{ transform:scaleX(1); }
.topbar__nav a.is-active{ opacity:1; font-weight:700; }
.topbar__cta{
  font:600 .78rem/1 var(--body); letter-spacing:.04em; text-decoration:none;
  border:1.5px solid currentColor; padding:.45rem .85rem; border-radius:999px;
  transition:background .25s var(--ease), color .25s var(--ease);
}
.topbar__cta:hover{ background:var(--cream); color:var(--red); border-color:var(--cream); }
.topbar.is-stuck .topbar__cta:hover{ background:var(--ink); color:var(--cream); border-color:var(--ink); }

@media (max-width:860px){
  .topbar__nav{ display:none; }
  .topbar__cta{ margin-left:auto; }
}

/* ─────────────── bands ─────────────── */
.band{
  position:relative;
  padding:var(--pad-y) var(--pad-x);
  overflow:hidden;
}
.band > *{ max-width:var(--maxw); margin-inline:auto; }

.band--red{    background:var(--red);    color:var(--cream); }
.band--cream{  background:var(--cream);  color:var(--ink); }
.band--navy{   background:var(--navy);   color:var(--cream); }
.band--ink{    background:var(--ink);    color:var(--cream); }
.band--yellow{ background:var(--yellow); color:var(--ink); }

/* paper grain — one texture, used everywhere, very quiet */
.band::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.06;
  background-image:radial-gradient(circle at 1px 1px, currentColor 1px, transparent 0);
  background-size:4px 4px;
  mix-blend-mode:overlay;
}

/* ─────────────── shared type ─────────────── */
.huge{
  font-family:var(--display); font-weight:400;
  font-size:clamp(3.4rem, 12.5vw, 11rem);
  line-height:.83; letter-spacing:-.005em; text-transform:uppercase;
  /* Anton's caps overshoot the top of a .83 line box — pay it back here so the
     script word above never lands on them. */
  margin:0; padding-top:.1em;
}
.script{
  font-family:var(--script); font-weight:400;
  font-size:var(--script-size);
  line-height:1; margin:0 0 .06em .08em;
}

.lede{
  font-size:clamp(1.02rem,.95rem + .45vw,1.32rem);
  line-height:1.5; font-weight:600; max-width:46ch;
}
.body{ max-width:52ch; opacity:.85; }

.mini{
  font:700 .72rem/1 var(--body); letter-spacing:.16em; text-transform:uppercase;
  margin:0 0 .9rem;
}

.idx{
  position:absolute; top:clamp(1.6rem,4vh,3rem); right:var(--pad-x);
  font:700 .72rem/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  opacity:.7; z-index:3;
}

.tag{
  font:600 .72rem/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
}

/* the Indomaret frame, reduced to a rule */
.rule3{ display:flex; flex-direction:column; gap:2px; width:clamp(90px,14vw,150px); margin:1.4rem 0; }
.rule3 i{ display:block; height:3px; }
.rule3 i:nth-child(1){ background:var(--red-bright); }
.rule3 i:nth-child(2){ background:var(--blue); }
.rule3 i:nth-child(3){ background:var(--yellow); }
.band--red .rule3 i:nth-child(1),
.band--yellow .rule3 i:nth-child(3){ background:currentColor; }

.chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.chips li{
  font:600 .78rem/1 var(--body); letter-spacing:.01em;
  border:1.5px solid currentColor; border-radius:999px;
  padding:.5rem .85rem; opacity:.9;
}

/* ─────────────── reveal ─────────────── */
/* Hidden only once JS is running, so the page still reads with scripts off. */
.js .reveal{ opacity:0; transform:translateY(28px); }
.reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay:var(--d,0ms);
}

/* ══════════════════ COVER ══════════════════ */
.cover{
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:space-between;
  padding-top:clamp(4.5rem,10vh,7rem);
  padding-bottom:clamp(1.5rem,4vh,3rem);
}
.cover__meta{
  display:flex; justify-content:space-between; align-items:baseline;
  width:100%; gap:1rem;
}
.tag--right{ text-align:right; }

.cover__stage{
  position:relative; width:100%; flex:1; min-height:0;
  display:grid; grid-template-rows:auto 1fr auto; justify-items:center;
}
.cover__script{
  grid-row:1; color:var(--cream); opacity:.95;
  position:relative; z-index:1; margin-bottom:0;
}
.cover__word{
  grid-row:3;
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:clamp(4rem, 20.5vw, 21rem);
  line-height:.8; letter-spacing:-.012em;
  color:var(--cream);
  margin:0; position:relative; z-index:1;
  display:flex; justify-content:center;
  white-space:nowrap;
}
.cover__word .ltr{
  display:inline-block;
  opacity:0; transform:translateY(.28em);
  animation:rise .85s var(--ease) forwards;
  animation-delay:calc(120ms + var(--i) * 55ms);
}
@keyframes rise{ to{ opacity:1; transform:none; } }

/* She hangs from just under the script line down to the band's bottom EDGE, not
   to the content box — so the flat bottom of the crop lands exactly on the
   colour boundary and reads as cropped by the layout, and she passes through
   the wordmark instead of perching on top of it. */
.cover__cut{
  position:absolute; z-index:2;
  left:0; right:0; bottom:0;
  top:calc(clamp(4.5rem,10vh,7rem) + 1.9rem + var(--script-size));
  display:flex; justify-content:center; align-items:flex-end;
  transform:scale(.96); opacity:0;
  animation:cutin 1.1s var(--ease) .5s forwards;
  filter:drop-shadow(0 20px 44px rgb(0 0 0 / .28));
  pointer-events:none;
}
.cover__cut img{
  height:100%; width:auto; max-width:min(31vw, 400px);
  object-fit:contain; object-position:bottom center;
}
@keyframes cutin{ to{ opacity:1; transform:scale(1); } }

.cover__foot{
  position:relative; z-index:3;
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:1.5rem; width:100%;
  padding-top:1.1rem;
}
.cover__id{ display:flex; flex-direction:column; align-items:flex-start; gap:.55rem; }
.cover__name{
  font:700 clamp(1rem,2.2vw,1.4rem)/1.1 var(--body); letter-spacing:-.01em;
}
.cover__role{
  font:500 .8rem/1.4 var(--body); letter-spacing:.02em;
  text-align:right; max-width:34ch;
}

.opentowork{
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--cream); color:var(--red-deep);
  font:700 .72rem/1 var(--body); letter-spacing:.03em;
  padding:.55rem .9rem; border-radius:999px;
  box-shadow:0 6px 18px rgb(0 0 0 / .18);
}
.opentowork i{
  width:7px; height:7px; border-radius:50%; background:#1BA94C;
  box-shadow:0 0 0 0 rgb(27 169 76 / .6);
  animation:pulse 2.2s var(--ease) infinite;
}
@keyframes pulse{ 70%{ box-shadow:0 0 0 8px rgb(27 169 76 / 0); } 100%{ box-shadow:0 0 0 0 rgb(27 169 76 / 0); } }

@media (max-width:700px){
  .cover__foot{ flex-direction:column; align-items:flex-start; gap:.75rem; }
  .cover__role{ text-align:left; }
  .cover__meta .tag--right{ display:none; }

  /* Portrait screens can't fit a person and a nine-letter wordmark in the same
     band, so the word goes above her instead of behind her. */
  .cover__stage{ grid-template-rows:auto auto minmax(0,1fr); }
  .cover__word{ grid-row:2; font-size:clamp(3rem,21vw,6rem); }
  .cover__cut{
    position:static; grid-row:3; inset:auto;
    width:100%; margin-top:.75rem;
  }
  .cover__cut img{ height:100%; max-width:min(78vw,340px); }
}

/* ══════════════════ ABOUT ══════════════════ */
.about__grid{
  display:grid; gap:clamp(2rem,5vw,4.5rem);
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:end;
}
.about__text{ align-self:center; }
.about__visual{ position:relative; min-height:clamp(360px,52vw,620px); }
.huge--behind{ color:var(--red); position:relative; z-index:1; }
.about__visual .huge--behind{ font-size:clamp(3.2rem,9.5vw,8.4rem); }
/* -pad-y drops her past the content box onto the band's bottom edge, where the
   cream meets the navy — the crop then reads as a deliberate cut. */
.about__cut{
  position:absolute; z-index:2; right:2%;
  bottom:calc(-1 * var(--pad-y));
  width:min(68%,400px);
  filter:drop-shadow(0 12px 26px rgb(0 0 0 / .10));
}

.name-big{
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:clamp(2.6rem,6.4vw,5.2rem); line-height:.86;
  color:var(--red); margin:0;
}
.about__text .script{ color:var(--red); }
.about__text .body{ margin-top:.9rem; }
.about__text .mini{ margin-top:2rem; color:var(--red-deep); }
.about__text .chips li{ border-color:var(--red); color:var(--red-deep); }

@media (max-width:900px){
  .about__grid{ grid-template-columns:1fr; }
  .about__visual{ min-height:clamp(320px,78vw,520px); }
  .about__cut{ right:0; width:min(64%,320px); }
}

/* ══════════════════ EXPERIENCE ══════════════════ */
.exp__head{ margin-bottom:clamp(2.5rem,6vw,4.5rem); }
.exp__head .script{ color:var(--yellow); }
.exp__head .lede{ margin-top:1.4rem; opacity:.9; }

.exp__grid{
  display:grid; gap:clamp(2rem,4.5vw,4rem);
  grid-template-columns:minmax(300px,380px) minmax(0,1fr);
  align-items:start;
}

/* ── signature: struk karier ── */
.struk{ margin:0; position:sticky; top:6.5rem; }
.struk__paper{
  position:relative;
  background:var(--paper); color:var(--ink);
  font-family:var(--mono); font-size:.78rem; line-height:1.55;
  padding:2.4rem 1.5rem 2.6rem;
  box-shadow:0 26px 60px rgb(0 0 0 / .35);
  transform:rotate(-1.1deg);
}
/* torn thermal-paper edges */
.struk__paper::before,
.struk__paper::after{
  content:""; position:absolute; left:0; right:0; height:10px;
  background:
    linear-gradient(-45deg, transparent 50%, var(--paper) 51%) 0 0/12px 10px repeat-x,
    linear-gradient( 45deg, transparent 50%, var(--paper) 51%) 0 0/12px 10px repeat-x;
}
.struk__paper::before{ top:-10px; transform:scaleY(-1); }
.struk__paper::after{ bottom:-10px; }

.struk__brand{
  font-weight:700; font-size:1.05rem; letter-spacing:.14em;
  text-align:center; color:var(--red);
}
.struk__sub{ text-align:center; letter-spacing:.18em; font-size:.66rem; opacity:.7; }
.struk__title{
  text-align:center; font-weight:700; letter-spacing:.1em;
  margin:.2rem 0; font-size:.82rem;
}
.struk__title span{ font-weight:400; font-size:.64rem; letter-spacing:.2em; opacity:.6; }

.struk__dash{ border-top:1.5px dashed rgb(0 0 0 / .38); margin:.75rem 0; }
.struk__eq{ border-top:3px double rgb(0 0 0 / .5); margin:.75rem 0; }

.struk__items > div{
  display:grid; grid-template-columns:1fr auto; gap:.4rem;
  align-items:baseline; margin-bottom:.7rem;
}
.struk__items dt{ font-weight:700; font-size:.72rem; letter-spacing:.04em; }
.struk__items dt small{
  display:block; font-weight:400; font-size:.66rem; letter-spacing:.02em;
  opacity:.62; margin-top:.1rem;
}
.struk__items dd{ margin:0; font-size:.72rem; white-space:nowrap; }

.struk__line{ display:flex; justify-content:space-between; gap:1rem; font-size:.74rem; letter-spacing:.05em; }
.struk__line b{ font-weight:700; }
.struk__star{ text-align:center; font-weight:700; font-size:.72rem; letter-spacing:.06em; color:var(--red); margin:.2rem 0 .5rem; }
.struk__thanks{ text-align:center; font-size:.62rem; letter-spacing:.22em; opacity:.65; }
.struk__barcode{
  height:38px; margin:.9rem 0 .35rem;
  background:repeating-linear-gradient(90deg,
    var(--ink) 0 2px, transparent 2px 4px,
    var(--ink) 4px 5px, transparent 5px 9px,
    var(--ink) 9px 12px, transparent 12px 13px,
    var(--ink) 13px 14px, transparent 14px 18px);
  opacity:.85;
}
.struk__code{ text-align:center; font-size:.6rem; letter-spacing:.22em; opacity:.6; }

/* ── timeline ── */
.tl{ position:relative; padding-left:2.1rem; }
.tl::before{
  content:""; position:absolute; left:5px; top:.6rem; bottom:.6rem; width:2px;
  background:linear-gradient(var(--yellow), var(--red-bright) 55%, transparent);
  opacity:.65;
}
.tl__item{ position:relative; padding-bottom:clamp(2rem,4vw,3rem); }
.tl__item:last-child{ padding-bottom:0; }
.tl__item::before{
  content:""; position:absolute; left:-2.1rem; top:.5rem;
  width:12px; height:12px; border-radius:50%;
  background:var(--yellow); box-shadow:0 0 0 4px color-mix(in srgb, var(--navy) 70%, transparent);
}
.tl__year{
  display:inline-block; font:700 .7rem/1 var(--mono);
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--yellow); margin-bottom:.5rem;
}
.tl__role{
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:clamp(1.5rem,3.2vw,2.6rem); line-height:.95; letter-spacing:.005em;
}
.tl__org{ font-weight:600; font-size:.88rem; opacity:.72; margin-top:.35rem; }
.tl__desc{ margin-top:.7rem; max-width:56ch; opacity:.88; }
.tl__tags{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.9rem; }
.tl__tags li{
  font:600 .68rem/1 var(--mono); letter-spacing:.1em; text-transform:uppercase;
  padding:.4rem .6rem; border-radius:3px;
  background:color-mix(in srgb, var(--cream) 14%, transparent);
}

@media (max-width:900px){
  .exp__grid{ grid-template-columns:1fr; }
  .struk{ position:static; max-width:380px; }
}

/* ══════════════════ EDUCATION ══════════════════ */
.edu__grid{
  display:grid; gap:clamp(2rem,5vw,4.5rem);
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  align-items:end;
}
.dots{ align-self:center; }
.edu__visual{ position:relative; min-height:clamp(380px,54vw,660px); }
.edu__visual .huge--behind{ font-size:clamp(3rem,9vw,7.8rem); }
.edu__script{ color:var(--red); position:relative; z-index:1; }
.blob{
  position:absolute; z-index:0; right:6%;
  bottom:calc(-1 * var(--pad-y) + 4rem);
  width:min(52%,290px); aspect-ratio:1; border-radius:50%;
  background:var(--red);
}
.edu__cut{
  position:absolute; z-index:2; right:8%;
  bottom:calc(-1 * var(--pad-y));
  width:min(72%,420px);
  filter:drop-shadow(0 12px 26px rgb(0 0 0 / .11));
}

.dots{ position:relative; padding-left:2.4rem; }
.dots::before{
  content:""; position:absolute; left:6px; top:1rem; bottom:1rem;
  border-left:2px dashed var(--red); opacity:.5;
}
.dots__item{ position:relative; padding-bottom:clamp(1.8rem,3.5vw,2.8rem); }
.dots__item:last-child{ padding-bottom:0; }
.dots__item::before{
  content:""; position:absolute; left:-2.4rem; top:.55rem;
  width:14px; height:14px; border-radius:50%;
  background:var(--cream); border:3px solid var(--red);
}
.pill{
  display:inline-block; border:2px solid var(--red); border-radius:999px;
  color:var(--red); font:700 .72rem/1 var(--mono); letter-spacing:.1em;
  padding:.45rem .85rem; margin-bottom:.7rem;
}
.dots__item h3{
  font-size:clamp(1.05rem,1.6vw,1.32rem); font-weight:700; line-height:1.25;
  color:var(--red-deep);
}
.dots__org{ font-weight:600; font-size:.86rem; opacity:.7; margin-top:.15rem; }
.dots__desc{ margin-top:.5rem; max-width:52ch; opacity:.88; }
.dots__desc b{ color:var(--red); }

@media (max-width:900px){
  .edu__grid{ grid-template-columns:1fr; }
  .edu__visual{ min-height:clamp(340px,80vw,540px); }
  .edu__cut{ right:2%; width:min(64%,320px); }
  .blob{ right:0; width:min(52%,260px); }
}

/* ══════════════════ SELECTED WORK ══════════════════ */
.work__head{
  display:grid; align-items:end;
  grid-template-columns:auto minmax(0,1fr);
  column-gap:clamp(2rem,5vw,4rem);
  margin-bottom:clamp(2.5rem,6vw,4rem);
}
.work__head .script{ grid-column:1; color:var(--yellow); }
.work__head .huge{ grid-column:1; }
.work__head .lede{ grid-column:2; grid-row:2; margin:0 0 .7rem; max-width:34ch; opacity:.8; }

@media (max-width:900px){
  .work__head{ grid-template-columns:1fr; }
  .work__head .lede{ grid-column:1; grid-row:auto; margin:1.2rem 0 0; }
}

/* Sourced from a LinkedIn screenshot at 267-432px wide, so the tiles are
   capped near that: stretching them across a 1296px column is what made them
   mushy. Replace with originals and this cap can go. */
.mosaic{
  display:grid; gap:clamp(1rem,2vw,1.5rem);
  grid-template-columns:repeat(2,minmax(0,1fr));
  max-width:1020px; margin-inline:0;
}
.mosaic__item{
  position:relative; margin:0; overflow:hidden;
  background:var(--ink-2);
  border:1px solid rgb(255 255 255 / .1);
}
.mosaic__item picture{ display:block; overflow:hidden; }
.mosaic__item img{
  width:100%; aspect-ratio:16/10; object-fit:cover;
  transition:transform .8s var(--ease), filter .5s var(--ease);
  filter:saturate(.92);
}
.mosaic__item:hover img{ transform:scale(1.04); filter:saturate(1.05); }
.mosaic__item figcaption{
  padding:1.4rem clamp(1.1rem,2vw,1.8rem) 1.6rem;
  border-top:3px solid var(--red-bright);
}
.mosaic__kicker{
  display:block; font:700 .68rem/1 var(--mono); letter-spacing:.16em;
  text-transform:uppercase; color:var(--yellow); margin-bottom:.6rem;
}
.mosaic__item h3{
  font-size:clamp(1.05rem,1.9vw,1.5rem); font-weight:700; line-height:1.22;
}
.mosaic__item figcaption p{ margin-top:.55rem; opacity:.72; font-size:.92rem; max-width:58ch; }

@media (max-width:760px){
  .mosaic{ grid-template-columns:1fr; }
}

/* ══════════════════ RECOGNITION ══════════════════ */
.rec__head{ margin-bottom:clamp(2.2rem,5vw,3.5rem); }
.rec__head .script{ color:var(--red); }
.rec__head .huge{ color:var(--ink); }

.rec__grid{
  display:grid; gap:clamp(1rem,2vw,1.6rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
}
.card{
  background:var(--ink); color:var(--cream);
  padding:clamp(1.4rem,2.4vw,2rem);
  display:flex; flex-direction:column; gap:.5rem;
  border-left:6px solid var(--red-bright);
  transition:transform .4s var(--ease);
}
.card:hover{ transform:translateY(-6px); }
.card__year{
  font:700 .68rem/1 var(--mono); letter-spacing:.16em; text-transform:uppercase;
  color:var(--yellow);
}
.card h3{ font-size:clamp(1.02rem,1.5vw,1.24rem); font-weight:700; line-height:1.28; }
.card__org{ font-weight:600; font-size:.84rem; opacity:.65; }
.card p:last-child{ font-size:.92rem; opacity:.82; }

/* ══════════════════ SKILLS ══════════════════ */
.skills__grid{
  display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:clamp(1.5rem,5vw,4.5rem); align-items:center;
}
.skills__head{ margin:0; }
.skills__head .script{ color:var(--red); }
.skills__head .huge{ color:var(--red); }

.skills__list{ display:flex; flex-wrap:wrap; gap:.6rem; }

@media (max-width:900px){
  .skills__grid{ grid-template-columns:1fr; }
}
.skills__list li{
  --c:var(--red); --label:var(--red-deep); --on:var(--cream);
  font:600 .88rem/1 var(--body);
  border:2px solid var(--c); color:var(--label);
  border-radius:999px; padding:.7rem 1.15rem;
  transition:background .25s var(--ease), color .25s var(--ease);
}
.skills__list li:nth-child(3n+2){ --c:var(--navy); --label:var(--navy); --on:var(--cream); }
.skills__list li:nth-child(3n+3){ --c:var(--yellow-deep); --label:#7A6000; --on:var(--ink); }
.skills__list li:hover{ background:var(--c); color:var(--on); }

/* ══════════════════ CONTACT ══════════════════ */
.contact{
  min-height:92svh;
  display:grid; align-items:center;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(1.5rem,4vw,4rem);
}
.contact__cut{
  align-self:end;
  margin-bottom:calc(-1 * var(--pad-y));
  width:min(100%,440px);
  filter:drop-shadow(0 22px 50px rgb(0 0 0 / .32));
}
.contact__script{ color:var(--cream); }
.contact__word{
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:clamp(3.4rem,11vw,9.5rem); line-height:.84; letter-spacing:-.01em;
  color:var(--cream); margin:0;
}
.contact__sub{ margin-top:1.4rem; max-width:42ch; opacity:.92; font-weight:500; }
.contact__actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.8rem; }

.btn{
  display:inline-flex; align-items:center; gap:.55rem;
  background:var(--cream); color:var(--red-deep);
  font:700 .88rem/1 var(--body); letter-spacing:.01em;
  text-decoration:none; padding:.9rem 1.4rem; border-radius:999px;
  border:2px solid var(--cream);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.btn:hover{ transform:translateY(-3px); box-shadow:0 10px 24px rgb(0 0 0 / .25); }
.btn--ghost{ background:transparent; color:var(--cream); }

@media (max-width:880px){
  .contact{ grid-template-columns:1fr; padding-top:clamp(3rem,8vh,5rem); }
  .contact__cut{ width:min(72%,340px); order:2; margin-inline:auto; }
  .contact__text{ order:1; }
}

/* ══════════════════ FOOTER ══════════════════ */
.foot{
  background:var(--ink); color:var(--cream);
  padding:2.5rem var(--pad-x);
  display:flex; flex-direction:column; align-items:center; gap:.4rem;
}
.foot .rule3{ margin:0 0 .6rem; }
.foot p{ font:500 .78rem/1.5 var(--mono); letter-spacing:.1em; text-transform:uppercase; opacity:.6; text-align:center; }

/* ══════════════════ MOTION PREFERENCES ══════════════════ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  .cover__word .ltr{ opacity:1; transform:none; }
  .cover__cut{ opacity:1; transform:translateX(-50%); }
}

/* ══════════════════ PRINT ══════════════════ */
@media print{
  .topbar,.progress,.skip-link,.contact__actions,.opentowork{ display:none !important; }
  .band{ padding:1.5cm 1cm; break-inside:avoid; }
  .band--red,.band--navy,.band--ink{ background:#fff !important; color:#000 !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
  .struk{ position:static; }
}