/* =========================================================================
   SHIFT — bespoke case-study theme
   Premium better-for-you wafer brand. Warm, editorial, confident.
   Cocoa · Cream · Caramel · Green · Newsreader + Hanken Grotesk.
   Scoped under body.shift.
   ========================================================================= */
.shift{
  --cocoa:#2C1D12;
  --cocoa-2:#3A2818;
  --cream:#F4EDDF;
  --cream-2:#EBE1CD;
  --caramel:#C17A3A;
  --caramel-deep:#A8632A;
  --green:#1F6F4A;
  --ink:#211A12;
  --soft:#6B5A45;
  --line:rgba(33,26,18,0.14);
  --line-2:rgba(33,26,18,0.08);

  --sh-serif:"Newsreader",Georgia,serif;
  --sh-sans:"Hanken Grotesk","Schibsted Grotesk",sans-serif;

  --sh-mega: clamp(3.2rem, 11vw, 11rem);
  --sh-huge: clamp(2.4rem, 6vw, 5.6rem);
  --sh-big:  clamp(1.9rem, 4vw, 3.4rem);

  background:var(--cream);
  color:var(--ink);
  cursor:auto;
}
.shift ::selection{ background:var(--caramel); color:var(--cream); }

.sh-serif{ font-family:var(--sh-serif); }
.sh-display{ font-family:var(--sh-serif); font-weight:500; line-height:0.98; letter-spacing:-0.02em; text-wrap:balance; }
.sh-mono{ font-family:var(--mono); font-size:0.72rem; letter-spacing:0.18em; text-transform:uppercase; }

/* ---------- shared-chrome retheme ---------- */
.shift .exp-grain{ opacity:0.05; mix-blend-mode:multiply; }
.shift .exp-progress{ background:var(--caramel); height:3px; }
.shift .exp-veil{ background:var(--cocoa); color:var(--caramel); }
.shift .exp-ambient{ display:none; }
.shift .nav::before{ opacity:1 !important; background:color-mix(in srgb,var(--cream) 86%, transparent); border-bottom-color:var(--line); }

.sh-section{ padding-block:clamp(4rem,9vw,8.5rem); position:relative; }
.shift .wrap{ position:relative; z-index:2; }

/* =====================================================================
   HERO
   ===================================================================== */
.sh-hero{ background:var(--cocoa); color:var(--cream); position:relative; overflow:hidden; padding-top:clamp(7rem,13vh,10rem); }
.sh-hero__inner{ padding-inline:var(--mx); max-width:var(--maxw); margin-inline:auto; display:grid; grid-template-columns:1.05fr 0.95fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; padding-bottom:clamp(3rem,6vw,5rem); }
@media (max-width:860px){ .sh-hero__inner{ grid-template-columns:1fr; } }
.sh-hero__eyebrow{ display:inline-flex; align-items:center; gap:0.7em; font-family:var(--mono); font-size:clamp(0.7rem,1vw,0.82rem); letter-spacing:0.22em; text-transform:uppercase; color:var(--caramel); }
.sh-hero__eyebrow::before{ content:""; width:clamp(20px,4vw,46px); height:1px; background:currentColor; }
.sh-hero__logo{ width:min(70%,360px); height:auto; margin:clamp(1rem,2vw,1.6rem) 0 0; display:block; }
.sh-hero__tag{ font-family:var(--sh-serif); font-weight:400; font-style:italic; font-size:clamp(1.5rem,2.6vw,2.3rem); line-height:1.18; max-width:18ch; margin-top:1.4rem; color:var(--cream); }
.sh-hero__tag em{ font-style:italic; color:var(--caramel); }
.sh-hero__meta{ display:flex; gap:clamp(1.4rem,3vw,2.6rem); margin-top:1.8rem; flex-wrap:wrap; }
.sh-hero__meta .m b{ font-family:var(--sh-serif); font-weight:500; font-size:clamp(1.6rem,2.6vw,2.2rem); display:block; line-height:1; }
.sh-hero__meta .m span{ font-family:var(--mono); font-size:0.64rem; letter-spacing:0.14em; text-transform:uppercase; color:rgba(244,237,223,0.6); margin-top:0.4rem; display:block; }
.sh-hero__cta{ margin-top:2rem; display:inline-flex; gap:0.8rem; flex-wrap:wrap; }
.sh-hero__photo{ border-radius:10px; overflow:hidden; aspect-ratio:4/4.6; background:var(--cocoa-2); }
.sh-hero__photo img{ width:100%; height:100%; object-fit:cover; display:block; will-change:transform; }

