:root{
  --ink:#111111;
  --navy:#1c2430;
  --olive:#44533c;
  --olive-deep:#333f2d;
  --cream:#f1e8da;
  --cream-dim:rgba(241,232,218,.56);
  --cream-faint:rgba(241,232,218,.14);
  --hair:rgba(241,232,218,.18);

  --display:'Anton', Impact, sans-serif;
  --mono:'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;

  --edge: clamp(24px, 6vw, 96px);
  --space-xl: clamp(64px, 12vw, 180px);
  --space-lg: clamp(40px, 7vw, 96px);
  --space-md: clamp(24px, 4vw, 48px);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}

body[data-brand="rasmus"]{
  margin:0;
  background:var(--ink);
  color:var(--cream);
  font-family:var(--mono);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;display:block;}

a{color:inherit;}

::selection{background:var(--olive);color:var(--cream);}

/* ---------- grain overlay (used sparingly on dark panels) ---------- */
.grain{position:relative;}
.grain::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  opacity:.05;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- eyebrow / labels ---------- */
.eyebrow{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--cream-dim);
  font-weight:500;
}
.eyebrow.on-light{color:rgba(17,17,17,.55);}
.eyebrow.accent{color:#c9d4b8;}

/* ---------- reveal-on-scroll ---------- */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .9s cubic-bezier(.16,.8,.24,1), transform .9s cubic-bezier(.16,.8,.24,1);
}
.reveal.is-visible{opacity:1; transform:translateY(0);}
.reveal.d1{transition-delay:.08s;}
.reveal.d2{transition-delay:.16s;}
.reveal.d3{transition-delay:.24s;}

@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none;}
  html{scroll-behavior:auto;}
}

/* =================================================================
   TOP BAR — restrained House of Lassgård return link
================================================================= */
.topbar{
  position:fixed; top:var(--sw-house-nav-height, 57px); left:0; right:0; z-index:40;
  min-height:var(--sw-context-nav-height, 60px);
  display:flex; align-items:center; justify-content:space-between;
  padding:18px var(--edge);
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--cream-dim);
  mix-blend-mode:difference;
  pointer-events:none;
}
.topbar a{pointer-events:auto; text-decoration:none; border-bottom:1px solid transparent; transition:border-color .3s ease, color .3s ease;}
.topbar a:hover{border-color:currentColor;}
.topbar .rnp-mark{pointer-events:auto; font-family:var(--display); font-size:15px; letter-spacing:.04em; text-decoration:none; flex:none;}
.topbar .brand-return{display:flex; align-items:center; gap:clamp(16px,3vw,36px); pointer-events:auto;}
.topbar .hol-link span{display:inline;}
@media (max-width:640px){
  .topbar{padding:16px var(--edge); font-size:9.5px; letter-spacing:.14em;}
  .topbar .brand-return{gap:14px;}
  .topbar .hol-link .full{display:none;}
  .topbar .hol-link .short{display:inline;}
}
@media (min-width:641px){
  .topbar .hol-link .short{display:none;}
}

/* =================================================================
   HERO
================================================================= */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:
    radial-gradient(ellipse 80% 60% at 78% 38%, rgba(68,83,60,.35), transparent 60%),
    var(--ink);
  padding:calc(var(--edge) + 40px) var(--edge) var(--edge);
  overflow:hidden;
}
.hero-silhouette{
  position:absolute;
  right:clamp(-60px, 2vw, 40px);
  top:50%;
  transform:translateY(-46%);
  width:clamp(280px, 34vw, 520px);
  opacity:.92;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.5));
}
@media (max-width:700px){
  .hero-silhouette{
    right:-10%;
    top:auto;
    bottom:-2%;
    transform:none;
    width:64vw;
    opacity:.4;
    z-index:0;
  }
  .hero-inner{position:relative; z-index:1;}
}
.hero-inner{position:relative; z-index:2; max-width:1400px; margin:0 auto; width:100%;}
.hero-eyebrow-row{
  display:flex; align-items:center; gap:14px; margin-bottom:28px;
}
.hero-eyebrow-row .dot{width:6px;height:6px;border-radius:50%;background:#8fae6d;}
.hero h1{
  font-family:var(--display);
  font-weight:400;
  text-transform:uppercase;
  font-size:clamp(48px, 10.4vw, 158px);
  line-height:.86;
  letter-spacing:.002em;
  margin:0;
  color:var(--cream);
  max-width:20ch;
}
.hero-sub{
  margin-top:34px;
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
}
.hero-sub .tag{
  font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--cream-dim);
  padding:8px 14px;
  border:1px solid var(--hair);
  border-radius:100px;
}
.hero-sub .tag.filled{
  background:var(--olive);
  color:var(--cream);
  border-color:var(--olive);
}

