/* ============================================================
   GHOST PIZZA OSLO — Brand Guidelines
   ============================================================ */
:root{
  --yellow:#EFCE00; --yellow-deep:#E0B800;
  --ink:#16150F; --ink-soft:#211F16; --ink-card:#1C1B13;
  --white:#F7F5EC; --bone:#B8B4A2; --blood:#E4002B; --slime:#9CFF3D;
  --display:"Anton","Arial Narrow",sans-serif;
  --body:"Archivo",system-ui,sans-serif;
  --mono:"Space Mono",ui-monospace,monospace;
  --sidebar:268px;
}
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{ font-family:var(--body); background:var(--ink); color:var(--white); line-height:1.6; -webkit-font-smoothing:antialiased; }
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--yellow); color:var(--ink); }

body::before{
  content:""; position:fixed; inset:0; z-index:9999; 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='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Layout ---------- */
.layout{ display:grid; grid-template-columns:var(--sidebar) 1fr; min-height:100vh; }

/* ---------- Sidebar ---------- */
.side{
  position:sticky; top:0; align-self:start; height:100vh; overflow-y:auto;
  background:var(--ink-soft); border-right:2px solid rgba(247,245,236,.1);
  padding:1.8rem 1.5rem; display:flex; flex-direction:column;
}
.side__brand{ display:flex; align-items:center; gap:.7rem; margin-bottom:2.4rem; }
.side__logo{ width:44px; height:44px; border-radius:8px; border:2px solid var(--ink); box-shadow:0 0 0 2px var(--yellow); object-fit:cover; }
.side__name{ font-family:var(--display); font-size:1.3rem; line-height:.95; }
.side__name small{ display:block; font-family:var(--mono); font-size:.5rem; letter-spacing:.34em; color:var(--yellow); }
.side__nav{ display:flex; flex-direction:column; gap:.1rem; }
.side__nav a{
  font-family:var(--mono); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--bone); padding:.7rem .8rem; border-radius:6px; display:flex; gap:.7rem; align-items:center;
  transition:background .2s,color .2s;
}
.side__nav a .n{ font-size:.62rem; opacity:.5; }
.side__nav a:hover{ color:var(--white); background:rgba(247,245,236,.05); }
.side__nav a.active{ color:var(--ink); background:var(--yellow); font-weight:700; }
.side__foot{ margin-top:auto; padding-top:1.6rem; font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; color:var(--bone); text-transform:uppercase; }

/* ---------- Main ---------- */
.main{ min-width:0; }
.sec{ padding:clamp(3rem,7vw,6rem) clamp(1.4rem,5vw,5rem); border-bottom:2px solid rgba(247,245,236,.08); scroll-margin-top:0; }
.sec__num{ font-family:var(--mono); font-size:.7rem; letter-spacing:.3em; color:var(--yellow); text-transform:uppercase; margin-bottom:1rem; }
.sec__title{ font-family:var(--display); text-transform:uppercase; font-size:clamp(2.6rem,7vw,5.5rem); line-height:.86; margin-bottom:1.3rem; }
.sec__title em{ font-style:normal; color:var(--yellow); }
.sec__lead{ font-size:1.12rem; max-width:62ch; color:var(--bone); }
.sec__lead b{ color:var(--white); }

/* ---------- Cover ---------- */
.cover{
  min-height:78vh; display:flex; flex-direction:column; justify-content:center;
  padding:clamp(2rem,6vw,5rem); position:relative; overflow:hidden;
  background:radial-gradient(120% 90% at 85% 10%, rgba(239,206,0,.16), transparent 55%), var(--ink);
  border-bottom:3px solid var(--yellow);
}
.cover__kicker{ font-family:var(--mono); letter-spacing:.34em; text-transform:uppercase; font-size:.78rem; color:var(--yellow); margin-bottom:1.4rem; }
.cover__title{ font-family:var(--display); text-transform:uppercase; font-size:clamp(4rem,16vw,12rem); line-height:.8; }
.cover__title .stroke{ color:transparent; -webkit-text-stroke:2px var(--white); }
.cover__sub{ font-family:var(--mono); margin-top:1.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--bone); font-size:.86rem; }
.cover__pattern{ position:absolute; right:-4%; bottom:-8%; width:46%; max-width:520px; opacity:.9; rotate:-8deg; }