/* =====================================================================
   BUTTONS
   ===================================================================== */
.sh-btn{ display:inline-flex; align-items:center; gap:0.5em; white-space:nowrap; font-family:var(--sh-sans); font-weight:700; font-size:0.86rem; letter-spacing:0.01em; padding:0.95em 1.6em; border-radius:100px; background:var(--caramel); color:var(--cocoa); border:1px solid var(--caramel); transition:transform 0.2s var(--ease), background 0.3s; }
.sh-btn:hover{ transform:translateY(-2px); background:var(--cream); border-color:var(--cream); }
.sh-btn--ghost{ background:transparent; color:var(--cream); border-color:rgba(244,237,223,0.4); }
.sh-btn--ghost:hover{ background:rgba(244,237,223,0.1); color:var(--cream); }
.sh-btn--cocoa{ background:var(--cocoa); color:var(--cream); border-color:var(--cocoa); }
.sh-btn--cocoa:hover{ background:var(--caramel); border-color:var(--caramel); color:var(--cocoa); }

/* =====================================================================
   MARQUEE
   ===================================================================== */
.sh-marquee{ overflow:hidden; display:flex; background:var(--caramel); color:var(--cocoa); padding-block:clamp(0.7rem,1.4vw,1.1rem); }
.sh-marquee__track{ display:flex; flex:none; align-items:center; white-space:nowrap; }
.shift.sh-motion .sh-marquee__track{ animation: sh-scroll 36s linear infinite; }
.sh-marquee:hover .sh-marquee__track{ animation-play-state:paused; }
@keyframes sh-scroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
.sh-mq{ display:inline-flex; align-items:center; gap:0.8em; font-family:var(--sh-serif); font-weight:500; font-style:italic; font-size:clamp(1.1rem,2.2vw,1.9rem); letter-spacing:-0.01em; padding:0 0.5em; }
.sh-mq .di{ width:0.5em; height:0.5em; transform:rotate(45deg); background:var(--cocoa); flex:none; }

/* =====================================================================
   EYEBROW / STATEMENT
   ===================================================================== */
.sh-eyebrow{ display:flex; align-items:center; gap:1rem; margin-bottom:clamp(1.8rem,3vw,2.6rem); }
.sh-eyebrow .t{ font-family:var(--mono); font-size:0.72rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--caramel); white-space:nowrap; }
.sh-eyebrow .ln{ flex:1; height:1px; background:var(--line); }
.sh-eyebrow .n{ font-family:var(--mono); font-size:0.72rem; letter-spacing:0.04em; color:var(--soft); }
.sh-statement{ font-family:var(--sh-serif); font-weight:500; font-size:var(--sh-huge); line-height:1.02; letter-spacing:-0.02em; text-wrap:balance; color:var(--ink); }
.sh-statement em{ font-style:italic; color:var(--caramel); }
.sh-lead{ font-family:var(--sh-sans); font-weight:400; font-size:clamp(1.05rem,1.5vw,1.28rem); line-height:1.6; color:var(--soft); max-width:54ch; }
.sh-lead strong{ color:var(--ink); font-weight:700; }