.scroll-cue{
  position:absolute; left:var(--edge); bottom:34px;
  display:flex; align-items:center; gap:10px;
  font-size:10px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--cream-dim);
}
.scroll-cue .line{width:1px; height:34px; background:var(--hair); position:relative; overflow:hidden;}
.scroll-cue .line::after{
  content:""; position:absolute; top:-100%; left:0; width:100%; height:100%;
  background:var(--cream-dim);
  animation:scrollline 2.2s ease-in-out infinite;
}
@keyframes scrollline{
  0%{top:-100%;} 60%{top:100%;} 100%{top:100%;}
}
@media (prefers-reduced-motion: reduce){ .scroll-cue .line::after{animation:none; top:0;} }

/* =================================================================
   SECTION / PANEL shell — reusable for future sections
================================================================= */
.panel{
  position:relative;
  padding:var(--space-xl) var(--edge);
}
.panel-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:var(--space-lg);
  flex-wrap:wrap;
}
.panel-head h2{
  font-family:var(--display);
  font-weight:400;
  text-transform:uppercase;
  font-size:clamp(32px, 4.6vw, 64px);
  line-height:.95;
  margin:10px 0 0;
}
.panel-index{
  font-size:12px; color:var(--cream-dim); letter-spacing:.1em;
}
.panel.on-navy{background:var(--navy);}
.panel.on-olive{background:var(--olive-deep);}
.panel.on-cream{background:var(--cream); color:var(--ink);}
.panel.on-cream .eyebrow{color:rgba(17,17,17,.5);}
.panel.on-cream .panel-index{color:rgba(17,17,17,.45);}
.panel.on-ink{background:var(--ink);}

.hr{
  height:1px; background:var(--hair); border:0; margin:0;
}
.on-cream .hr{background:rgba(17,17,17,.14);}

/* =================================================================
   IDENTITY
================================================================= */
.identity-grid{
  display:grid;
  grid-template-columns: 1.3fr .9fr;
  gap:var(--space-lg);
  align-items:center;
}
.identity-mark{
  display:flex; justify-content:center; align-items:center;
  position:relative;
}
.identity-mark img{width:min(100%, 420px);}
.identity-wordmark{
  font-family:var(--display);
  text-transform:uppercase;
  font-weight:400;
  font-size:clamp(40px, 6.4vw, 92px);
  line-height:.92;
}
.identity-caption{
  margin-top:26px;
  display:flex; gap:32px; flex-wrap:wrap;
}
.identity-caption div{font-size:12px; letter-spacing:.14em; color:var(--cream-dim); text-transform:uppercase;}
.identity-caption b{display:block; color:var(--cream); font-size:13px; letter-spacing:.08em; margin-bottom:6px;}

@media (max-width:860px){
  .identity-grid{grid-template-columns:1fr; text-align:left;}
  .identity-mark{order:-1; margin-bottom:8px;}
  .identity-mark img{width:min(70%, 320px);}
}

/* ---- palette + type combined strip ---- */
.foundation-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:var(--space-lg);
}
.swatches{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.swatch{
  border-radius:2px;
  padding:18px 16px;
  min-height:104px;
  display:flex; flex-direction:column; justify-content:flex-end;
  border:1px solid rgba(241,232,218,.08);
}
.swatch .hex{font-size:13px; letter-spacing:.05em;}
.swatch .name{font-size:10px; letter-spacing:.18em; text-transform:uppercase; opacity:.7; margin-bottom:4px;}

.type-spec{margin-bottom:34px;}
.type-spec:last-child{margin-bottom:0;}
.type-spec .label{
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--cream-dim); margin-bottom:10px;
}
.type-spec .anton-sample{
  font-family:var(--display); text-transform:uppercase; font-size:clamp(22px,3vw,34px); letter-spacing:.01em; line-height:1.15;
}
.type-spec .mono-sample{
  font-family:var(--mono); font-size:clamp(15px,2vw,19px); line-height:1.5; color:var(--cream-dim);
}

@media (max-width:860px){
  .foundation-grid{grid-template-columns:1fr; gap:var(--space-md);}
}

