/* scookohpro.com, v3 (2026-09-08): one layout, seven brand themes selected by a class on . Tokens come from the real brand guides: - Wolverine Ascension (sampled from the logo): charcoal, bone, slate, amber. Oswald + Inter. TRAINING ONLY. - Rez Hypnotist brand guide: Rock Ochre #B5502E, Ochre Light #D97B4F, Stone Teal #2E4A4D, Trance Indigo #3B2A5E, Spotlight Gold #E8B23D (scarce, buttons), Charcoal #14171A, Parchment #F3EEE1. Alfa Slab One / Cinzel / Playfair italic / Inter. - Carrier Film Co brand guide: River Slate #16262A, Slate Light #233A40, Weathered Stone #5B6B67, Nechako River #3E6E64, Rock Ochre #B5502E sparingly. Fraunces / Fraunces italic / IBM Plex Mono / Inter. - Scookoh umbrella: the pictograph logo, ochre-red pigment on blue-grey stone. - Gallery (art), Photo (photography), Studio (marketing, web design): best-fit per field. */ /* ---------- default tokens = Scookoh umbrella ---------- */ :root{ --bg:#1B2226; --bg2:#242D32; --bg3:#2D373D; --line:#3A464C; --ink:#EDE8DC; --ink2:#CFC9BC; --mute:#8F9A9A; --accent:#B5502E; --accent2:#D97B4F; --btn:#B5502E; --btn-ink:#F3EEE1; --top-bg:rgba(27,34,38,.9); --max:1140px; --r:12px; --font-display:"Barlow Condensed","Oswald","Helvetica Neue",Arial,sans-serif; --font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --font-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace; --font-quote:var(--font-body); --h-weight:600; --h-transform:uppercase; --h-ls:.03em; --h-lh:1.02; --eyebrow-font:var(--font-display); } /* Wolverine Ascension: training only */ body.wolverine{ --bg:#151515; --bg2:#212121; --bg3:#2a2a2a; --line:#3a3a38; --ink:#EDE8DC; --ink2:#C9C3B5; --mute:#8f8b82; --accent:#A58E64; --accent2:#C9A968; --btn:#A58E64; --btn-ink:#151515; --top-bg:rgba(21,21,21,.9); --font-display:"Oswald","Helvetica Neue",Arial,sans-serif; --h-weight:600; --h-ls:.02em; } /* Rez Hypnotist */ body.rez{ --bg:#14171A; --bg2:#1C2A2D; --bg3:#2E4A4D; --line:#34494C; --ink:#F3EEE1; --ink2:#D9D2C2; --mute:#9AA39F; --accent:#D97B4F; --accent2:#E8B23D; --btn:#E8B23D; --btn-ink:#14171A; --top-bg:rgba(20,23,26,.9); --font-display:"Cinzel","Times New Roman",serif; --h-weight:600; --h-ls:.06em; --h-lh:1.08; --font-quote:"Playfair Display",Georgia,serif; } body.rez h1{font-family:"Alfa Slab One","Cinzel",serif;font-weight:400;letter-spacing:.02em} body.rez blockquote p{font-family:var(--font-quote);font-style:italic;font-size:1.08rem} body.rez .btn:hover{background:#3B2A5E;color:#F3EEE1} body.rez a:hover{color:#E8B23D} /* Carrier Film Co: filmmaking, actor */ body.carrier{ --bg:#16262A; --bg2:#233A40; --bg3:#2B454C; --line:#35525A; --ink:#EDE8DC; --ink2:#C9C3B5; --mute:#8FA09B; --accent:#5E9A8E; --accent2:#7FB5A8; --btn:#B5502E; --btn-ink:#F3EEE1; --top-bg:rgba(22,38,42,.9); --font-display:"Fraunces","Georgia",serif; --h-weight:600; --h-ls:.02em; --h-lh:1.05; --font-quote:"Fraunces",Georgia,serif; --eyebrow-font:var(--font-mono); } body.carrier .eyebrow{letter-spacing:.2em;font-size:.75rem;font-weight:500} body.carrier blockquote p,body.carrier .bigquote{font-family:var(--font-quote);font-style:italic} body.carrier .credit span:last-child,body.carrier .tag{font-family:var(--font-mono)} /* Gallery: art (light parchment) */ body.parchment{ --bg:#F3EEE1; --bg2:#FFFFFF; --bg3:#EAE4D6; --line:#D9D2C2; --ink:#14171A; --ink2:#3A3A38; --mute:#6E6A62; --accent:#B5502E; --accent2:#9C4326; --btn:#B5502E; --btn-ink:#F3EEE1; --top-bg:rgba(243,238,225,.92); --font-display:"Fraunces","Georgia",serif; --h-weight:500; --h-transform:none; --h-ls:0; --h-lh:1.08; } body.parchment .card{background:#fff} body.parchment .card .img,body.parchment .gallery figure,body.parchment .frame{background:#EAE4D6} body.parchment .btn.ghost{border-color:#14171A;color:#14171A} body.parchment .menu{background:var(--bg)} /* Photo: photography (near black, minimal) */ body.photo{ --bg:#0E0F10; --bg2:#171819; --bg3:#202223; --line:#2C2E30; --ink:#F2F2F0; --ink2:#CFCFCB; --mute:#8A8A88; --accent:#D97B4F; --accent2:#EDE8DC; --btn:#F2F2F0; --btn-ink:#0E0F10; --top-bg:rgba(14,15,16,.9); --font-display:"Fraunces","Georgia",serif; --h-weight:300; --h-transform:none; --h-ls:0; --h-lh:1.05; --eyebrow-font:var(--font-mono); } body.photo .eyebrow{letter-spacing:.2em;font-size:.75rem} body.photo .gallery figure{border:0;border-radius:4px} /* Studio: marketing, web design (light, modern) */ body.studio{ --bg:#F6F4EF; --bg2:#FFFFFF; --bg3:#ECE9E1; --line:#DDD8CD; --ink:#14171A; --ink2:#3A3F42; --mute:#6F7478; --accent:#2E6B62; --accent2:#3E8A7E; --btn:#2E4A4D; --btn-ink:#F6F4EF; --top-bg:rgba(246,244,239,.92); --font-display:"Space Grotesk","Inter",sans-serif; --h-weight:600; --h-transform:none; --h-ls:-.01em; --h-lh:1.06; --eyebrow-font:var(--font-mono); } body.studio .eyebrow{letter-spacing:.18em;font-size:.75rem} body.studio .btn.ghost{border-color:#14171A;color:#14171A} body.studio .tile,body.studio .card{background:#fff} body.studio .menu{background:var(--bg)} body.studio .frame{background:#ECE9E1} /* ---------- base ---------- */ *{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.65 var(--font-body)} img{max-width:100%;height:auto;display:block} a{color:var(--accent2);text-decoration:none} a:hover{text-decoration:underline} h1,h2,h3{font-family:var(--font-display);font-weight:var(--h-weight);letter-spacing:var(--h-ls);line-height:var(--h-lh);margin:0 0 .45em;text-transform:var(--h-transform);color:var(--ink)} h1{font-size:clamp(2.6rem,7vw,5rem)} h2{font-size:clamp(1.9rem,4vw,2.9rem)} h3{font-size:clamp(1.2rem,2.3vw,1.5rem)} p{margin:0 0 1em;color:var(--ink2)} .lead{font-size:1.15rem;color:var(--ink)} .mute{color:var(--mute)} .wrap{max-width:var(--max);margin:0 auto;padding:0 20px} section{padding:60px 0} .eyebrow{font-family:var(--eyebrow-font);color:var(--accent);letter-spacing:.16em;font-size:.85rem;text-transform:uppercase;margin-bottom:10px;display:block;font-weight:500} /* header */ .top{position:sticky;top:0;z-index:50;background:var(--top-bg);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)} .top .wrap{display:flex;align-items:center;justify-content:space-between;height:62px} .brand{font-family:var(--font-display);font-size:1.25rem;letter-spacing:.08em;color:var(--ink);text-transform:uppercase;white-space:nowrap;margin-right:28px;font-weight:600} .brand:hover{text-decoration:none;color:var(--accent2)} .nav{display:none;gap:16px;margin-left:auto} .nav a{color:var(--ink2);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;font-family:var(--font-body);font-weight:500} .nav a:hover{color:var(--accent2);text-decoration:none} .nav a[aria-current]{color:var(--accent2)} .burger{background:none;border:1px solid var(--line);color:var(--ink);border-radius:8px;padding:7px 12px;font:inherit;cursor:pointer} .menu{display:none;position:fixed;inset:62px 0 0 0;background:var(--bg);z-index:49;padding:20px;overflow:auto} .menu.open{display:block} .menu a{display:block;font-family:var(--font-display);font-size:1.9rem;letter-spacing:.04em;color:var(--ink);padding:10px 0;border-bottom:1px solid var(--line);text-transform:uppercase} .menu a:hover{color:var(--accent2);text-decoration:none} @media(min-width:1180px){.nav{display:flex}.burger{display:none}} /* hero */ .hero{position:relative;min-height:74vh;display:flex;align-items:flex-end;overflow:hidden} .hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5} .hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.1) 0%,rgba(0,0,0,.45) 55%,var(--bg) 100%)} .hero .wrap{position:relative;z-index:1;padding-bottom:52px;padding-top:80px} .hero p.lead{max-width:600px} .page-hero{padding:64px 0 20px} .page-hero p.lead{max-width:680px} .banner{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:#14171A;margin-bottom:28px} /* buttons */ .btn{display:inline-block;background:var(--btn);color:var(--btn-ink);font-family:var(--font-display);font-size:1.02rem;letter-spacing:.08em;padding:12px 22px;border-radius:8px;border:0;cursor:pointer;text-transform:uppercase;font-weight:600} .btn:hover{filter:brightness(1.12);text-decoration:none} .btn.ghost{background:transparent;border:1px solid var(--ink2);color:var(--ink)} .btn.ghost:hover{border-color:var(--accent2);color:var(--accent2);filter:none} .btn-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px} /* grids */ .grid{display:grid;gap:16px} .g2{grid-template-columns:1fr}.g3{grid-template-columns:1fr}.g4{grid-template-columns:1fr 1fr} @media(min-width:720px){.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}} .card{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column} .card .img{aspect-ratio:16/10;overflow:hidden;background:#000} .card .img img{width:100%;height:100%;object-fit:cover;transition:transform .5s} .card:hover .img img{transform:scale(1.04)} .card .body{padding:16px 18px 18px} .card h3{margin-bottom:4px} .card p{margin:0;color:var(--mute);font-size:.95rem} a.card{color:inherit}a.card:hover{text-decoration:none;border-color:var(--accent)} .tile{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:20px} .tile h3{margin-bottom:6px} .tile p{margin:0;font-size:.97rem} /* two column */ .split{display:grid;gap:28px;align-items:center} @media(min-width:860px){.split{grid-template-columns:1.1fr .9fr}.split.rev{grid-template-columns:.9fr 1.1fr}.split.rev>*:first-child{order:2}} .frame{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:#000} .logo-frame{padding:28px;background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);display:flex;justify-content:center} .logo-frame img{max-width:340px} /* gallery */ .gallery{columns:2;column-gap:14px} @media(min-width:760px){.gallery{columns:3}} .gallery figure{margin:0 0 14px;break-inside:avoid;border-radius:10px;overflow:hidden;background:#000;border:1px solid var(--line)} .gallery figcaption{font-size:.85rem;color:var(--mute);padding:8px 10px} /* video */ .videos{display:grid;gap:14px;grid-template-columns:1fr} @media(min-width:720px){.videos{grid-template-columns:1fr 1fr}} .video{aspect-ratio:16/9;background:#000;border-radius:10px;overflow:hidden;border:1px solid var(--line)} .video iframe{width:100%;height:100%;border:0} /* faq */ details{border-top:1px solid var(--line);padding:12px 0} details summary{cursor:pointer;font-family:var(--font-display);font-size:1.1rem;letter-spacing:.04em;text-transform:var(--h-transform);color:var(--ink);list-style:none;font-weight:var(--h-weight)} details summary::-webkit-details-marker{display:none} details summary::before{content:"+ ";color:var(--accent2)} details[open] summary::before{content:"- "} details p{margin-top:8px} /* quotes */ blockquote{margin:0;padding:20px;background:var(--bg2);border-left:3px solid var(--accent2);border-radius:0 var(--r) var(--r) 0} blockquote p{color:var(--ink2);font-size:.98rem;font-family:var(--font-quote)} blockquote cite{font-style:normal;color:var(--accent2);font-size:.88rem} .bigquote{font-family:var(--font-display);font-size:clamp(1.5rem,3.4vw,2.3rem);line-height:1.2;color:var(--ink);text-transform:none;letter-spacing:.01em;max-width:860px;font-weight:400} /* numbers strip */ .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0 8px} .stat{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px} .stat b{display:block;font-family:var(--font-display);font-size:2rem;color:var(--accent2);line-height:1} .stat span{font-size:.85rem;color:var(--mute)} /* before / after */ .ba{display:grid;gap:16px;grid-template-columns:1fr} @media(min-width:720px){.ba{grid-template-columns:1fr 1fr}} .ba figure{margin:0;background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);overflow:hidden} .ba .pair{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:#000} .ba .pair img{width:100%;aspect-ratio:9/16;object-fit:cover;object-position:50% 10%} .ba .labels{display:grid;grid-template-columns:1fr 1fr;gap:4px;text-align:center;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.06em} .ba .labels div{padding:10px 8px;background:var(--bg3)} .ba .labels small{display:block;color:var(--mute);font-size:.75rem;letter-spacing:.14em} .ba .labels b{font-size:1.5rem;color:var(--ink);font-weight:500} .ba figcaption{text-align:center;padding:10px;background:var(--btn);color:var(--btn-ink);font-family:var(--font-display);letter-spacing:.14em;text-transform:uppercase;font-weight:600} /* merch */ .merch .card .img{aspect-ratio:1/1} .price{color:var(--accent);font-family:var(--font-display);font-size:1.15rem;letter-spacing:.05em} /* forms */ form{display:grid;gap:14px;max-width:620px} label{font-size:.8rem;color:var(--mute);text-transform:uppercase;letter-spacing:.1em;font-family:var(--font-display)} input,select,textarea{width:100%;background:var(--bg3);border:1px solid var(--line);color:var(--ink);border-radius:8px;padding:12px 14px;font:inherit} textarea{min-height:140px;resize:vertical} input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);border-color:transparent} .hp{position:absolute;left:-9999px;opacity:0;height:0;width:0} .notice{padding:14px 16px;border-radius:8px;background:var(--bg2);border:1px solid var(--line)} .notice.ok{border-color:#4f7d5a}.notice.err{border-color:#8a4a3a} /* misc */ .list{columns:1;padding-left:18px;color:var(--ink2);margin:0 0 1em} @media(min-width:720px){.list.two{columns:2}} .list li{margin:0 0 6px;break-inside:avoid} .strip{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} footer{padding:44px 0 56px;color:var(--mute);font-size:.9rem;border-top:1px solid var(--line)} footer .wrap{display:grid;gap:18px} @media(min-width:720px){footer .wrap{grid-template-columns:1fr 1fr 1fr}} footer a{color:var(--ink2)} .social a{margin-right:14px} .small{font-size:.85rem} .credits{display:grid;gap:8px} .credit{display:flex;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line);padding:10px 0} .credit span:last-child{color:var(--mute);white-space:nowrap;font-size:.9rem} .tag{display:inline-block;font-family:var(--font-display);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent2);border:1px solid var(--line);border-radius:6px;padding:4px 10px;margin-right:8px}