/* trio */
.sh-trio{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.2rem,2.4vw,2rem); }
@media (max-width:820px){ .sh-trio{ grid-template-columns:1fr; } }
.sh-cell{ border-top:1px solid var(--ink); padding-top:1.3rem; }
.sh-cell .lab{ font-family:var(--mono); font-size:0.7rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--caramel); }
.sh-cell h3{ font-family:var(--sh-serif); font-weight:500; font-size:clamp(1.4rem,2.1vw,1.9rem); line-height:1.05; letter-spacing:-0.015em; margin:0.8rem 0 0.6rem; color:var(--ink); }
.sh-cell p{ font-family:var(--sh-sans); font-weight:400; font-size:0.96rem; line-height:1.55; color:var(--soft); max-width:34ch; }

/* =====================================================================
   PRODUCT GALLERY + MACROS
   ===================================================================== */
.sh-gal{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(1rem,1.8vw,1.6rem); }
.sh-frame{ position:relative; border-radius:10px; overflow:hidden; background:var(--cream-2); }
.sh-frame img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.9s var(--ease); }
.sh-frame:hover img{ transform:scale(1.04); }
.sh-frame--contain{ background:var(--cream); }
.sh-frame--contain img{ object-fit:contain; }
.sh-frame--cocoa{ background:var(--cocoa); }
.sh-frame__cap{ position:absolute; left:0.9rem; bottom:0.9rem; z-index:2; font-family:var(--mono); font-size:0.62rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--cream); background:rgba(44,29,18,0.78); backdrop-filter:blur(6px); border-radius:100px; padding:0.4em 0.8em; }
.sh-sp-7{ grid-column:span 7; } .sh-sp-5{ grid-column:span 5; }
.sh-sp-6{ grid-column:span 6; } .sh-sp-4{ grid-column:span 4; } .sh-sp-8{ grid-column:span 8; } .sh-sp-12{ grid-column:span 12; }
.sh-ar-32{ aspect-ratio:3/2; } .sh-ar-43{ aspect-ratio:4/3; } .sh-ar-34{ aspect-ratio:3/4; } .sh-ar-1{ aspect-ratio:1; } .sh-ar-219{ aspect-ratio:21/9; }
@media (max-width:760px){ .sh-gal > *{ grid-column:1 / -1 !important; } }

.sh-macros{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1rem,2vw,1.6rem); border-top:1px solid var(--ink); padding-top:clamp(1.6rem,3vw,2.4rem); }
@media (max-width:680px){ .sh-macros{ grid-template-columns:repeat(2,1fr); row-gap:1.8rem; } }
.sh-macro .n{ font-family:var(--sh-serif); font-weight:500; font-size:clamp(2.4rem,5vw,4rem); line-height:0.9; letter-spacing:-0.03em; color:var(--ink); }
.sh-macro .c{ font-family:var(--mono); font-size:0.66rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--soft); margin-top:0.6rem; display:block; }

/* =====================================================================
   IDENTITY (swatches + type)
   ===================================================================== */
.sh-swrow{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(0.6rem,1.2vw,1rem); }
@media (max-width:680px){ .sh-swrow{ grid-template-columns:repeat(2,1fr); } }
.sh-sw{ aspect-ratio:4/3.4; border-radius:10px; display:flex; flex-direction:column; justify-content:flex-end; padding:1rem; font-family:var(--sh-sans); transition:transform 0.3s var(--ease); }
.sh-sw:hover{ transform:translateY(-4px); }
.sh-sw b{ font-weight:700; font-size:0.95rem; }
.sh-sw span{ font-family:var(--mono); font-size:0.66rem; letter-spacing:0.04em; opacity:0.8; margin-top:0.2rem; }
.sh-sw.brd{ border:1px solid var(--line); }
.sh-typecard{ border-radius:10px; background:var(--cream); border:1px solid var(--line); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.6rem; aspect-ratio:4/3.4; }
.sh-typecard .aa{ font-family:var(--sh-serif); font-weight:500; font-size:clamp(3rem,7vw,4.4rem); line-height:0.85; color:var(--ink); }
.sh-typecard .nm{ font-family:var(--mono); font-size:0.62rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--soft); }

/* =====================================================================
   BRAND BOOK (embedded live document)
   ===================================================================== */