/* ---------- Logo blocks ---------- */
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; margin-top:2.4rem; }
.grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin-top:2.4rem; }
.panel{ border:2px solid rgba(247,245,236,.12); border-radius:12px; padding:1.6rem; background:var(--ink-card); }
.panel h4{ font-family:var(--mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--yellow); margin-bottom:1rem; }
.panel p{ color:var(--bone); font-size:.92rem; }
.logo-show{ aspect-ratio:16/10; display:grid; place-items:center; border-radius:10px; overflow:hidden; }
.logo-show img{ width:72%; }
.logo-show--yellow{ background:var(--yellow); }
.logo-show--ink{ background:var(--ink); border:2px solid rgba(247,245,236,.15); }
.logo-show--white{ background:var(--white); }
.clearspace{ background:var(--yellow); border-radius:10px; padding:2.4rem; display:grid; place-items:center; position:relative; }
.clearspace img{ width:58%; outline:2px dashed rgba(22,21,15,.4); outline-offset:24px; }

.dos{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; margin-top:1.4rem; }
.do{ border-radius:10px; padding:1.2rem; font-family:var(--mono); font-size:.8rem; border:2px solid; }
.do--yes{ border-color:var(--slime); color:var(--slime); }
.do--no{ border-color:var(--blood); color:#ff7d96; }
.do b{ display:block; margin-bottom:.4rem; letter-spacing:.1em; text-transform:uppercase; }

/* ---------- Colors ---------- */
.swatches{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1.2rem; margin-top:2.4rem; }
.swatch{ border-radius:12px; overflow:hidden; border:2px solid rgba(247,245,236,.12); }
.swatch__chip{ height:150px; display:flex; align-items:flex-end; padding:1rem; }
.swatch__chip .lbl{ font-family:var(--display); font-size:1.5rem; text-transform:uppercase; }
.swatch__meta{ padding:1rem; background:var(--ink-card); font-family:var(--mono); font-size:.74rem; line-height:1.9; }
.swatch__meta span{ display:block; color:var(--bone); }
.swatch__meta b{ color:var(--white); }

/* ---------- Typography ---------- */
.type-block{ border:2px solid rgba(247,245,236,.12); border-radius:12px; padding:2rem; margin-top:1.4rem; background:var(--ink-card); }
.type-tag{ font-family:var(--mono); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--yellow); margin-bottom:1rem; }
.type-anton{ font-family:var(--display); font-size:clamp(2.6rem,7vw,5rem); line-height:.9; text-transform:uppercase; }
.type-archivo{ font-family:var(--body); font-size:1.5rem; font-weight:700; }
.type-archivo .reg{ font-weight:400; color:var(--bone); }
.type-mono{ font-family:var(--mono); font-size:1.15rem; }
.glyphs{ font-family:var(--display); font-size:1.7rem; letter-spacing:.08em; color:var(--bone); word-spacing:.2em; margin-top:1rem; text-transform:uppercase; }
.scale-row{ display:flex; align-items:baseline; gap:1.5rem; padding:.7rem 0; border-bottom:1px dashed rgba(247,245,236,.12); }
.scale-row .meta{ font-family:var(--mono); font-size:.66rem; color:var(--bone); width:130px; flex:none; letter-spacing:.08em; }
.scale-row .demo{ font-family:var(--display); text-transform:uppercase; line-height:1; }

/* ---------- Illustration / Art ---------- */
.media-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.4rem; margin-top:2.4rem; }
.media{ border-radius:12px; overflow:hidden; border:2px solid rgba(247,245,236,.12); background:var(--ink-card); }
.media img{ width:100%; aspect-ratio:1/1; object-fit:cover; }
.media .cap{ padding:.9rem 1.1rem; font-family:var(--mono); font-size:.72rem; color:var(--bone); letter-spacing:.06em; }
.media .cap b{ color:var(--white); display:block; text-transform:uppercase; letter-spacing:.12em; margin-bottom:.2rem; }
.art-hero{ margin-top:2.4rem; border-radius:14px; overflow:hidden; border:3px solid var(--yellow); }
.art-hero img{ width:100%; }