/* =================================================================
   PRODUCT / PACKAGING
================================================================= */
.product-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:28px;
}
.media-frame{
  position:relative;
  overflow:hidden;
  border-radius:2px;
  background:#0d0d0d;
}
.media-frame img{
  width:100%; height:100%; object-fit:cover;
  display:block;
  transition:transform 1.1s cubic-bezier(.16,.8,.24,1);
}
.media-frame:hover img{transform:scale(1.035);}
.media-caption{
  display:flex; justify-content:space-between; gap:16px;
  margin-top:14px;
  font-size:11px; letter-spacing:.08em; color:var(--cream-dim);
}
.on-cream .media-caption{color:rgba(17,17,17,.55);}

.spec-strip{
  margin-top:var(--space-lg);
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--hair);
  border-bottom:1px solid var(--hair);
}
.spec-strip .cell{
  padding:22px 20px;
  border-right:1px solid var(--hair);
}
.spec-strip .cell:last-child{border-right:none;}
.spec-strip .k{font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--cream-dim); margin-bottom:8px;}
.spec-strip .v{font-size:14px; letter-spacing:.02em;}

@media (max-width:760px){
  .product-grid{grid-template-columns:1fr;}
  .spec-strip{grid-template-columns:1fr 1fr;}
  .spec-strip .cell{border-bottom:1px solid var(--hair);}
  .spec-strip .cell:nth-child(2n){border-right:none;}
}

/* =================================================================
   DETAIL — certificate
================================================================= */
.detail-panel{
  display:grid;
  grid-template-columns: .8fr 1.2fr;
  gap:var(--space-lg);
  align-items:center;
}
.detail-panel .media-frame{max-width:560px; margin:0 auto;}
.detail-copy .eyebrow{margin-bottom:18px;}
.detail-copy h2{
  font-family:var(--display); text-transform:uppercase; font-weight:400;
  font-size:clamp(30px,4.2vw,54px); line-height:.98; margin:0 0 22px;
}
.detail-list{list-style:none; margin:0; padding:0;}
.detail-list li{
  display:flex; justify-content:space-between; gap:16px;
  padding:13px 0;
  border-bottom:1px solid rgba(17,17,17,.12);
  font-size:13px;
}
.detail-list li span:first-child{color:rgba(17,17,17,.5); letter-spacing:.12em; text-transform:uppercase; font-size:11px;}

@media (max-width:860px){
  .detail-panel{grid-template-columns:1fr;}
}

/* =================================================================
   IN HIS WORLD — merch
================================================================= */
.world-grid{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:20px;
}
.world-grid .media-frame:first-child{grid-row: span 2;}
.world-grid .media-frame img{aspect-ratio:auto;}

@media (max-width:900px){
  .world-grid{grid-template-columns:1fr 1fr;}
  .world-grid .media-frame:first-child{grid-row:auto; grid-column:1 / -1;}
}
@media (max-width:560px){
  .world-grid{grid-template-columns:1fr;}
}

/* =================================================================
   CLOSE
================================================================= */
.close-panel{
  text-align:center;
  padding-top:var(--space-xl);
  padding-bottom:var(--space-lg);
}
.close-panel .wordmark{
  font-family:var(--display); text-transform:uppercase; font-weight:400;
  font-size:clamp(30px, 6vw, 68px); line-height:1;
  margin:22px 0 0;
}
.close-tags{
  margin-top:22px;
  display:flex; justify-content:center; gap:14px; flex-wrap:wrap;
}
.close-tags span{
  font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--cream-dim);
  padding:7px 14px; border:1px solid var(--hair); border-radius:100px;
}

footer{
  padding:32px var(--edge) 40px;
  display:flex; align-items:center; justify-content:space-between;
  font-size:11px; letter-spacing:.08em; color:var(--cream-dim);
  flex-wrap:wrap; gap:12px;
}
footer a{text-decoration:none; border-bottom:1px solid var(--hair); padding-bottom:2px; transition:border-color .3s ease, color .3s ease;}
footer a:hover{color:var(--cream); border-color:var(--cream);}

/* future-section insertion point styling hook (no visual output unless used) */
.panel + .panel{border-top:none;}

/* — Selected Work shell integration — */
body[data-brand="rasmus"] .brand-main {
  padding-top: calc(var(--sw-house-nav-height, 57px) + var(--sw-context-nav-height, 60px));
  min-height: auto;
}