.sh-book{ border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#fff; box-shadow:0 30px 80px -44px rgba(33,26,18,0.5); }
.sh-book__bar{ display:flex; align-items:center; gap:0.8rem; padding:0.75rem 1rem; background:var(--cream-2); border-bottom:1px solid var(--line); }
.sh-book__dots{ display:flex; gap:0.45rem; }
.sh-book__dots i{ width:11px; height:11px; border-radius:50%; background:#c9c0ad; display:block; }
.sh-book__url{ flex:1; background:var(--cream); border-radius:999px; padding:0.4em 1em; font-family:var(--mono); font-size:0.72rem; color:var(--soft); text-align:center; }
.sh-book__live{ font-family:var(--sh-sans); font-size:0.78rem; font-weight:700; color:var(--ink); }
.sh-book iframe, .sh-book__frame{ display:block; width:100%; height:74vh; min-height:540px; border:0; background:var(--cream); }
.sh-book__hint{ font-family:var(--mono); font-size:0.7rem; color:var(--soft); text-align:center; margin-top:0.9rem; }
/* mobile cover card (embedded scrolling iframes break on touch devices) */
.sh-book__card{ display:none; }
.sh-book__hint--mob{ display:none; }
@media (max-width:760px){
  .sh-book iframe.sh-book__frame{ display:none; }
  .sh-book__card{ display:block; background:var(--cocoa); color:var(--cream); text-decoration:none; }
  .sh-book__cardimg{ display:block; aspect-ratio:16/10; overflow:hidden; }
  .sh-book__cardimg img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
  .sh-book__cardbody{ display:block; padding:clamp(1.3rem,5vw,1.8rem); }
  .sh-book__cardbody .k{ display:block; font-family:var(--mono); font-size:0.66rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--caramel); }
  .sh-book__cardbody .t{ display:block; font-family:var(--sh-serif); font-weight:500; font-size:clamp(1.5rem,7vw,2rem); line-height:1.05; letter-spacing:-0.02em; margin-top:0.6rem; }
  .sh-book__open{ display:inline-flex; align-items:center; gap:0.5em; margin-top:1.1rem; font-family:var(--sh-sans); font-weight:700; font-size:0.92rem; color:var(--cream); border-bottom:1.5px solid var(--caramel); padding-bottom:0.25em; }
  .sh-book__hint--desk{ display:none; }
  .sh-book__hint--mob{ display:inline; }
}

/* =====================================================================
   FINALE
   ===================================================================== */
.sh-finale{ background:var(--cocoa); color:var(--cream); text-align:center; overflow:hidden; }
.sh-finale .sh-display{ font-size:var(--sh-mega); color:var(--cream); }
.sh-finale .sh-display em{ font-style:italic; color:var(--caramel); }
.sh-finale__logo{ width:clamp(120px,16vw,200px); height:auto; margin:0 auto clamp(2rem,4vw,3rem); display:block; }

/* next project */
.shift .nextproj{ border-top:1px solid var(--line); padding-block:clamp(3rem,6vw,5rem); }
.shift .nextproj .label{ display:block; margin-bottom:0.8rem; color:var(--caramel); }
.shift .nextproj .big{ font-family:var(--sh-serif); font-weight:500; font-size:var(--sh-big); line-height:1.0; letter-spacing:-0.02em; color:var(--ink); display:inline-flex; align-items:center; gap:0.4em; }
.shift .nextproj a:hover .big{ color:var(--caramel); opacity:1; }
.shift .nextproj a:hover .big .arr{ transform:translateX(10px); }
.shift .nextproj .big .arr{ transition:transform 0.4s var(--ease); }

/* ---------- reveal ---------- */
@media (prefers-reduced-motion: no-preference){
  .shift [data-pop]{ opacity:0; transform:translateY(30px); transition:opacity 0.8s var(--ease), transform 0.8s var(--ease); transition-delay:var(--d,0ms); }
  .shift [data-pop].is-in{ opacity:1; transform:none; }
}
@media (max-width:600px){ .shift{ --sh-mega:clamp(2.8rem,13vw,4.6rem); --sh-huge:clamp(2.1rem,9vw,3.2rem); } }