.voice{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; margin-top:1.6rem; }
.voice .col h4{ font-family:var(--mono); text-transform:uppercase; letter-spacing:.14em; font-size:.74rem; margin-bottom:.8rem; }
.voice .we h4{ color:var(--slime); } .voice .not h4{ color:var(--blood); }
.voice ul li{ list-style:none; padding:.5rem 0; border-bottom:1px dashed rgba(247,245,236,.1); font-size:.95rem; color:var(--bone); }

/* ---------- Contact ---------- */
.contact{ background:var(--yellow); color:var(--ink); border:none; }
.contact .sec__num{ color:var(--ink); }
.contact .sec__title em{ color:var(--white); -webkit-text-stroke:2px var(--ink); }
.contact .sec__lead{ color:#46412c; }
.contact a.big{ font-family:var(--display); font-size:clamp(1.8rem,5vw,3.2rem); text-transform:uppercase; display:inline-block; margin-top:1rem; border-bottom:4px solid var(--ink); }

.backlink{ display:inline-flex; gap:.5rem; align-items:center; font-family:var(--mono); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; margin-top:2rem; padding:.9em 1.4em; border:2px solid var(--ink); border-radius:6px; background:var(--ink); color:var(--yellow); }

/* ---------- Print / PDF (16:9 slides) ---------- */
@media print{
  @page{ size:13.33in 7.5in; margin:0; }
  *{ -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; }
  html,body{ background:var(--ink); }
  body::before{ display:none; }            /* drop grain for crisp print */
  .side, .side__toggle{ display:none !important; }
  .layout{ display:block; }
  .main{ min-width:0; }

  /* each section starts on a fresh slide */
  .cover{ min-height:7.3in; padding:0.6in 0.8in; border:none; display:flex; flex-direction:column; justify-content:center; }
  .sec{ break-before:page; page-break-before:always; padding:0.6in 0.8in; border:none; }

  /* keep only atomic cards intact; let grids flow across pages */
  .panel,.swatch,.media,.do,.scale-row,.type-block,.art-hero img{ break-inside:avoid; page-break-inside:avoid; }

  /* tighten oversized type so slides fit */
  .cover__title{ font-size:7rem; }
  .sec__title{ font-size:3.4rem; }
  .sec__lead{ font-size:.92rem; max-width:90ch; }
  .grid2,.grid3{ margin-top:1rem; }
  .swatches{ margin-top:1rem; }
  .swatch__chip{ height:96px; }
  .type-anton{ font-size:2.6rem; }
  .art-hero{ margin-top:1rem; }
  .art-hero img{ max-height:3.4in; width:auto; margin-inline:auto; }
  .media img{ aspect-ratio:auto; max-height:2in; }

  /* compact the logo-section image blocks so panels stay whole on a slide */
  .logo-show{ aspect-ratio:auto; height:auto; padding:.4in 0; }
  .logo-show img{ max-height:1.5in; width:auto; }
  .clearspace{ padding:.45in; }
  .clearspace img{ width:auto; max-height:1.4in; outline-offset:14px; }
  .panel{ break-inside:avoid; page-break-inside:avoid; }

  .backlink{ display:none; }
}

/* ---------- Mobile ---------- */
.side__toggle{ display:none; }
@media (max-width:920px){
  .layout{ grid-template-columns:1fr; }
  .side{ position:sticky; top:0; height:auto; flex-direction:row; align-items:center; justify-content:space-between; z-index:50; }
  .side__nav{ position:absolute; top:100%; left:0; right:0; background:var(--ink-soft); padding:.6rem 1rem 1rem; border-bottom:2px solid var(--yellow); display:none; }
  .side__nav.open{ display:flex; }
  .side__foot{ display:none; }
  .side__toggle{ display:block; font-family:var(--mono); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--yellow); border:2px solid var(--yellow); border-radius:6px; padding:.5em .9em; }
  .grid2,.grid3,.dos,.voice{ grid-template-columns:1fr; }
}