/* ============================================================================ STRUCTURAL SKINS — whole-site redesigns (auto-assembled). Each theme's ROOT PHILOSOPHY restructures the entire site (nav, hero, sections, buttons, cards, footer, spatial system), not just the gallery. Scoped :root[data-skin="id"] + body[data-struct="id"]; base scaffold rules live in styles.css. Loaded after styles.css so these blocks layer on top of the base colour/gallery skins. Generated from css/parts/* by tools/build-structural.js. ============================================================================ */ /* ===== p01-signature.css ===== */ /* ---- default (warm archive restraint: paper room, modest rhythm, photos as primary evidence) */ :root[data-skin="default"] .site-header{ background:color-mix(in srgb, var(--bg) 94%, transparent); border-bottom:1px solid var(--line); box-shadow:0 10px 30px -28px rgba(26,25,23,.42); } :root[data-skin="default"] .nav{ height:72px; } :root[data-skin="default"] .brand{ letter-spacing:.015em; } :root[data-skin="default"] .nav-links{ gap:clamp(20px,3vw,38px); } :root[data-skin="default"] .nav-links a{ color:var(--ink-soft); font-family:var(--sans); font-size:13px; letter-spacing:.06em; padding:7px 0; } :root[data-skin="default"] .nav-links a::after{ height:2px; background:var(--accent); bottom:-3px; } :root[data-skin="default"] .nav-right{ gap:16px; } :root[data-skin="default"] .cart-btn{ color:var(--ink); border:1px solid var(--line); border-radius:999px; padding:7px 11px; background:var(--surface); } :root[data-skin="default"] .hero{ padding-block:clamp(64px,10vw,122px) clamp(46px,7vw,84px); } :root[data-skin="default"] .hero-grid{ grid-template-columns:minmax(0,1fr) minmax(280px,.82fr); gap:clamp(34px,6vw,76px); align-items:center; } :root[data-skin="default"] .hero h1{ max-width:10ch; margin:16px 0 20px; color:var(--ink); } :root[data-skin="default"] .hero .lead{ max-width:42ch; color:var(--ink-soft); } :root[data-skin="default"] .hero .eyebrow, :root[data-skin="default"] .section-head .eyebrow{ color:var(--accent); } :root[data-skin="default"] .hero-cta{ gap:12px; } :root[data-skin="default"] .hero-art{ background:var(--surface); padding:clamp(10px,1.7vw,20px); border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 28px 58px -42px rgba(26,25,23,.45); } :root[data-skin="default"] .hero-art img{ width:100%; height:auto; object-fit:contain; } :root[data-skin="default"] .section{ padding-block:clamp(54px,8vw,100px); } :root[data-skin="default"] .section--alt{ background:var(--surface); border-block:1px solid var(--line); } :root[data-skin="default"] .section--showcase{ background:#141417; } :root[data-skin="default"] .section-head{ align-items:flex-end; margin-bottom:clamp(26px,4vw,46px); } :root[data-skin="default"] .section-head h2{ max-width:13ch; color:var(--ink); } :root[data-skin="default"] .btn, :root[data-skin="default"] input, :root[data-skin="default"] select, :root[data-skin="default"] textarea{ border-radius:var(--radius); } :root[data-skin="default"] .btn-primary, :root[data-skin="default"] .btn--accent{ background:var(--accent); border-color:var(--accent); color:#fff; } :root[data-skin="default"] .btn-ghost, :root[data-skin="default"] .btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line-strong); } :root[data-skin="default"] input, :root[data-skin="default"] select, :root[data-skin="default"] textarea{ background:var(--surface); border-color:var(--line-strong); color:var(--ink); } :root[data-skin="default"] .card-media, :root[data-skin="default"] .about-portrait{ background:var(--surface-2); padding:clamp(8px,1.2vw,16px); border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 18px 44px -36px rgba(26,25,23,.46); } :root[data-skin="default"] .card-media img, :root[data-skin="default"] .about-portrait img{ width:100%; height:auto; object-fit:contain; } :root[data-skin="default"] .site-footer{ background:var(--surface); border-top:1px solid var(--line); color:var(--ink-soft); } :root[data-skin="default"] .site-footer h4{ color:var(--ink-faint); font-family:var(--mono); letter-spacing:.16em; } :root[data-skin="default"] .site-footer a{ color:var(--ink-soft); text-decoration-color:var(--line-strong); text-underline-offset:5px; } /* ---- editorial (magazine calm: margins, readable captions, page-space as the mat) */ :root[data-skin="editorial"] .site-header{ position:relative; background:var(--bg); border-bottom:1px solid var(--line); box-shadow:none; } :root[data-skin="editorial"] .nav{ height:86px; align-items:flex-end; padding-bottom:18px; } :root[data-skin="editorial"] .brand{ font-family:var(--serif); font-size:28px; letter-spacing:-.01em; } :root[data-skin="editorial"] .nav-links{ gap:clamp(24px,4vw,62px); align-items:flex-end; } :root[data-skin="editorial"] .nav-links a{ color:var(--ink); font-size:12px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; padding-bottom:9px; } :root[data-skin="editorial"] .nav-links a::after{ height:1px; background:var(--ink); bottom:2px; } :root[data-skin="editorial"] .nav-right{ align-items:flex-end; } :root[data-skin="editorial"] .cart-btn{ border-bottom:1px solid var(--line-strong); padding:4px 0; } :root[data-skin="editorial"] .hero{ padding-block:clamp(78px,12vw,148px) clamp(56px,8vw,104px); } :root[data-skin="editorial"] .hero-grid{ grid-template-columns:minmax(0,.72fr) minmax(320px,1.28fr); gap:clamp(46px,7vw,92px); align-items:end; } :root[data-skin="editorial"] .hero h1{ font-size:clamp(48px,7.6vw,104px); line-height:.98; max-width:9.5ch; margin:20px 0 24px; } :root[data-skin="editorial"] .hero .lead{ max-width:38ch; color:var(--ink-soft); } :root[data-skin="editorial"] .hero .eyebrow, :root[data-skin="editorial"] .section-head .eyebrow{ color:var(--ink-faint); letter-spacing:.24em; } :root[data-skin="editorial"] .hero-cta{ gap:10px; } :root[data-skin="editorial"] .hero-art{ background:transparent; padding:0; border:0; border-radius:0; box-shadow:none; } :root[data-skin="editorial"] .hero-art img{ width:100%; height:auto; object-fit:contain; } :root[data-skin="editorial"] .section{ padding-block:clamp(72px,10vw,132px); } :root[data-skin="editorial"] .section--alt{ background:transparent; border-block:1px solid var(--line); } :root[data-skin="editorial"] .section--showcase{ background:var(--bg); } :root[data-skin="editorial"] .section-head{ display:grid; grid-template-columns:minmax(120px,.28fr) 1fr; align-items:end; gap:clamp(24px,5vw,72px); } :root[data-skin="editorial"] .section-head h2{ margin:0; max-width:14ch; font-size:clamp(34px,5vw,62px); line-height:1.02; } :root[data-skin="editorial"] .btn, :root[data-skin="editorial"] input, :root[data-skin="editorial"] select, :root[data-skin="editorial"] textarea{ border-radius:0; } :root[data-skin="editorial"] .btn-primary, :root[data-skin="editorial"] .btn--accent{ background:var(--ink); border-color:var(--ink); color:var(--bg); } :root[data-skin="editorial"] .btn-ghost, :root[data-skin="editorial"] .btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line-strong); } :root[data-skin="editorial"] input, :root[data-skin="editorial"] select, :root[data-skin="editorial"] textarea{ background:transparent; border-width:0 0 1px; padding-inline:0; } :root[data-skin="editorial"] .card-media, :root[data-skin="editorial"] .about-portrait{ background:transparent; padding:0; border:0; border-radius:0; box-shadow:none; } :root[data-skin="editorial"] .card-media img, :root[data-skin="editorial"] .about-portrait img{ width:100%; height:auto; object-fit:contain; } :root[data-skin="editorial"] .site-footer{ background:var(--bg); border-top:1px solid var(--line); color:var(--ink-soft); } :root[data-skin="editorial"] .site-footer h4{ color:var(--ink); font-family:var(--sans); font-size:11px; letter-spacing:.18em; text-transform:uppercase; } :root[data-skin="editorial"] .site-footer a{ color:var(--ink); text-decoration-thickness:1px; text-underline-offset:6px; } @media (max-width:820px){ :root[data-skin="editorial"] .section-head{ grid-template-columns:1fr; } } /* ---- cinematic (dark screening room: wide frame, title-card hierarchy, hairline cuts) */ body[data-struct="cinematic"] #skin-structure{ background:#0A0A0B; } body[data-struct="cinematic"] .skin-structure-layer:nth-child(1){ inset:-10vh -10vw; background:radial-gradient(90% 70% at 50% 18%, rgba(231,228,220,.10), transparent 55%), linear-gradient(180deg, rgba(255,255,255,.045), transparent 28%, rgba(0,0,0,.35)); } :root[data-skin="cinematic"] .site-header{ background:rgba(10,10,11,.78); border-bottom:1px solid rgba(244,242,236,.12); backdrop-filter:blur(14px); } :root[data-skin="cinematic"] .nav{ height:64px; } :root[data-skin="cinematic"] .brand{ color:var(--ink); font-family:var(--sans); font-size:18px; text-transform:uppercase; letter-spacing:.24em; } :root[data-skin="cinematic"] .nav-links{ gap:clamp(18px,3vw,48px); } :root[data-skin="cinematic"] .nav-links a{ color:var(--ink-soft); font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; padding:9px 0; } :root[data-skin="cinematic"] .nav-links a::after{ height:1px; background:var(--ink); bottom:1px; } :root[data-skin="cinematic"] .nav-right{ gap:14px; } :root[data-skin="cinematic"] .cart-btn{ color:var(--ink); border:1px solid var(--line-strong); border-radius:0; padding:7px 10px; } :root[data-skin="cinematic"] .hero{ padding-block:clamp(74px,12vw,152px) clamp(36px,6vw,74px); } :root[data-skin="cinematic"] .hero-grid{ width:100vw; max-width:none; margin-left:calc(50% - 50vw); padding-inline:clamp(12px,3vw,48px); grid-template-columns:minmax(260px,.72fr) minmax(320px,1.28fr); gap:clamp(8px,1.2vw,18px); align-items:center; } :root[data-skin="cinematic"] .hero h1{ color:var(--ink); font-family:var(--serif); font-size:clamp(46px,8vw,112px); line-height:.96; max-width:11ch; margin:18px 0 18px; } :root[data-skin="cinematic"] .hero .lead{ color:var(--ink-soft); max-width:44ch; } :root[data-skin="cinematic"] .hero .eyebrow, :root[data-skin="cinematic"] .section-head .eyebrow{ color:var(--ink-faint); font-family:var(--mono); letter-spacing:.26em; } :root[data-skin="cinematic"] .hero-cta{ gap:8px; } :root[data-skin="cinematic"] .hero-art{ background:#000; padding:4px; border:0; border-radius:0; box-shadow:0 44px 90px -54px rgba(0,0,0,.95); } :root[data-skin="cinematic"] .hero-art img{ width:100%; height:auto; object-fit:contain; } :root[data-skin="cinematic"] .section{ padding-block:clamp(50px,8vw,108px); } :root[data-skin="cinematic"] .section--alt{ background:#111112; border-block:1px solid var(--line); } :root[data-skin="cinematic"] .section--showcase{ background:#0A0A0B; } :root[data-skin="cinematic"] .section-head{ border-top:1px solid var(--line); padding-top:clamp(18px,2vw,28px); align-items:flex-start; } :root[data-skin="cinematic"] .section-head h2{ color:var(--ink); font-size:clamp(32px,5.5vw,76px); letter-spacing:-.02em; } :root[data-skin="cinematic"] .btn, :root[data-skin="cinematic"] input, :root[data-skin="cinematic"] select, :root[data-skin="cinematic"] textarea{ border-radius:0; } :root[data-skin="cinematic"] .btn-primary, :root[data-skin="cinematic"] .btn--accent{ background:var(--ink); border-color:var(--ink); color:#0A0A0B; } :root[data-skin="cinematic"] .btn-ghost, :root[data-skin="cinematic"] .btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line-strong); } :root[data-skin="cinematic"] input, :root[data-skin="cinematic"] select, :root[data-skin="cinematic"] textarea{ background:#111112; border-color:var(--line-strong); color:var(--ink); } :root[data-skin="cinematic"] .card-media, :root[data-skin="cinematic"] .about-portrait{ background:#000; padding:4px; border:1px solid var(--line); border-radius:0; box-shadow:0 32px 68px -48px rgba(0,0,0,.95); } :root[data-skin="cinematic"] .card-media img, :root[data-skin="cinematic"] .about-portrait img{ width:100%; height:auto; object-fit:contain; } :root[data-skin="cinematic"] .site-footer{ background:#0A0A0B; border-top:1px solid var(--line); color:var(--ink-soft); } :root[data-skin="cinematic"] .site-footer h4{ color:var(--ink-faint); font-family:var(--mono); letter-spacing:.22em; } :root[data-skin="cinematic"] .site-footer a{ color:var(--ink); text-decoration-color:var(--line-strong); text-underline-offset:7px; } @media (max-width:820px){ :root[data-skin="cinematic"] .hero-grid{ grid-template-columns:1fr; } } /* ---- bleed (continuous photographic surface: chrome recedes until page and image field merge) */ :root[data-skin="bleed"] .site-header{ background:rgba(9,9,10,.64); border-bottom:0; backdrop-filter:blur(16px); } :root[data-skin="bleed"] .nav{ height:58px; } :root[data-skin="bleed"] .brand{ color:var(--ink); font-family:var(--sans); font-size:15px; text-transform:uppercase; letter-spacing:.22em; } :root[data-skin="bleed"] .nav-links{ gap:2px; } :root[data-skin="bleed"] .nav-links a{ color:var(--ink-soft); font-size:12px; letter-spacing:.08em; padding:10px 12px; background:rgba(18,18,20,.55); } :root[data-skin="bleed"] .nav-links a::after{ display:none; } :root[data-skin="bleed"] .nav-right{ gap:8px; } :root[data-skin="bleed"] .cart-btn{ color:var(--ink); background:rgba(18,18,20,.62); padding:10px 12px; border-radius:0; } :root[data-skin="bleed"] .hero{ padding-block:0; } :root[data-skin="bleed"] .hero-grid{ width:100vw; max-width:none; margin-left:calc(50% - 50vw); padding:clamp(64px,10vw,120px) clamp(16px,5vw,72px) clamp(28px,5vw,70px); grid-template-columns:minmax(260px,.62fr) minmax(320px,1.38fr); gap:0; align-items:end; background:#09090A; } :root[data-skin="bleed"] .hero h1{ color:var(--ink); font-size:clamp(52px,9vw,132px); line-height:.9; max-width:9ch; margin:14px 0 18px; } :root[data-skin="bleed"] .hero .lead{ color:var(--ink-soft); max-width:36ch; } :root[data-skin="bleed"] .hero .eyebrow, :root[data-skin="bleed"] .section-head .eyebrow{ color:var(--ink-faint); } :root[data-skin="bleed"] .hero-cta{ gap:0; } :root[data-skin="bleed"] .hero-art{ background:#09090A; padding:0; border:0; border-radius:0; box-shadow:none; } :root[data-skin="bleed"] .hero-art img{ width:100%; height:auto; object-fit:contain; } :root[data-skin="bleed"] .section{ padding-block:clamp(34px,6vw,82px); } :root[data-skin="bleed"] .section--alt{ background:#09090A; border-block:0; } :root[data-skin="bleed"] .section--showcase{ background:#09090A; padding-inline:0; } :root[data-skin="bleed"] .section-head{ width:100vw; max-width:none; margin-left:calc(50% - 50vw); padding-inline:clamp(16px,4vw,64px); margin-bottom:clamp(18px,3vw,34px); } :root[data-skin="bleed"] .section-head h2{ color:var(--ink); font-size:clamp(34px,6vw,86px); max-width:10ch; } :root[data-skin="bleed"] .btn, :root[data-skin="bleed"] input, :root[data-skin="bleed"] select, :root[data-skin="bleed"] textarea{ border-radius:0; } :root[data-skin="bleed"] .btn-primary, :root[data-skin="bleed"] .btn--accent{ background:var(--ink); color:#09090A; border-color:var(--ink); } :root[data-skin="bleed"] .btn-ghost, :root[data-skin="bleed"] .btn--ghost{ background:rgba(18,18,20,.72); color:var(--ink); border-color:var(--line-strong); } :root[data-skin="bleed"] input, :root[data-skin="bleed"] select, :root[data-skin="bleed"] textarea{ background:#121214; border-color:var(--line-strong); color:var(--ink); } :root[data-skin="bleed"] .card-media, :root[data-skin="bleed"] .about-portrait{ background:#09090A; padding:0; border:0; border-radius:0; box-shadow:none; } :root[data-skin="bleed"] .card-media img, :root[data-skin="bleed"] .about-portrait img{ width:100%; height:auto; object-fit:contain; } :root[data-skin="bleed"] .site-footer{ background:#09090A; border-top:0; color:var(--ink-soft); margin-top:0; } :root[data-skin="bleed"] .site-footer h4{ color:var(--ink-faint); font-family:var(--mono); letter-spacing:.18em; } :root[data-skin="bleed"] .site-footer a{ color:var(--ink); text-decoration-color:var(--line-strong); text-underline-offset:6px; } @media (max-width:820px){ :root[data-skin="bleed"] .hero-grid{ grid-template-columns:1fr; gap:clamp(18px,4vw,36px); } } /* ---- contemporary (cool commercial-gallery confidence: floating objects, label systems, architectural neutrality) */ body[data-struct="contemporary"] .skin-structure-layer:nth-child(1){ background:linear-gradient(90deg, transparent 0 calc(50% - 1px), rgba(26,26,28,.045) calc(50% - 1px) 50%, transparent 50%), linear-gradient(180deg, transparent 0 24%, rgba(255,255,255,.28) 24% 24.2%, transparent 24.2%); } :root[data-skin="contemporary"] .site-header{ background:rgba(233,233,231,.86); border-bottom:1px solid var(--line); box-shadow:0 20px 42px -42px rgba(26,26,28,.38); } :root[data-skin="contemporary"] .nav{ height:76px; } :root[data-skin="contemporary"] .brand{ font-family:var(--sans); font-size:19px; font-weight:700; text-transform:uppercase; letter-spacing:.12em; } :root[data-skin="contemporary"] .nav-links{ gap:clamp(22px,3.6vw,54px); } :root[data-skin="contemporary"] .nav-links a{ color:var(--ink-soft); font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; padding:10px 0; } :root[data-skin="contemporary"] .nav-links a::after{ height:2px; background:var(--ink); } :root[data-skin="contemporary"] .nav-right{ gap:18px; } :root[data-skin="contemporary"] .cart-btn{ color:var(--ink); border:1px solid var(--line-strong); border-radius:0; padding:8px 12px; background:var(--surface); } :root[data-skin="contemporary"] .hero{ padding-block:clamp(84px,12vw,154px) clamp(62px,9vw,118px); } :root[data-skin="contemporary"] .hero-grid{ grid-template-columns:minmax(0,.88fr) minmax(320px,1.12fr); gap:clamp(44px,7vw,96px); align-items:center; } :root[data-skin="contemporary"] .hero h1{ font-family:var(--sans); font-weight:700; font-size:clamp(42px,7vw,96px); line-height:.98; letter-spacing:-.045em; max-width:11ch; } :root[data-skin="contemporary"] .hero .lead{ max-width:40ch; color:var(--ink-soft); } :root[data-skin="contemporary"] .hero .eyebrow, :root[data-skin="contemporary"] .section-head .eyebrow{ color:var(--ink-faint); letter-spacing:.2em; } :root[data-skin="contemporary"] .hero-cta{ gap:14px; } :root[data-skin="contemporary"] .hero-art{ background:transparent; padding:0; border:0; border-radius:0; box-shadow:0 38px 78px -52px rgba(26,26,28,.48); } :root[data-skin="contemporary"] .hero-art img{ width:100%; height:auto; object-fit:contain; } :root[data-skin="contemporary"] .section{ padding-block:clamp(68px,10vw,132px); } :root[data-skin="contemporary"] .section--alt{ background:var(--surface); border-block:0; } :root[data-skin="contemporary"] .section--showcase{ background:var(--bg); } :root[data-skin="contemporary"] .section-head{ align-items:flex-start; border-top:1px solid var(--line); padding-top:clamp(18px,2.6vw,34px); } :root[data-skin="contemporary"] .section-head h2{ font-family:var(--sans); font-weight:700; letter-spacing:-.035em; color:var(--ink); max-width:12ch; } :root[data-skin="contemporary"] .btn, :root[data-skin="contemporary"] input, :root[data-skin="contemporary"] select, :root[data-skin="contemporary"] textarea{ border-radius:0; } :root[data-skin="contemporary"] .btn-primary, :root[data-skin="contemporary"] .btn--accent{ background:var(--ink); color:var(--bg); border-color:var(--ink); } :root[data-skin="contemporary"] .btn-ghost, :root[data-skin="contemporary"] .btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line-strong); } :root[data-skin="contemporary"] input, :root[data-skin="contemporary"] select, :root[data-skin="contemporary"] textarea{ background:var(--surface); border-color:var(--line-strong); color:var(--ink); } :root[data-skin="contemporary"] .card-media, :root[data-skin="contemporary"] .about-portrait{ background:transparent; padding:0; border:0; border-radius:0; box-shadow:0 34px 64px -42px rgba(26,26,28,.45); } :root[data-skin="contemporary"] .card-media img, :root[data-skin="contemporary"] .about-portrait img{ width:100%; height:auto; object-fit:contain; } :root[data-skin="contemporary"] .site-footer{ background:var(--surface); border-top:1px solid var(--line); color:var(--ink-soft); } :root[data-skin="contemporary"] .site-footer h4{ color:var(--ink); font-family:var(--sans); font-weight:700; letter-spacing:.14em; } :root[data-skin="contemporary"] .site-footer a{ color:var(--ink); text-decoration-color:var(--line-strong); text-underline-offset:6px; } /* ---- spotlight (one work on stage: darkness, isolation, centered program-note typography) */ body[data-struct="spotlight"] #skin-structure{ background:#0E0E10; } body[data-struct="spotlight"] .skin-structure-layer:nth-child(1){ inset:-20vh -15vw; background:radial-gradient(60% 40% at 50% 18%, rgba(242,240,234,.20), rgba(242,240,234,.07) 28%, transparent 62%); } :root[data-skin="spotlight"] .site-header{ background:rgba(14,14,16,.58); border-bottom:0; backdrop-filter:blur(12px); } :root[data-skin="spotlight"] .nav{ height:70px; justify-content:center; gap:clamp(24px,5vw,78px); } :root[data-skin="spotlight"] .brand{ color:var(--ink); font-size:23px; } :root[data-skin="spotlight"] .nav-links{ gap:clamp(28px,4vw,68px); } :root[data-skin="spotlight"] .nav-links a{ color:var(--ink-soft); font-family:var(--serif); font-size:16px; padding:8px 0; } :root[data-skin="spotlight"] .nav-links a::after{ height:1px; background:var(--ink); left:50%; transform:translateX(-50%); } :root[data-skin="spotlight"] .nav-right{ gap:14px; } :root[data-skin="spotlight"] .cart-btn{ color:var(--ink); border:1px solid var(--line-strong); border-radius:999px; padding:7px 14px; background:rgba(22,22,24,.72); } :root[data-skin="spotlight"] .hero{ padding-block:clamp(84px,14vw,178px) clamp(70px,10vw,138px); text-align:center; } :root[data-skin="spotlight"] .hero-grid{ display:block; max-width:1120px; } :root[data-skin="spotlight"] .hero h1{ color:var(--ink); font-size:clamp(52px,8.5vw,118px); max-width:11ch; margin:18px auto 22px; } :root[data-skin="spotlight"] .hero .lead{ color:var(--ink-soft); max-width:48ch; margin-inline:auto; } :root[data-skin="spotlight"] .hero .eyebrow, :root[data-skin="spotlight"] .section-head .eyebrow{ color:var(--ink-faint); } :root[data-skin="spotlight"] .hero-cta{ justify-content:center; gap:12px; } :root[data-skin="spotlight"] .hero-art{ margin:clamp(42px,7vw,92px) auto 0; max-width:980px; background:transparent; padding:0; border:0; border-radius:0; box-shadow:0 58px 110px -58px rgba(0,0,0,.95); } :root[data-skin="spotlight"] .hero-art img{ width:100%; height:auto; object-fit:contain; } :root[data-skin="spotlight"] .section{ padding-block:clamp(76px,11vw,148px); } :root[data-skin="spotlight"] .section--alt{ background:transparent; border-block:0; } :root[data-skin="spotlight"] .section--showcase{ background:#0E0E10; } :root[data-skin="spotlight"] .section-head{ display:block; text-align:center; margin-inline:auto; max-width:760px; } :root[data-skin="spotlight"] .section-head h2{ color:var(--ink); font-size:clamp(36px,6vw,78px); margin-inline:auto; } :root[data-skin="spotlight"] .btn, :root[data-skin="spotlight"] input, :root[data-skin="spotlight"] select, :root[data-skin="spotlight"] textarea{ border-radius:999px; } :root[data-skin="spotlight"] .btn-primary, :root[data-skin="spotlight"] .btn--accent{ background:var(--ink); color:#0E0E10; border-color:var(--ink); } :root[data-skin="spotlight"] .btn-ghost, :root[data-skin="spotlight"] .btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line-strong); } :root[data-skin="spotlight"] input, :root[data-skin="spotlight"] select, :root[data-skin="spotlight"] textarea{ background:#161618; border-color:var(--line-strong); color:var(--ink); } :root[data-skin="spotlight"] .card-media, :root[data-skin="spotlight"] .about-portrait{ background:transparent; padding:0; border:0; border-radius:0; box-shadow:0 50px 100px -54px rgba(0,0,0,.9); } :root[data-skin="spotlight"] .card-media img, :root[data-skin="spotlight"] .about-portrait img{ width:100%; height:auto; object-fit:contain; } :root[data-skin="spotlight"] .site-footer{ background:transparent; border-top:1px solid var(--line); color:var(--ink-soft); text-align:center; } :root[data-skin="spotlight"] .site-footer h4{ color:var(--ink-faint); font-family:var(--mono); letter-spacing:.18em; } :root[data-skin="spotlight"] .site-footer a{ color:var(--ink); text-decoration-color:var(--line-strong); text-underline-offset:7px; } /* ---- poster (type-image fusion: exhibition wall, overprint drama, graphic sheet edges) */ body[data-struct="poster"] #skin-structure{ background:#100F12; } body[data-struct="poster"] .skin-structure-layer:nth-child(1){ top:8vh; left:-8vw; width:48vw; height:64vh; background:linear-gradient(135deg, rgba(244,241,234,.11), rgba(244,241,234,0)); transform:skewY(-8deg); } body[data-struct="poster"] .skin-structure-layer:nth-child(2){ right:-10vw; bottom:6vh; width:55vw; height:52vh; background:linear-gradient(135deg, rgba(124,121,112,.20), rgba(124,121,112,0)); transform:skewY(7deg); } :root[data-skin="poster"] .site-header{ background:#100F12; border-bottom:5px solid var(--ink); box-shadow:none; } :root[data-skin="poster"] .nav{ height:82px; } :root[data-skin="poster"] .brand{ color:var(--ink); font-size:31px; line-height:.9; } :root[data-skin="poster"] .nav-links{ gap:6px; } :root[data-skin="poster"] .nav-links a{ color:#100F12; background:var(--ink); font-family:var(--sans); font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; padding:10px 13px; } :root[data-skin="poster"] .nav-links a::after{ display:none; } :root[data-skin="poster"] .nav-right{ gap:10px; } :root[data-skin="poster"] .cart-btn{ color:#100F12; background:var(--ink); border:2px solid var(--ink); border-radius:0; padding:9px 12px; text-transform:uppercase; letter-spacing:.08em; } :root[data-skin="poster"] .hero{ padding-block:clamp(62px,10vw,124px) clamp(42px,7vw,88px); } :root[data-skin="poster"] .hero-grid{ grid-template-columns:minmax(280px,1.15fr) minmax(280px,.85fr); gap:clamp(18px,4vw,58px); align-items:stretch; } :root[data-skin="poster"] .hero h1{ color:var(--ink); font-size:clamp(62px,10vw,150px); line-height:.82; max-width:8ch; margin:14px 0 20px; text-transform:none; } :root[data-skin="poster"] .hero .lead{ color:var(--ink-soft); max-width:34ch; font-size:clamp(17px,2vw,22px); } :root[data-skin="poster"] .hero .eyebrow, :root[data-skin="poster"] .section-head .eyebrow{ color:var(--ink); background:rgba(244,241,234,.10); display:inline-block; padding:5px 8px; } :root[data-skin="poster"] .hero-cta{ gap:8px; } :root[data-skin="poster"] .hero-art{ background:#100F12; padding:0; border:5px solid var(--ink); border-radius:0; box-shadow:18px 18px 0 rgba(244,241,234,.10); } :root[data-skin="poster"] .hero-art img{ width:100%; height:auto; object-fit:contain; } :root[data-skin="poster"] .section{ padding-block:clamp(54px,8vw,112px); } :root[data-skin="poster"] .section--alt{ background:#19181C; border-block:5px solid var(--ink); } :root[data-skin="poster"] .section--showcase{ background:#100F12; } :root[data-skin="poster"] .section-head{ align-items:flex-start; border-bottom:5px solid var(--ink); padding-bottom:clamp(16px,2vw,28px); } :root[data-skin="poster"] .section-head h2{ color:var(--ink); font-size:clamp(44px,7vw,100px); line-height:.9; max-width:9ch; } :root[data-skin="poster"] .btn, :root[data-skin="poster"] input, :root[data-skin="poster"] select, :root[data-skin="poster"] textarea{ border-radius:0; } :root[data-skin="poster"] .btn-primary, :root[data-skin="poster"] .btn--accent{ background:var(--ink); color:#100F12; border:3px solid var(--ink); } :root[data-skin="poster"] .btn-ghost, :root[data-skin="poster"] .btn--ghost{ background:transparent; color:var(--ink); border:3px solid var(--ink); } :root[data-skin="poster"] input, :root[data-skin="poster"] select, :root[data-skin="poster"] textarea{ background:#19181C; border:3px solid var(--ink); color:var(--ink); } :root[data-skin="poster"] .card-media, :root[data-skin="poster"] .about-portrait{ background:#100F12; padding:0; border:5px solid var(--ink); border-radius:0; box-shadow:14px 14px 0 rgba(244,241,234,.10); } :root[data-skin="poster"] .card-media img, :root[data-skin="poster"] .about-portrait img{ width:100%; height:auto; object-fit:contain; } :root[data-skin="poster"] .site-footer{ background:#100F12; color:var(--ink); border-top:5px solid var(--ink); } :root[data-skin="poster"] .site-footer h4{ color:var(--ink); font-family:var(--sans); font-weight:800; letter-spacing:.12em; } :root[data-skin="poster"] .site-footer a{ color:var(--ink); text-decoration-thickness:2px; text-underline-offset:5px; } @media (max-width:820px){ :root[data-skin="poster"] .hero-grid{ grid-template-columns:1fr; } } /* ===== p02-dark-framed.css ===== */ /* ---- dark-gallery (white cube at night: chrome withdraws so photographs float as luminous objects). Uses 2 scaffold layers. ---- */ body[data-struct="dark-gallery"] #skin-structure{ background:#0C0C0E; } body[data-struct="dark-gallery"] .skin-structure-layer:nth-child(1){ background:radial-gradient(circle at 50% 16%, rgba(127,182,184,.16), transparent 32%), radial-gradient(circle at 82% 62%, rgba(242,240,234,.06), transparent 26%); opacity:.9; } body[data-struct="dark-gallery"] .skin-structure-layer:nth-child(2){ background-image:linear-gradient(90deg, transparent 0 calc(50% - 1px), rgba(242,240,234,.035) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)); opacity:.7; } :root[data-skin="dark-gallery"] .site-header{ background:rgba(12,12,14,.84); border-bottom:1px solid rgba(127,182,184,.18); box-shadow:0 24px 60px -48px #000; backdrop-filter:blur(16px); } :root[data-skin="dark-gallery"] .nav{ min-height:78px; } :root[data-skin="dark-gallery"] .brand{ font-family:var(--serif); font-weight:400; letter-spacing:.08em; color:var(--ink); text-shadow:0 0 22px rgba(127,182,184,.18); } :root[data-skin="dark-gallery"] .nav-links{ gap:clamp(22px,3.4vw,52px); } :root[data-skin="dark-gallery"] .nav-links a{ position:relative; color:var(--ink-soft); font-size:13px; letter-spacing:.12em; text-transform:uppercase; padding:10px 0; } :root[data-skin="dark-gallery"] .nav-links a::after{ height:1px; background:var(--accent); box-shadow:0 0 12px rgba(127,182,184,.8); } :root[data-skin="dark-gallery"] .nav-right{ gap:14px; } :root[data-skin="dark-gallery"] .cart-btn{ color:var(--ink); background:rgba(20,20,22,.72); border:1px solid var(--line); border-radius:999px; box-shadow:0 12px 28px -24px #000; } :root[data-skin="dark-gallery"] .hero{ padding-block:clamp(96px,15vw,220px) clamp(72px,10vw,150px); background:linear-gradient(180deg, rgba(127,182,184,.08), transparent 46%); } :root[data-skin="dark-gallery"] .hero-grid{ grid-template-columns:minmax(240px,.78fr) minmax(280px,1.22fr); gap:clamp(44px,8vw,122px); align-items:center; } :root[data-skin="dark-gallery"] .hero .eyebrow, :root[data-skin="dark-gallery"] .eyebrow{ color:var(--accent-deep); font-family:var(--mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase; } :root[data-skin="dark-gallery"] .hero h1{ max-width:12ch; font-family:var(--serif); font-weight:400; line-height:.98; letter-spacing:-.025em; color:var(--ink); text-shadow:0 0 34px rgba(242,240,234,.10); } :root[data-skin="dark-gallery"] .hero .lead{ max-width:50ch; color:var(--ink-soft); font-size:clamp(18px,1.55vw,23px); line-height:1.75; } :root[data-skin="dark-gallery"] .hero-cta{ gap:16px; margin-top:clamp(28px,4vw,56px); } :root[data-skin="dark-gallery"] .hero-art{ aspect-ratio:auto; overflow:visible; background:#050506; padding:clamp(8px,1.2vw,16px); border:1px solid rgba(127,182,184,.18); border-radius:2px; box-shadow:0 0 0 1px rgba(255,255,255,.03), 0 34px 90px -48px #000, 0 0 60px -34px rgba(127,182,184,.65); } :root[data-skin="dark-gallery"] .hero-art img, :root[data-skin="dark-gallery"] .about-portrait img{ height:auto; object-fit:contain; } :root[data-skin="dark-gallery"] .section{ padding-block:clamp(82px,12vw,178px); background:transparent; } :root[data-skin="dark-gallery"] .section--alt{ background:rgba(20,20,22,.74); border-block:1px solid rgba(127,182,184,.12); } :root[data-skin="dark-gallery"] .section--showcase{ background:#09090B; } :root[data-skin="dark-gallery"] .section-head{ max-width:960px; margin-bottom:clamp(46px,7vw,104px); padding-left:clamp(16px,3vw,44px); border-left:1px solid rgba(127,182,184,.42); } :root[data-skin="dark-gallery"] .section-head h2{ font-family:var(--serif); font-weight:400; line-height:1; letter-spacing:-.02em; color:var(--ink); } :root[data-skin="dark-gallery"] .btn{ border-radius:999px; border:1px solid rgba(127,182,184,.42); background:rgba(20,20,22,.76); color:var(--ink); box-shadow:0 16px 38px -28px #000; } :root[data-skin="dark-gallery"] .btn-primary{ background:var(--accent); color:#071011; border-color:var(--accent); box-shadow:0 0 32px -14px rgba(127,182,184,.9); } :root[data-skin="dark-gallery"] .btn-ghost{ background:transparent; color:var(--accent-deep); } :root[data-skin="dark-gallery"] input, :root[data-skin="dark-gallery"] select, :root[data-skin="dark-gallery"] textarea{ border-radius:2px; background:#0A0A0C; border:1px solid var(--line-strong); color:var(--ink); box-shadow:inset 0 1px 0 rgba(255,255,255,.03); } :root[data-skin="dark-gallery"] .card-media, :root[data-skin="dark-gallery"] .about-portrait{ aspect-ratio:auto; overflow:visible; background:#050506; padding:clamp(6px,1vw,12px); border:1px solid rgba(127,182,184,.16); border-radius:2px; box-shadow:0 26px 68px -42px #000, 0 0 42px -32px rgba(127,182,184,.7); } :root[data-skin="dark-gallery"] .site-footer{ background:#08080A; color:var(--ink-soft); border-top:1px solid rgba(127,182,184,.18); box-shadow:0 -28px 70px -60px rgba(127,182,184,.5); } :root[data-skin="dark-gallery"] .site-footer h4{ color:var(--accent-deep); font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; } :root[data-skin="dark-gallery"] .site-footer a{ color:var(--ink-soft); text-decoration-color:var(--accent); text-underline-offset:6px; } /* ---- duotone (print restraint: the page becomes a tonal proof sheet, with colour held back until attention). Uses 1 scaffold layer. ---- */ body[data-struct="duotone"] .skin-structure-layer:nth-child(1){ background-image:repeating-linear-gradient(0deg, rgba(23,22,19,.045) 0 1px, transparent 1px 18px), linear-gradient(90deg, rgba(23,22,19,.08) 0 1px, transparent 1px); background-size:auto, 50% 100%; opacity:.8; } :root[data-skin="duotone"] .site-header{ background:rgba(237,235,228,.92); border-bottom:1px solid var(--line-strong); box-shadow:none; backdrop-filter:blur(8px); } :root[data-skin="duotone"] .nav{ min-height:72px; } :root[data-skin="duotone"] .brand{ font-family:var(--sans); font-weight:700; letter-spacing:-.02em; color:var(--ink); } :root[data-skin="duotone"] .nav-links{ gap:clamp(18px,3vw,44px); } :root[data-skin="duotone"] .nav-links a{ position:relative; color:var(--ink-soft); font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; padding:8px 0; } :root[data-skin="duotone"] .nav-links a::after{ height:2px; background:var(--ink); } :root[data-skin="duotone"] .nav-right{ gap:12px; } :root[data-skin="duotone"] .cart-btn{ color:var(--ink); background:var(--surface); border:1px solid var(--line-strong); border-radius:0; box-shadow:4px 4px 0 var(--surface-2); } :root[data-skin="duotone"] .hero{ padding-block:clamp(76px,11vw,156px); background:linear-gradient(90deg, var(--surface-2) 0 36%, transparent 36% 100%); } :root[data-skin="duotone"] .hero-grid{ grid-template-columns:minmax(240px,.95fr) minmax(280px,1.05fr); gap:clamp(32px,6vw,86px); align-items:end; } :root[data-skin="duotone"] .hero .eyebrow, :root[data-skin="duotone"] .eyebrow{ color:var(--ink-faint); font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; } :root[data-skin="duotone"] .hero h1{ font-family:var(--sans); font-weight:800; line-height:.94; letter-spacing:-.055em; color:var(--ink); } :root[data-skin="duotone"] .hero .lead{ max-width:48ch; color:var(--ink-soft); font-size:clamp(17px,1.45vw,21px); line-height:1.62; } :root[data-skin="duotone"] .hero-cta{ gap:10px; margin-top:clamp(24px,4vw,52px); } :root[data-skin="duotone"] .hero-art{ aspect-ratio:auto; overflow:visible; background:var(--surface); padding:clamp(12px,1.6vw,22px); border:1px solid var(--line-strong); border-radius:0; box-shadow:0 18px 36px -28px rgba(23,22,19,.5); } :root[data-skin="duotone"] .hero-art img, :root[data-skin="duotone"] .about-portrait img{ height:auto; object-fit:contain; filter:grayscale(1) contrast(1.06); } :root[data-skin="duotone"] .section{ padding-block:clamp(68px,9vw,132px); background:transparent; } :root[data-skin="duotone"] .section--alt{ background:var(--surface); border-block:1px solid var(--line); } :root[data-skin="duotone"] .section--showcase{ background:var(--bg); } :root[data-skin="duotone"] .section-head{ max-width:none; display:grid; grid-template-columns:minmax(120px,.28fr) minmax(260px,.72fr); gap:clamp(18px,4vw,64px); align-items:end; padding-bottom:18px; border-bottom:2px solid var(--ink); } :root[data-skin="duotone"] .section-head h2{ font-family:var(--sans); font-weight:800; letter-spacing:-.045em; line-height:.96; color:var(--ink); } :root[data-skin="duotone"] .btn{ border-radius:0; border:2px solid var(--ink); background:var(--surface); color:var(--ink); box-shadow:4px 4px 0 var(--surface-2); font-family:var(--mono); letter-spacing:.08em; text-transform:uppercase; } :root[data-skin="duotone"] .btn-primary{ background:var(--ink); color:var(--bg); border-color:var(--ink); } :root[data-skin="duotone"] .btn-ghost{ background:transparent; color:var(--ink); } :root[data-skin="duotone"] input, :root[data-skin="duotone"] select, :root[data-skin="duotone"] textarea{ border-radius:0; background:var(--surface); border:2px solid var(--line-strong); color:var(--ink); box-shadow:none; } :root[data-skin="duotone"] .card-media, :root[data-skin="duotone"] .about-portrait{ aspect-ratio:auto; overflow:visible; background:var(--surface); padding:clamp(10px,1.4vw,18px); border:1px solid var(--line-strong); border-radius:0; box-shadow:0 14px 34px -24px rgba(23,22,19,.45); } :root[data-skin="duotone"] .site-footer{ background:var(--ink); color:var(--bg); border-top:0; } :root[data-skin="duotone"] .site-footer h4{ color:var(--bg); font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; } :root[data-skin="duotone"] .site-footer a{ color:var(--surface); text-decoration-color:var(--ink-faint); text-underline-offset:5px; } /* ---- slate (palette as structure: cool cinematic calm built from blue-grey depth and quiet bands). Uses 2 scaffold layers. ---- */ body[data-struct="slate"] #skin-structure{ background:#1B2027; } body[data-struct="slate"] .skin-structure-layer:nth-child(1){ background:linear-gradient(180deg, rgba(143,176,196,.12), transparent 38%, rgba(8,12,17,.34)); } body[data-struct="slate"] .skin-structure-layer:nth-child(2){ background:radial-gradient(ellipse at 78% 18%, rgba(170,198,214,.13), transparent 34%), radial-gradient(ellipse at 22% 84%, rgba(8,12,17,.42), transparent 36%); opacity:.85; } :root[data-skin="slate"] .site-header{ background:rgba(27,32,39,.88); border-bottom:1px solid rgba(143,176,196,.16); box-shadow:0 18px 48px -40px #000; backdrop-filter:blur(14px); } :root[data-skin="slate"] .nav{ min-height:76px; } :root[data-skin="slate"] .brand{ font-family:var(--serif); font-weight:400; letter-spacing:.04em; color:var(--ink); } :root[data-skin="slate"] .nav-links{ gap:clamp(20px,3vw,46px); } :root[data-skin="slate"] .nav-links a{ position:relative; color:var(--ink-soft); letter-spacing:.08em; padding:9px 0; } :root[data-skin="slate"] .nav-links a::after{ height:1px; background:var(--accent-deep); box-shadow:0 0 14px rgba(143,176,196,.55); } :root[data-skin="slate"] .nav-right{ gap:14px; } :root[data-skin="slate"] .cart-btn{ color:var(--ink); background:var(--surface); border:1px solid var(--line-strong); border-radius:3px; box-shadow:0 16px 36px -28px #000; } :root[data-skin="slate"] .hero{ padding-block:clamp(88px,13vw,190px) clamp(72px,10vw,142px); background:linear-gradient(120deg, rgba(143,176,196,.12) 0 34%, transparent 34% 100%); } :root[data-skin="slate"] .hero-grid{ grid-template-columns:minmax(240px,.86fr) minmax(280px,1.14fr); gap:clamp(38px,7vw,104px); align-items:center; } :root[data-skin="slate"] .hero .eyebrow, :root[data-skin="slate"] .eyebrow{ color:var(--accent-deep); font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; } :root[data-skin="slate"] .hero h1{ font-family:var(--serif); font-weight:400; line-height:1.02; letter-spacing:-.03em; color:var(--ink); } :root[data-skin="slate"] .hero .lead{ max-width:52ch; color:var(--ink-soft); font-size:clamp(18px,1.45vw,22px); line-height:1.72; } :root[data-skin="slate"] .hero-cta{ gap:14px; margin-top:clamp(26px,4vw,58px); } :root[data-skin="slate"] .hero-art{ aspect-ratio:auto; overflow:visible; background:#12161C; padding:clamp(8px,1.2vw,16px); border:1px solid rgba(143,176,196,.18); border-radius:4px; box-shadow:0 34px 80px -46px #000; } :root[data-skin="slate"] .hero-art img, :root[data-skin="slate"] .about-portrait img{ height:auto; object-fit:contain; } :root[data-skin="slate"] .section{ padding-block:clamp(78px,11vw,160px); background:transparent; } :root[data-skin="slate"] .section--alt{ background:rgba(35,42,51,.76); border-block:1px solid rgba(143,176,196,.13); } :root[data-skin="slate"] .section--showcase{ background:#12161C; } :root[data-skin="slate"] .section-head{ max-width:900px; margin-bottom:clamp(42px,7vw,96px); padding-bottom:18px; border-bottom:1px solid rgba(143,176,196,.28); } :root[data-skin="slate"] .section-head h2{ font-family:var(--serif); font-weight:400; line-height:1.04; letter-spacing:-.025em; color:var(--ink); } :root[data-skin="slate"] .btn{ border-radius:3px; border:1px solid var(--line-strong); background:var(--surface); color:var(--ink); box-shadow:0 16px 34px -28px #000; } :root[data-skin="slate"] .btn-primary{ background:var(--accent); color:#101820; border-color:var(--accent); } :root[data-skin="slate"] .btn-ghost{ background:transparent; color:var(--accent-deep); } :root[data-skin="slate"] input, :root[data-skin="slate"] select, :root[data-skin="slate"] textarea{ border-radius:3px; background:#151A20; border:1px solid var(--line-strong); color:var(--ink); box-shadow:inset 0 1px 0 rgba(255,255,255,.03); } :root[data-skin="slate"] .card-media, :root[data-skin="slate"] .about-portrait{ aspect-ratio:auto; overflow:visible; background:#12161C; padding:clamp(7px,1vw,14px); border:1px solid rgba(143,176,196,.16); border-radius:4px; box-shadow:0 24px 58px -36px #000; } :root[data-skin="slate"] .site-footer{ background:#12161C; color:var(--ink-soft); border-top:1px solid rgba(143,176,196,.18); } :root[data-skin="slate"] .site-footer h4{ color:var(--accent-deep); font-family:var(--serif); font-weight:400; letter-spacing:.06em; } :root[data-skin="slate"] .site-footer a{ color:var(--ink-soft); text-decoration-color:var(--accent); text-underline-offset:6px; } /* ---- framed (balanced passe-partout: the whole site becomes a dark wall of mounted prints). Uses 2 scaffold layers. ---- */ body[data-struct="framed"] #skin-structure{ background:#0C0C0E; } body[data-struct="framed"] .skin-structure-layer:nth-child(1){ background-image:linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px), linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px); background-size:clamp(120px,16vw,220px) clamp(120px,16vw,220px); opacity:.46; } body[data-struct="framed"] .skin-structure-layer:nth-child(2){ inset:clamp(18px,2.5vw,44px); border:1px solid rgba(255,255,255,.08); box-shadow:inset 0 0 0 1px rgba(0,0,0,.42); } :root[data-skin="framed"] .site-header{ background:rgba(12,12,14,.92); border-bottom:1px solid rgba(255,255,255,.16); box-shadow:0 18px 50px -42px #000; } :root[data-skin="framed"] .nav{ min-height:78px; } :root[data-skin="framed"] .brand{ font-family:var(--serif); font-weight:600; color:var(--ink); letter-spacing:.04em; } :root[data-skin="framed"] .nav-links{ gap:clamp(18px,3vw,44px); } :root[data-skin="framed"] .nav-links a{ position:relative; color:var(--ink-soft); letter-spacing:.1em; text-transform:uppercase; font-size:12px; padding:9px 0; } :root[data-skin="framed"] .nav-links a::after{ height:2px; background:#fff; } :root[data-skin="framed"] .nav-right{ gap:14px; } :root[data-skin="framed"] .cart-btn{ color:var(--ink); background:#fff; border:1px solid rgba(0,0,0,.18); border-radius:1px; box-shadow:0 12px 30px -22px #000; } :root[data-skin="framed"] .hero{ padding-block:clamp(82px,12vw,180px); background:linear-gradient(90deg, rgba(255,255,255,.10) 0 16%, transparent 16% 100%); } :root[data-skin="framed"] .hero-grid{ grid-template-columns:minmax(240px,.82fr) minmax(280px,1.18fr); gap:clamp(36px,7vw,108px); align-items:center; } :root[data-skin="framed"] .hero .eyebrow, :root[data-skin="framed"] .eyebrow{ color:var(--ink-faint); font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; } :root[data-skin="framed"] .hero h1{ font-family:var(--serif); font-weight:600; line-height:1.02; letter-spacing:-.02em; color:var(--ink); } :root[data-skin="framed"] .hero .lead{ max-width:50ch; color:var(--ink-soft); font-size:clamp(18px,1.45vw,22px); line-height:1.68; } :root[data-skin="framed"] .hero-cta{ gap:14px; margin-top:clamp(26px,4vw,54px); } :root[data-skin="framed"] .hero-art{ aspect-ratio:auto; overflow:visible; background:#fff; padding:clamp(12px,1.7vw,24px); border:1px solid rgba(0,0,0,.14); border-radius:0; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08), 0 32px 76px -42px #000; } :root[data-skin="framed"] .hero-art img, :root[data-skin="framed"] .about-portrait img{ height:auto; object-fit:contain; } :root[data-skin="framed"] .section{ padding-block:clamp(76px,10vw,148px); background:transparent; } :root[data-skin="framed"] .section--alt{ background:rgba(20,20,22,.78); border-block:1px solid rgba(255,255,255,.10); } :root[data-skin="framed"] .section--showcase{ background:#0C0C0E; } :root[data-skin="framed"] .section-head{ max-width:none; padding:clamp(18px,2.5vw,34px); border:1px solid rgba(255,255,255,.14); margin-bottom:clamp(42px,7vw,96px); background:rgba(12,12,14,.64); } :root[data-skin="framed"] .section-head h2{ font-family:var(--serif); font-weight:600; letter-spacing:-.02em; line-height:1.02; color:var(--ink); } :root[data-skin="framed"] .btn{ border-radius:1px; border:1px solid rgba(255,255,255,.24); background:var(--surface); color:var(--ink); box-shadow:none; } :root[data-skin="framed"] .btn-primary{ background:#fff; color:#0C0C0E; border-color:#fff; } :root[data-skin="framed"] .btn-ghost{ background:transparent; color:var(--ink); } :root[data-skin="framed"] input, :root[data-skin="framed"] select, :root[data-skin="framed"] textarea{ border-radius:0; background:#101012; border:1px solid var(--line-strong); color:var(--ink); box-shadow:none; } :root[data-skin="framed"] .card-media, :root[data-skin="framed"] .about-portrait{ aspect-ratio:auto; overflow:visible; background:#fff; padding:clamp(10px,1.4vw,18px); border:1px solid rgba(0,0,0,.14); border-radius:0; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08), 0 24px 56px -34px #000; } :root[data-skin="framed"] .site-footer{ background:#0A0A0C; color:var(--ink-soft); border-top:1px solid rgba(255,255,255,.16); } :root[data-skin="framed"] .site-footer h4{ color:var(--ink); font-family:var(--serif); font-weight:600; } :root[data-skin="framed"] .site-footer a{ color:var(--ink-soft); text-decoration-color:#fff; text-underline-offset:6px; } /* ---- framed-wide (ceremonial passe-partout: oversized white margin slows the entire site into reverent viewing). Uses 2 scaffold layers. ---- */ body[data-struct="framed-wide"] #skin-structure{ background:#0C0C0E; } body[data-struct="framed-wide"] .skin-structure-layer:nth-child(1){ inset:clamp(26px,4vw,76px); border:clamp(10px,1.4vw,24px) solid rgba(255,255,255,.07); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); } body[data-struct="framed-wide"] .skin-structure-layer:nth-child(2){ background:radial-gradient(circle at 50% 8%, rgba(255,255,255,.08), transparent 34%); } :root[data-skin="framed-wide"] .site-header{ background:rgba(12,12,14,.94); border-bottom:clamp(8px,1vw,18px) solid #fff; box-shadow:0 24px 60px -42px #000; } :root[data-skin="framed-wide"] .nav{ min-height:92px; } :root[data-skin="framed-wide"] .brand{ font-family:var(--serif); font-weight:600; color:var(--ink); letter-spacing:.06em; } :root[data-skin="framed-wide"] .nav-links{ gap:clamp(24px,4vw,68px); } :root[data-skin="framed-wide"] .nav-links a{ position:relative; color:var(--ink-soft); letter-spacing:.14em; text-transform:uppercase; font-size:12px; padding:12px 0; } :root[data-skin="framed-wide"] .nav-links a::after{ height:3px; background:#fff; } :root[data-skin="framed-wide"] .nav-right{ gap:16px; } :root[data-skin="framed-wide"] .cart-btn{ color:#0C0C0E; background:#fff; border:0; border-radius:0; box-shadow:0 14px 32px -22px #000; } :root[data-skin="framed-wide"] .hero{ padding-block:clamp(110px,16vw,250px) clamp(92px,13vw,190px); background:linear-gradient(90deg, rgba(255,255,255,.16) 0 24%, transparent 24% 100%); } :root[data-skin="framed-wide"] .hero-grid{ grid-template-columns:minmax(230px,.72fr) minmax(300px,1.28fr); gap:clamp(54px,9vw,150px); align-items:center; } :root[data-skin="framed-wide"] .hero .eyebrow, :root[data-skin="framed-wide"] .eyebrow{ color:var(--ink-faint); font-family:var(--mono); font-size:10px; letter-spacing:.28em; text-transform:uppercase; } :root[data-skin="framed-wide"] .hero h1{ font-family:var(--serif); font-weight:500; line-height:1.06; letter-spacing:-.015em; color:var(--ink); } :root[data-skin="framed-wide"] .hero .lead{ max-width:46ch; color:var(--ink-soft); font-size:clamp(18px,1.35vw,21px); line-height:1.82; } :root[data-skin="framed-wide"] .hero-cta{ gap:18px; margin-top:clamp(34px,6vw,86px); } :root[data-skin="framed-wide"] .hero-art{ aspect-ratio:auto; overflow:visible; background:#fff; padding:clamp(20px,3vw,48px); border:1px solid rgba(0,0,0,.12); border-radius:0; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08), 0 42px 92px -44px #000; } :root[data-skin="framed-wide"] .hero-art img, :root[data-skin="framed-wide"] .about-portrait img{ height:auto; object-fit:contain; } :root[data-skin="framed-wide"] .section{ padding-block:clamp(104px,15vw,230px); background:transparent; } :root[data-skin="framed-wide"] .section--alt{ background:rgba(20,20,22,.72); border-block:clamp(8px,1vw,18px) solid #fff; } :root[data-skin="framed-wide"] .section--showcase{ background:#0C0C0E; } :root[data-skin="framed-wide"] .section-head{ max-width:880px; margin-inline:auto; text-align:center; margin-bottom:clamp(70px,11vw,154px); padding:clamp(24px,4vw,62px); border:clamp(8px,1vw,18px) solid #fff; background:rgba(12,12,14,.78); } :root[data-skin="framed-wide"] .section-head h2{ font-family:var(--serif); font-weight:500; letter-spacing:-.01em; line-height:1.08; color:var(--ink); } :root[data-skin="framed-wide"] .btn{ border-radius:0; border:1px solid rgba(255,255,255,.32); background:transparent; color:var(--ink); box-shadow:none; } :root[data-skin="framed-wide"] .btn-primary{ background:#fff; color:#0C0C0E; border-color:#fff; } :root[data-skin="framed-wide"] .btn-ghost{ background:transparent; color:var(--ink); } :root[data-skin="framed-wide"] input, :root[data-skin="framed-wide"] select, :root[data-skin="framed-wide"] textarea{ border-radius:0; background:#101012; border:1px solid rgba(255,255,255,.26); color:var(--ink); box-shadow:none; } :root[data-skin="framed-wide"] .card-media, :root[data-skin="framed-wide"] .about-portrait{ aspect-ratio:auto; overflow:visible; background:#fff; padding:clamp(18px,2.6vw,42px); border:1px solid rgba(0,0,0,.14); border-radius:0; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08), 0 32px 70px -34px #000; } :root[data-skin="framed-wide"] .site-footer{ background:#0A0A0C; color:var(--ink-soft); border-top:clamp(10px,1.2vw,22px) solid #fff; } :root[data-skin="framed-wide"] .site-footer h4{ color:var(--ink); font-family:var(--serif); font-weight:500; letter-spacing:.04em; } :root[data-skin="framed-wide"] .site-footer a{ color:var(--ink-soft); text-decoration-color:#fff; text-underline-offset:7px; } /* ---- framed-thin (contemporary print edge: framing stays visible but speeds the wall and interface). Uses 1 scaffold layer. ---- */ body[data-struct="framed-thin"] #skin-structure{ background:#0C0C0E; } body[data-struct="framed-thin"] .skin-structure-layer:nth-child(1){ background-image:linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px), linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px); background-size:72px 72px; opacity:.35; } :root[data-skin="framed-thin"] .site-header{ background:rgba(12,12,14,.9); border-bottom:1px solid rgba(255,255,255,.22); box-shadow:none; } :root[data-skin="framed-thin"] .nav{ min-height:68px; } :root[data-skin="framed-thin"] .brand{ font-family:var(--sans); font-weight:600; color:var(--ink); letter-spacing:.01em; } :root[data-skin="framed-thin"] .nav-links{ gap:clamp(16px,2.6vw,38px); } :root[data-skin="framed-thin"] .nav-links a{ position:relative; color:var(--ink-soft); letter-spacing:.08em; text-transform:uppercase; font-size:12px; padding:7px 0; } :root[data-skin="framed-thin"] .nav-links a::after{ height:1px; background:#fff; } :root[data-skin="framed-thin"] .nav-right{ gap:12px; } :root[data-skin="framed-thin"] .cart-btn{ color:var(--ink); background:transparent; border:1px solid rgba(255,255,255,.26); border-radius:0; box-shadow:none; } :root[data-skin="framed-thin"] .hero{ padding-block:clamp(70px,10vw,142px); background:linear-gradient(90deg, rgba(255,255,255,.055) 0 8%, transparent 8% 100%); } :root[data-skin="framed-thin"] .hero-grid{ grid-template-columns:minmax(240px,.92fr) minmax(280px,1.08fr); gap:clamp(26px,5vw,72px); align-items:center; } :root[data-skin="framed-thin"] .hero .eyebrow, :root[data-skin="framed-thin"] .eyebrow{ color:var(--ink-faint); font-family:var(--mono); font-size:11px; letter-spacing:.17em; text-transform:uppercase; } :root[data-skin="framed-thin"] .hero h1{ font-family:var(--sans); font-weight:700; line-height:.98; letter-spacing:-.045em; color:var(--ink); } :root[data-skin="framed-thin"] .hero .lead{ max-width:52ch; color:var(--ink-soft); font-size:clamp(17px,1.4vw,21px); line-height:1.62; } :root[data-skin="framed-thin"] .hero-cta{ gap:10px; margin-top:clamp(22px,4vw,48px); } :root[data-skin="framed-thin"] .hero-art{ aspect-ratio:auto; overflow:visible; background:#fff; padding:clamp(4px,.7vw,9px); border:1px solid rgba(0,0,0,.14); border-radius:0; box-shadow:0 22px 56px -36px #000; } :root[data-skin="framed-thin"] .hero-art img, :root[data-skin="framed-thin"] .about-portrait img{ height:auto; object-fit:contain; } :root[data-skin="framed-thin"] .section{ padding-block:clamp(64px,9vw,124px); background:transparent; } :root[data-skin="framed-thin"] .section--alt{ background:rgba(20,20,22,.82); border-block:1px solid rgba(255,255,255,.12); } :root[data-skin="framed-thin"] .section--showcase{ background:#0C0C0E; } :root[data-skin="framed-thin"] .section-head{ max-width:none; padding-bottom:16px; border-bottom:1px solid rgba(255,255,255,.24); margin-bottom:clamp(34px,6vw,78px); } :root[data-skin="framed-thin"] .section-head h2{ font-family:var(--sans); font-weight:700; letter-spacing:-.04em; line-height:.98; color:var(--ink); } :root[data-skin="framed-thin"] .btn{ border-radius:0; border:1px solid rgba(255,255,255,.28); background:transparent; color:var(--ink); box-shadow:none; font-weight:600; } :root[data-skin="framed-thin"] .btn-primary{ background:#fff; color:#0C0C0E; border-color:#fff; } :root[data-skin="framed-thin"] .btn-ghost{ background:transparent; color:var(--ink); } :root[data-skin="framed-thin"] input, :root[data-skin="framed-thin"] select, :root[data-skin="framed-thin"] textarea{ border-radius:0; background:#101012; border:1px solid rgba(255,255,255,.22); color:var(--ink); box-shadow:none; } :root[data-skin="framed-thin"] .card-media, :root[data-skin="framed-thin"] .about-portrait{ aspect-ratio:auto; overflow:visible; background:#fff; padding:clamp(3px,.55vw,8px); border:1px solid rgba(0,0,0,.14); border-radius:0; box-shadow:0 20px 46px -32px #000; } :root[data-skin="framed-thin"] .site-footer{ background:#0A0A0C; color:var(--ink-soft); border-top:1px solid rgba(255,255,255,.22); } :root[data-skin="framed-thin"] .site-footer h4{ color:var(--ink); font-family:var(--sans); font-weight:700; letter-spacing:.04em; } :root[data-skin="framed-thin"] .site-footer a{ color:var(--ink-soft); text-decoration-color:#fff; text-underline-offset:5px; } /* ---- framed-mixed (distance-aware collection framing: wall view is ceremonial, close reading is lean). Uses 2 scaffold layers. ---- */ body[data-struct="framed-mixed"] #skin-structure{ background:#0C0C0E; } body[data-struct="framed-mixed"] .skin-structure-layer:nth-child(1){ background-image:linear-gradient(90deg, rgba(255,255,255,.07) 0 12%, transparent 12% 30%, rgba(255,255,255,.025) 30% 31%, transparent 31% 100%); background-size:360px 100%; opacity:.45; } body[data-struct="framed-mixed"] .skin-structure-layer:nth-child(2){ inset:clamp(18px,3vw,54px); border:1px solid rgba(255,255,255,.10); } :root[data-skin="framed-mixed"] .site-header{ background:rgba(12,12,14,.92); border-bottom:1px solid rgba(255,255,255,.16); box-shadow:0 18px 50px -42px #000; } :root[data-skin="framed-mixed"] .nav{ min-height:82px; } :root[data-skin="framed-mixed"] .brand{ font-family:var(--serif); font-weight:600; color:var(--ink); letter-spacing:.04em; } :root[data-skin="framed-mixed"] .nav-links{ gap:clamp(18px,3vw,48px); } :root[data-skin="framed-mixed"] .nav-links a{ position:relative; color:var(--ink-soft); letter-spacing:.11em; text-transform:uppercase; font-size:12px; padding:9px 0; } :root[data-skin="framed-mixed"] .nav-links a::after{ height:2px; background:#fff; } :root[data-skin="framed-mixed"] .nav-right{ gap:14px; } :root[data-skin="framed-mixed"] .cart-btn{ color:#0C0C0E; background:#fff; border:0; border-radius:0; box-shadow:0 12px 30px -22px #000; } :root[data-skin="framed-mixed"] .hero{ padding-block:clamp(92px,13vw,198px) clamp(76px,11vw,154px); background:linear-gradient(90deg, rgba(255,255,255,.14) 0 18%, transparent 18% 100%); } :root[data-skin="framed-mixed"] .hero-grid{ grid-template-columns:minmax(240px,.78fr) minmax(280px,1.22fr); gap:clamp(42px,8vw,126px); align-items:center; } :root[data-skin="framed-mixed"] .hero .eyebrow, :root[data-skin="framed-mixed"] .eyebrow{ color:var(--ink-faint); font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; } :root[data-skin="framed-mixed"] .hero h1{ font-family:var(--serif); font-weight:600; line-height:1.02; letter-spacing:-.02em; color:var(--ink); } :root[data-skin="framed-mixed"] .hero .lead{ max-width:50ch; color:var(--ink-soft); font-size:clamp(18px,1.45vw,22px); line-height:1.72; } :root[data-skin="framed-mixed"] .hero-cta{ gap:14px; margin-top:clamp(28px,5vw,62px); } :root[data-skin="framed-mixed"] .hero-art{ aspect-ratio:auto; overflow:visible; background:#fff; padding:clamp(18px,2.6vw,42px); border:1px solid rgba(0,0,0,.14); border-radius:0; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08), 0 36px 84px -42px #000; } :root[data-skin="framed-mixed"] .hero-art img, :root[data-skin="framed-mixed"] .about-portrait img{ height:auto; object-fit:contain; } :root[data-skin="framed-mixed"] .section{ padding-block:clamp(86px,12vw,176px); background:transparent; } :root[data-skin="framed-mixed"] .section--alt{ background:rgba(20,20,22,.78); border-block:1px solid rgba(255,255,255,.14); } :root[data-skin="framed-mixed"] .section--showcase{ background:#0C0C0E; } :root[data-skin="framed-mixed"] .section-head{ max-width:none; display:grid; grid-template-columns:minmax(180px,.36fr) minmax(260px,.64fr); gap:clamp(22px,5vw,84px); align-items:end; margin-bottom:clamp(52px,8vw,120px); padding:clamp(18px,3vw,42px); border:1px solid rgba(255,255,255,.14); background:rgba(12,12,14,.66); } :root[data-skin="framed-mixed"] .section-head h2{ font-family:var(--serif); font-weight:600; letter-spacing:-.02em; line-height:1.02; color:var(--ink); } :root[data-skin="framed-mixed"] .btn{ border-radius:0; border:1px solid rgba(255,255,255,.26); background:var(--surface); color:var(--ink); box-shadow:none; } :root[data-skin="framed-mixed"] .btn-primary{ background:#fff; color:#0C0C0E; border-color:#fff; } :root[data-skin="framed-mixed"] .btn-ghost{ background:transparent; color:var(--ink); } :root[data-skin="framed-mixed"] input, :root[data-skin="framed-mixed"] select, :root[data-skin="framed-mixed"] textarea{ border-radius:0; background:#101012; border:1px solid rgba(255,255,255,.24); color:var(--ink); box-shadow:none; } :root[data-skin="framed-mixed"] .card-media, :root[data-skin="framed-mixed"] .about-portrait{ aspect-ratio:auto; overflow:visible; background:#fff; padding:clamp(16px,2.4vw,40px); border:1px solid rgba(0,0,0,.14); border-radius:0; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08), 0 30px 70px -36px #000; } :root[data-skin="framed-mixed"] .site-footer{ background:#0A0A0C; color:var(--ink-soft); border-top:1px solid rgba(255,255,255,.16); } :root[data-skin="framed-mixed"] .site-footer h4{ color:var(--ink); font-family:var(--serif); font-weight:600; } :root[data-skin="framed-mixed"] .site-footer a{ color:var(--ink-soft); text-decoration-color:#fff; text-underline-offset:6px; } /* ===== p03-museum.css ===== */ /* ---- museum (white-cube restraint: wall space, placards, institutional quiet). Uses 0 scaffold layers. ---- */ :root[data-skin="museum"] .site-header{ background:color-mix(in srgb, var(--bg) 92%, white 8%); border-bottom:1px solid var(--line); box-shadow:0 1px 0 rgba(255,255,255,.55) inset; } :root[data-skin="museum"] .nav{ height:76px; } :root[data-skin="museum"] .brand{ font-family:var(--serif); font-style:italic; font-weight:500; letter-spacing:.01em; color:var(--ink); } :root[data-skin="museum"] .nav-links a{ color:var(--ink-soft); font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; } :root[data-skin="museum"] .nav-links a::after{ height:1px; background:var(--ink); } :root[data-skin="museum"] .nav-right{ gap:14px; } :root[data-skin="museum"] .cart-btn{ border:1px solid var(--line); background:var(--surface); color:var(--ink); box-shadow:none; } :root[data-skin="museum"] .hero{ padding:clamp(78px,12vw,156px) 0 clamp(58px,8vw,112px); } :root[data-skin="museum"] .hero-grid{ grid-template-columns:minmax(0,.78fr) minmax(320px,1.22fr); gap:clamp(48px,7vw,108px); align-items:end; } :root[data-skin="museum"] .hero h1{ max-width:10ch; font-family:var(--serif); font-weight:400; letter-spacing:-.035em; line-height:.95; } :root[data-skin="museum"] .hero .lead{ max-width:36ch; color:var(--ink-soft); font-family:var(--serif); font-size:clamp(18px,2vw,24px); line-height:1.58; } :root[data-skin="museum"] .hero .eyebrow, :root[data-skin="museum"] .eyebrow{ color:var(--ink-faint); font-family:var(--mono); letter-spacing:.18em; } :root[data-skin="museum"] .hero-cta{ gap:12px; margin-top:clamp(24px,3vw,40px); } :root[data-skin="museum"] .hero-art{ background:transparent; border:0; border-radius:0; padding:0 0 clamp(26px,3vw,42px); box-shadow:none; } :root[data-skin="museum"] .hero-art::after{ content:""; display:block; width:min(180px,34%); height:1px; margin:18px auto 0; background:var(--line-strong); } :root[data-skin="museum"] .hero-art img, :root[data-skin="museum"] .about-portrait img{ width:100%; height:auto; object-fit:contain; } :root[data-skin="museum"] .section{ padding:clamp(64px,9vw,124px) 0; } :root[data-skin="museum"] .section--alt{ background:var(--surface); border-block:1px solid var(--line); } :root[data-skin="museum"] .section--showcase{ background:var(--bg); border-top:1px solid var(--line); } :root[data-skin="museum"] .section-head{ align-items:end; border-bottom:1px solid var(--line); padding-bottom:clamp(18px,2vw,28px); margin-bottom:clamp(38px,5vw,72px); } :root[data-skin="museum"] .section-head h2{ font-family:var(--serif); font-weight:400; letter-spacing:-.025em; color:var(--ink); } :root[data-skin="museum"] .btn, :root[data-skin="museum"] input, :root[data-skin="museum"] select, :root[data-skin="museum"] textarea{ border-radius:0; border-color:var(--line-strong); box-shadow:none; } :root[data-skin="museum"] .btn-primary{ background:var(--ink); border-color:var(--ink); color:var(--bg); } :root[data-skin="museum"] .btn-ghost, :root[data-skin="museum"] .btn--ghost{ background:transparent; color:var(--ink); } :root[data-skin="museum"] .card-media, :root[data-skin="museum"] .about-portrait{ background:transparent; border:0; border-radius:0; overflow:visible; padding:0; box-shadow:0 2px 2px rgba(0,0,0,.05), 0 24px 48px -32px rgba(0,0,0,.35); } :root[data-skin="museum"] .about-portrait{ aspect-ratio:auto; position:relative; } :root[data-skin="museum"] .site-footer{ background:var(--surface); border-top:1px solid var(--line); margin-top:clamp(52px,7vw,96px); } :root[data-skin="museum"] .site-footer a{ color:var(--ink-soft); } :root[data-skin="museum"] .site-footer h4{ color:var(--ink); font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; } /* ---- salon (theatrical abundance: dark room, gilt rails, crowded public spectacle). Uses 2 scaffold layers. ---- */ body[data-struct="salon"] #skin-structure{ background:#0E0D10; } body[data-struct="salon"] .skin-structure-layer:nth-child(1){ background:radial-gradient(80vw 60vh at 50% -10%, rgba(201,162,75,.22), transparent 68%); } body[data-struct="salon"] .skin-structure-layer:nth-child(2){ background:linear-gradient(90deg, transparent 0 8vw, rgba(201,162,75,.12) 8vw calc(8vw + 1px), transparent calc(8vw + 1px) calc(100% - 8vw), rgba(201,162,75,.12) calc(100% - 8vw) calc(100% - 8vw + 1px), transparent calc(100% - 8vw + 1px)); } :root[data-skin="salon"] .site-header{ background:rgba(14,13,16,.94); border-bottom:1px solid color-mix(in srgb, var(--accent) 55%, transparent); box-shadow:0 18px 60px rgba(0,0,0,.55); } :root[data-skin="salon"] .nav{ height:82px; } :root[data-skin="salon"] .brand{ color:var(--accent-deep); font-family:var(--serif); font-style:italic; letter-spacing:.03em; } :root[data-skin="salon"] .nav-links a{ color:var(--ink-soft); font-family:var(--serif); font-size:15px; } :root[data-skin="salon"] .nav-links a::after{ height:2px; background:var(--accent); box-shadow:0 0 14px rgba(201,162,75,.5); } :root[data-skin="salon"] .nav-right{ gap:16px; } :root[data-skin="salon"] .cart-btn{ background:var(--accent-soft); border:1px solid var(--accent); color:var(--accent-deep); } :root[data-skin="salon"] .hero{ padding:clamp(62px,9vw,118px) 0 clamp(50px,7vw,94px); } :root[data-skin="salon"] .hero-grid{ grid-template-columns:.9fr 1.1fr; gap:clamp(24px,4vw,54px); align-items:center; } :root[data-skin="salon"] .hero h1{ font-family:var(--serif); font-weight:700; color:var(--ink); text-shadow:0 8px 34px rgba(0,0,0,.7); } :root[data-skin="salon"] .hero .lead{ color:var(--ink-soft); max-width:48ch; } :root[data-skin="salon"] .hero .eyebrow, :root[data-skin="salon"] .eyebrow{ color:var(--accent-deep); } :root[data-skin="salon"] .hero-cta{ gap:10px; } :root[data-skin="salon"] .hero-art{ background:var(--surface); border:1px solid rgba(201,162,75,.5); border-radius:2px; padding:clamp(10px,1.6vw,18px); box-shadow:0 36px 80px -32px rgba(0,0,0,.9), 0 0 0 6px rgba(201,162,75,.06); } :root[data-skin="salon"] .hero-art img, :root[data-skin="salon"] .about-portrait img{ width:100%; height:auto; object-fit:contain; } :root[data-skin="salon"] .section{ padding:clamp(42px,6vw,82px) 0; } :root[data-skin="salon"] .section--alt{ background:linear-gradient(180deg, var(--surface), var(--bg)); border-block:1px solid rgba(201,162,75,.22); } :root[data-skin="salon"] .section--showcase{ background:var(--bg); } :root[data-skin="salon"] .section-head{ border-bottom:1px solid rgba(201,162,75,.3); padding-bottom:18px; margin-bottom:clamp(24px,3vw,42px); } :root[data-skin="salon"] .section-head h2{ color:var(--ink); font-family:var(--serif); font-weight:700; } :root[data-skin="salon"] .btn, :root[data-skin="salon"] input, :root[data-skin="salon"] select, :root[data-skin="salon"] textarea{ border-radius:2px; border-color:rgba(201,162,75,.46); background:var(--surface); color:var(--ink); } :root[data-skin="salon"] .btn-primary{ background:var(--accent); border-color:var(--accent); color:#0E0D10; } :root[data-skin="salon"] .btn-ghost, :root[data-skin="salon"] .btn--ghost{ color:var(--accent-deep); } :root[data-skin="salon"] .card-media, :root[data-skin="salon"] .about-portrait{ background:#08070A; border:1px solid rgba(201,162,75,.42); border-radius:2px; overflow:visible; padding:clamp(8px,1.2vw,14px); box-shadow:0 30px 70px -26px rgba(0,0,0,.9); } :root[data-skin="salon"] .about-portrait{ aspect-ratio:auto; } :root[data-skin="salon"] .site-footer{ background:#09080B; border-top:1px solid var(--accent); color:var(--ink-soft); box-shadow:0 -24px 70px rgba(0,0,0,.35); } :root[data-skin="salon"] .site-footer a{ color:var(--accent-deep); } :root[data-skin="salon"] .site-footer h4{ color:var(--ink); font-family:var(--serif); } /* ---- plates (catalogue raisonne: one scholarly plate, caption apparatus, page logic). Uses 1 scaffold layer. ---- */ body[data-struct="plates"] .skin-structure-layer:nth-child(1){ background:linear-gradient(90deg, transparent 0 calc(50% - 1px), rgba(24,23,18,.055) calc(50% - 1px) 50%, rgba(255,255,255,.5) 50% calc(50% + 1px), transparent calc(50% + 1px)); } :root[data-skin="plates"] .site-header{ background:var(--bg); border-bottom:1px solid var(--line); } :root[data-skin="plates"] .nav{ height:72px; } :root[data-skin="plates"] .brand{ font-family:var(--serif); font-weight:600; color:var(--ink); } :root[data-skin="plates"] .nav-links a{ color:var(--ink-soft); font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; } :root[data-skin="plates"] .nav-links a::after{ height:1px; background:var(--line-strong); } :root[data-skin="plates"] .nav-right{ gap:12px; } :root[data-skin="plates"] .cart-btn{ background:var(--surface); border:1px solid var(--line); color:var(--ink); } :root[data-skin="plates"] .hero{ padding:clamp(70px,10vw,138px) 0 clamp(58px,8vw,106px); } :root[data-skin="plates"] .hero-grid{ grid-template-columns:minmax(0,38ch) minmax(340px,820px); gap:clamp(40px,6vw,92px); align-items:start; } :root[data-skin="plates"] .hero h1{ font-family:var(--serif); font-weight:400; font-style:italic; line-height:1.02; max-width:11ch; } :root[data-skin="plates"] .hero .lead{ font-family:var(--serif); color:var(--ink-soft); line-height:1.75; max-width:42ch; } :root[data-skin="plates"] .hero .eyebrow, :root[data-skin="plates"] .eyebrow{ color:var(--ink-faint); font-family:var(--mono); } :root[data-skin="plates"] .hero-art{ background:transparent; border:0; border-radius:0; padding:0; box-shadow:0 24px 54px -32px rgba(0,0,0,.28); } :root[data-skin="plates"] .hero-art img, :root[data-skin="plates"] .about-portrait img{ width:100%; height:auto; object-fit:contain; } :root[data-skin="plates"] .section{ padding:clamp(60px,8vw,112px) 0; } :root[data-skin="plates"] .section--alt{ background:var(--surface); border-block:1px solid var(--line); } :root[data-skin="plates"] .section--showcase{ background:var(--bg); } :root[data-skin="plates"] .section-head{ display:block; max-width:820px; margin-inline:auto; text-align:center; border-bottom:1px solid var(--line); padding-bottom:clamp(20px,2.5vw,34px); } :root[data-skin="plates"] .section-head h2{ font-family:var(--serif); font-style:italic; font-weight:400; color:var(--ink); } :root[data-skin="plates"] .btn, :root[data-skin="plates"] input, :root[data-skin="plates"] select, :root[data-skin="plates"] textarea{ border-radius:0; border-color:var(--line); background:var(--surface); color:var(--ink); } :root[data-skin="plates"] .btn-primary{ background:var(--ink); border-color:var(--ink); color:var(--bg); } :root[data-skin="plates"] .btn-ghost, :root[data-skin="plates"] .btn--ghost{ background:transparent; } :root[data-skin="plates"] .card-media, :root[data-skin="plates"] .about-portrait{ background:transparent; border:0; border-radius:0; overflow:visible; padding:0; box-shadow:0 24px 54px -30px rgba(0,0,0,.3); } :root[data-skin="plates"] .about-portrait{ aspect-ratio:auto; } :root[data-skin="plates"] .site-footer{ background:var(--bg); border-top:1px solid var(--line); } :root[data-skin="plates"] .site-footer a{ color:var(--ink-soft); } :root[data-skin="plates"] .site-footer h4{ color:var(--ink); font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; } /* ---- bluechip (luxury by refusal: white cube, maximum absence, private-view procession). Uses 0 scaffold layers. ---- */ :root[data-skin="bluechip"] .site-header{ background:rgba(255,255,255,.96); border-bottom:1px solid #f0f0f0; box-shadow:none; } :root[data-skin="bluechip"] .nav{ height:86px; } :root[data-skin="bluechip"] .brand{ color:var(--ink); font-family:var(--sans); font-weight:500; letter-spacing:.02em; } :root[data-skin="bluechip"] .nav-links a{ color:var(--ink-soft); font-size:12px; letter-spacing:.02em; } :root[data-skin="bluechip"] .nav-links a::after{ height:1px; background:var(--ink); } :root[data-skin="bluechip"] .nav-right{ gap:22px; } :root[data-skin="bluechip"] .cart-btn{ background:#fff; border:1px solid var(--line); color:var(--ink); box-shadow:none; } :root[data-skin="bluechip"] .hero{ padding:clamp(90px,14vw,190px) 0 clamp(80px,12vw,170px); } :root[data-skin="bluechip"] .hero-grid{ grid-template-columns:1fr; max-width:1120px; margin-inline:auto; text-align:center; gap:clamp(48px,8vw,120px); } :root[data-skin="bluechip"] .hero h1{ max-width:12ch; margin-inline:auto; font-family:var(--sans); font-weight:400; letter-spacing:-.055em; line-height:.92; } :root[data-skin="bluechip"] .hero .lead{ max-width:46ch; margin-inline:auto; color:var(--ink-soft); } :root[data-skin="bluechip"] .hero .eyebrow, :root[data-skin="bluechip"] .eyebrow{ color:var(--ink-faint); font-size:11px; letter-spacing:.18em; } :root[data-skin="bluechip"] .hero-cta{ justify-content:center; margin-top:clamp(34px,5vw,72px); } :root[data-skin="bluechip"] .hero-art{ max-width:1000px; margin-inline:auto; background:transparent; border:0; border-radius:0; padding:0; box-shadow:none; } :root[data-skin="bluechip"] .hero-art img, :root[data-skin="bluechip"] .about-portrait img{ width:100%; height:auto; object-fit:contain; } :root[data-skin="bluechip"] .section{ padding:clamp(88px,13vw,180px) 0; } :root[data-skin="bluechip"] .section--alt, :root[data-skin="bluechip"] .section--showcase{ background:#fff; border-block:0; } :root[data-skin="bluechip"] .section-head{ display:block; text-align:center; margin-bottom:clamp(56px,8vw,116px); } :root[data-skin="bluechip"] .section-head h2{ color:var(--ink); font-family:var(--sans); font-weight:400; letter-spacing:-.04em; } :root[data-skin="bluechip"] .btn, :root[data-skin="bluechip"] input, :root[data-skin="bluechip"] select, :root[data-skin="bluechip"] textarea{ border-radius:0; border-color:var(--line); background:#fff; color:var(--ink); box-shadow:none; } :root[data-skin="bluechip"] .btn-primary{ background:var(--ink); border-color:var(--ink); color:#fff; } :root[data-skin="bluechip"] .btn-ghost, :root[data-skin="bluechip"] .btn--ghost{ background:#fff; } :root[data-skin="bluechip"] .card-media, :root[data-skin="bluechip"] .about-portrait{ background:transparent; border:0; border-radius:0; overflow:visible; padding:0; box-shadow:none; } :root[data-skin="bluechip"] .about-portrait{ aspect-ratio:auto; } :root[data-skin="bluechip"] .site-footer{ background:#fff; border-top:1px solid var(--line); margin-top:clamp(90px,12vw,160px); } :root[data-skin="bluechip"] .site-footer a{ color:var(--ink-soft); } :root[data-skin="bluechip"] .site-footer h4{ color:var(--ink); font-size:12px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; } /* ---- aperture (photography as discourse: two-page spread, tombstone rules, readable context). Uses 1 scaffold layer. ---- */ body[data-struct="aperture"] .skin-structure-layer:nth-child(1){ background:linear-gradient(90deg, transparent 0 calc(50% - 1px), rgba(26,24,19,.08) calc(50% - 1px) 50%, rgba(255,255,255,.48) 50% calc(50% + 1px), transparent calc(50% + 1px)); } :root[data-skin="aperture"] .site-header{ background:var(--surface); border-bottom:1px solid var(--line); } :root[data-skin="aperture"] .nav{ height:74px; } :root[data-skin="aperture"] .brand{ font-family:var(--serif); font-style:italic; font-weight:400; color:var(--ink); } :root[data-skin="aperture"] .nav-links a{ color:var(--ink-soft); font-family:var(--serif); font-size:14px; } :root[data-skin="aperture"] .nav-links a::after{ height:1px; background:var(--line-strong); } :root[data-skin="aperture"] .nav-right{ gap:14px; } :root[data-skin="aperture"] .cart-btn{ background:var(--surface); border:1px solid var(--line); color:var(--ink); } :root[data-skin="aperture"] .hero{ padding:clamp(70px,10vw,140px) 0 clamp(54px,8vw,108px); } :root[data-skin="aperture"] .hero-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(34px,5vw,78px); align-items:start; } :root[data-skin="aperture"] .hero h1{ font-family:var(--serif); font-weight:400; font-style:italic; letter-spacing:-.035em; line-height:1; } :root[data-skin="aperture"] .hero .lead{ color:var(--ink-soft); font-family:var(--serif); line-height:1.68; max-width:46ch; } :root[data-skin="aperture"] .hero .eyebrow, :root[data-skin="aperture"] .eyebrow{ color:var(--ink-faint); font-family:var(--serif); } :root[data-skin="aperture"] .hero-cta{ border-top:1px solid var(--line-strong); padding-top:18px; margin-top:clamp(20px,3vw,34px); } :root[data-skin="aperture"] .hero-art{ background:var(--surface-2); border:0; border-radius:0; padding:clamp(10px,1.8vw,20px); box-shadow:0 24px 54px -34px rgba(0,0,0,.36); } :root[data-skin="aperture"] .g-media img, :root[data-skin="aperture"] .hero-art img, :root[data-skin="aperture"] .about-portrait img{ width:100%; height:auto; object-fit:contain; } :root[data-skin="aperture"] .section{ padding:clamp(66px,9vw,128px) 0; } :root[data-skin="aperture"] .section--alt{ background:var(--surface); border-block:1px solid var(--line); } :root[data-skin="aperture"] .section--showcase{ background:var(--bg); } :root[data-skin="aperture"] .section-head{ border-top:1px solid var(--line-strong); padding-top:clamp(18px,2vw,28px); align-items:start; } :root[data-skin="aperture"] .section-head h2{ color:var(--ink); font-family:var(--serif); font-style:italic; font-weight:400; } :root[data-skin="aperture"] .btn, :root[data-skin="aperture"] input, :root[data-skin="aperture"] select, :root[data-skin="aperture"] textarea{ border-radius:0; border-color:var(--line-strong); background:var(--surface); color:var(--ink); } :root[data-skin="aperture"] .btn-primary{ background:var(--ink); border-color:var(--ink); color:var(--bg); } :root[data-skin="aperture"] .btn-ghost, :root[data-skin="aperture"] .btn--ghost{ background:transparent; } :root[data-skin="aperture"] .card-media, :root[data-skin="aperture"] .about-portrait{ background:var(--surface-2); border:0; border-radius:0; overflow:visible; padding:clamp(8px,1.3vw,16px); box-shadow:0 24px 54px -34px rgba(0,0,0,.36); } :root[data-skin="aperture"] .about-portrait{ aspect-ratio:auto; } :root[data-skin="aperture"] .site-footer{ background:var(--surface); border-top:1px solid var(--line-strong); } :root[data-skin="aperture"] .site-footer a{ color:var(--ink-soft); } :root[data-skin="aperture"] .site-footer h4{ color:var(--ink); font-family:var(--serif); font-style:italic; font-weight:400; } @media (max-width:720px){ :root[data-skin="aperture"] .hero-grid{ grid-template-columns:1fr; } } /* ---- zwirner (work-first gallery web: exact grid, typographic quiet, anti-chrome hover). Uses 0 scaffold layers. ---- */ :root[data-skin="zwirner"] .site-header{ background:rgba(255,255,255,.97); border-bottom:1px solid var(--line); box-shadow:none; } :root[data-skin="zwirner"] .nav{ height:80px; } :root[data-skin="zwirner"] .brand{ color:var(--ink); font-family:var(--sans); font-weight:400; letter-spacing:.01em; } :root[data-skin="zwirner"] .nav-links a{ color:var(--ink-soft); font-size:13px; letter-spacing:.01em; } :root[data-skin="zwirner"] .nav-links a::after{ height:1px; background:var(--ink); } :root[data-skin="zwirner"] .nav-right{ gap:18px; } :root[data-skin="zwirner"] .cart-btn{ background:#fff; border:1px solid var(--line); color:var(--ink); box-shadow:none; } :root[data-skin="zwirner"] .hero{ padding:clamp(74px,11vw,150px) 0 clamp(62px,9vw,124px); } :root[data-skin="zwirner"] .hero-grid{ grid-template-columns:minmax(0,.72fr) minmax(420px,1.28fr); gap:clamp(52px,8vw,128px); align-items:start; } :root[data-skin="zwirner"] .hero h1{ font-family:var(--sans); font-weight:400; letter-spacing:-.05em; line-height:.95; max-width:10ch; } :root[data-skin="zwirner"] .hero .lead{ color:var(--ink-soft); max-width:38ch; } :root[data-skin="zwirner"] .hero .eyebrow, :root[data-skin="zwirner"] .eyebrow{ color:var(--ink-faint); font-size:12px; letter-spacing:.06em; text-transform:none; } :root[data-skin="zwirner"] .hero-cta{ gap:12px; margin-top:clamp(28px,4vw,56px); } :root[data-skin="zwirner"] .hero-art{ background:var(--surface-2); border:0; border-radius:0; padding:0; box-shadow:none; } :root[data-skin="zwirner"] .hero-art img, :root[data-skin="zwirner"] .about-portrait img{ width:100%; height:auto; object-fit:contain; } :root[data-skin="zwirner"] .section{ padding:clamp(76px,10vw,146px) 0; } :root[data-skin="zwirner"] .section--alt, :root[data-skin="zwirner"] .section--showcase{ background:#fff; border-block:0; } :root[data-skin="zwirner"] .section-head{ align-items:start; margin-bottom:clamp(48px,7vw,104px); } :root[data-skin="zwirner"] .section-head h2{ color:var(--ink); font-family:var(--sans); font-weight:400; letter-spacing:-.04em; } :root[data-skin="zwirner"] .btn, :root[data-skin="zwirner"] input, :root[data-skin="zwirner"] select, :root[data-skin="zwirner"] textarea{ border-radius:0; border-color:var(--line); background:#fff; color:var(--ink); box-shadow:none; } :root[data-skin="zwirner"] .btn-primary{ background:var(--ink); border-color:var(--ink); color:#fff; } :root[data-skin="zwirner"] .btn-ghost, :root[data-skin="zwirner"] .btn--ghost{ background:#fff; } :root[data-skin="zwirner"] .card-media, :root[data-skin="zwirner"] .about-portrait{ background:var(--surface-2); border:0; border-radius:0; overflow:visible; padding:0; box-shadow:none; } :root[data-skin="zwirner"] .about-portrait{ aspect-ratio:auto; } :root[data-skin="zwirner"] .site-footer{ background:#fff; border-top:1px solid var(--line); margin-top:clamp(64px,9vw,128px); } :root[data-skin="zwirner"] .site-footer a{ color:var(--ink-soft); } :root[data-skin="zwirner"] .site-footer h4{ color:var(--ink); font-weight:400; } @media (max-width:900px){ :root[data-skin="museum"] .hero-grid, :root[data-skin="salon"] .hero-grid, :root[data-skin="plates"] .hero-grid, :root[data-skin="zwirner"] .hero-grid{ grid-template-columns:1fr; } } /* ===== p04-artbooks.css ===== */ /* ---- book (printed plate book: centred sequence, page turns, binding-red furniture). Uses 2 scaffold layers. ---- */ body[data-struct="book"] .skin-structure-layer:nth-child(1){ top:0; left:clamp(22px,5vw,72px); width:1px; height:100vh; background:linear-gradient(var(--accent-soft), var(--line), var(--accent-soft)); opacity:.85; } body[data-struct="book"] .skin-structure-layer:nth-child(2){ top:0; right:0; width:clamp(7px,1.1vw,16px); height:100vh; background:linear-gradient(180deg, var(--accent-deep), var(--accent), var(--accent-deep)); opacity:.9; } :root[data-skin="book"] .site-header{ background:var(--surface); border-bottom:1px solid var(--line); box-shadow:0 18px 42px -34px rgba(42,38,32,.45); } :root[data-skin="book"] .nav{ min-height:78px; align-items:baseline; } :root[data-skin="book"] .brand{ font-family:var(--serif); letter-spacing:.02em; color:var(--accent-deep); } :root[data-skin="book"] .nav-links a{ font-family:var(--serif); color:var(--ink-soft); padding-block:10px; } :root[data-skin="book"] .nav-links a::after{ height:1px; background:var(--accent); transform-origin:left; } :root[data-skin="book"] .nav-right{ gap:14px; } :root[data-skin="book"] .cart-btn{ border-radius:2px; border-color:var(--line-strong); background:var(--surface); color:var(--ink); } :root[data-skin="book"] .hero{ padding-block:clamp(76px,11vw,150px) clamp(64px,9vw,120px); } :root[data-skin="book"] .hero-grid{ grid-template-columns:minmax(0,38ch) minmax(280px,680px); align-items:end; gap:clamp(36px,7vw,96px); } :root[data-skin="book"] .hero h1{ font-family:var(--serif); font-weight:400; line-height:1.03; letter-spacing:-.018em; max-width:10ch; } :root[data-skin="book"] .hero .lead{ font-family:var(--serif); font-size:clamp(17px,1.55vw,22px); line-height:1.75; color:var(--ink-soft); max-width:34ch; } :root[data-skin="book"] .hero .eyebrow{ font-family:var(--serif); font-style:italic; text-transform:none; letter-spacing:.03em; color:var(--accent); } :root[data-skin="book"] .hero-cta{ align-items:center; gap:12px; margin-top:clamp(28px,4vw,46px); } :root[data-skin="book"] .hero-art{ background:var(--surface); padding:clamp(14px,2.2vw,28px); border:1px solid var(--line); border-radius:2px; box-shadow:0 24px 64px -42px rgba(42,38,32,.55); } :root[data-skin="book"] .section{ padding-block:clamp(68px,9vw,132px); } :root[data-skin="book"] .section--alt{ background:var(--surface); border-block:1px solid var(--line); } :root[data-skin="book"] .section--showcase{ background:var(--bg); } :root[data-skin="book"] .section-head{ display:block; max-width:760px; margin-inline:auto; text-align:center; border-bottom:1px solid var(--line); padding-bottom:clamp(18px,2.2vw,30px); } :root[data-skin="book"] .section-head h2{ font-family:var(--serif); font-weight:400; letter-spacing:-.012em; color:var(--ink); } :root[data-skin="book"] .eyebrow{ font-family:var(--serif); font-style:italic; text-transform:none; letter-spacing:.04em; color:var(--accent); } :root[data-skin="book"] .btn{ border-radius:2px; font-family:var(--serif); letter-spacing:.02em; } :root[data-skin="book"] .btn-primary{ background:var(--accent); border-color:var(--accent-deep); color:var(--surface); } :root[data-skin="book"] .btn-ghost{ background:transparent; border-color:var(--line-strong); color:var(--ink); } :root[data-skin="book"] input, :root[data-skin="book"] select, :root[data-skin="book"] textarea{ border-radius:2px; background:var(--surface); border-color:var(--line-strong); font-family:var(--serif); } :root[data-skin="book"] .card-media, :root[data-skin="book"] .about-portrait{ background:var(--surface); padding:clamp(10px,1.5vw,18px); border:1px solid var(--line); border-radius:2px; overflow:visible; box-shadow:0 18px 48px -34px rgba(42,38,32,.5); } :root[data-skin="book"] .card-media img, :root[data-skin="book"] .hero-art img, :root[data-skin="book"] .about-portrait img{ height:auto; object-fit:contain; } :root[data-skin="book"] .site-footer{ background:var(--surface); border-top:1px solid var(--line-strong); color:var(--ink-soft); } :root[data-skin="book"] .site-footer a{ color:var(--accent-deep); } :root[data-skin="book"] .site-footer h4{ font-family:var(--serif); font-weight:400; color:var(--ink); } /* ---- monograph (fine-art photobook: invisible 12-column system, rhythm and silence). Uses 1 scaffold layer. ---- */ body[data-struct="monograph"] .skin-structure-layer:nth-child(1){ inset:0 max(3vw,24px); background-image:repeating-linear-gradient(90deg, rgba(34,31,26,.045) 0 1px, transparent 1px calc((100vw - max(6vw,48px)) / 12)); opacity:.8; } :root[data-skin="monograph"] .site-header{ background:rgba(250,248,242,.82); border-bottom:none; backdrop-filter:blur(14px); } :root[data-skin="monograph"] .nav{ min-height:88px; } :root[data-skin="monograph"] .brand{ font-family:var(--sans); font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ink); } :root[data-skin="monograph"] .nav-links a{ font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); } :root[data-skin="monograph"] .nav-links a::after{ height:1px; background:var(--ink); } :root[data-skin="monograph"] .nav-right{ gap:18px; } :root[data-skin="monograph"] .cart-btn{ border-radius:0; background:transparent; border-color:var(--line); color:var(--ink-soft); } :root[data-skin="monograph"] .hero{ padding-block:clamp(96px,14vw,210px) clamp(70px,10vw,150px); } :root[data-skin="monograph"] .hero-grid{ grid-template-columns:repeat(12,1fr); gap:clamp(16px,3vw,56px); align-items:start; } :root[data-skin="monograph"] .hero-grid > :first-child{ grid-column:2 / 6; padding-top:clamp(36px,8vw,120px); } :root[data-skin="monograph"] .hero-art{ grid-column:6 / 13; background:transparent; border:none; border-radius:0; overflow:visible; box-shadow:none; } :root[data-skin="monograph"] .hero h1{ font-family:var(--serif); font-weight:400; font-size:clamp(42px,7vw,116px); line-height:.96; letter-spacing:-.035em; } :root[data-skin="monograph"] .hero .lead{ max-width:30ch; color:var(--ink-soft); line-height:1.9; } :root[data-skin="monograph"] .hero .eyebrow, :root[data-skin="monograph"] .eyebrow{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; color:var(--ink-faint); } :root[data-skin="monograph"] .hero-cta{ margin-top:clamp(38px,6vw,80px); } :root[data-skin="monograph"] .section{ padding-block:clamp(86px,12vw,180px); } :root[data-skin="monograph"] .section--alt{ background:transparent; border-block:1px solid var(--line); } :root[data-skin="monograph"] .section--showcase{ background:transparent; } :root[data-skin="monograph"] .section-head{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(16px,3vw,56px); align-items:end; } :root[data-skin="monograph"] .section-head > *{ grid-column:2 / 7; } :root[data-skin="monograph"] .section-head h2{ font-family:var(--serif); font-weight:400; line-height:.98; letter-spacing:-.025em; color:var(--ink); } :root[data-skin="monograph"] .btn{ border-radius:0; font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; } :root[data-skin="monograph"] .btn-primary{ background:var(--ink); border-color:var(--ink); color:var(--bg); } :root[data-skin="monograph"] .btn-ghost{ background:transparent; border-color:var(--line-strong); color:var(--ink); } :root[data-skin="monograph"] input, :root[data-skin="monograph"] select, :root[data-skin="monograph"] textarea{ border-radius:0; background:transparent; border-color:var(--line); font-family:var(--sans); } :root[data-skin="monograph"] .card-media, :root[data-skin="monograph"] .about-portrait{ background:transparent; border:none; border-radius:0; overflow:visible; padding:0; box-shadow:0 24px 54px -34px rgba(0,0,0,.5); } :root[data-skin="monograph"] .card-media img, :root[data-skin="monograph"] .hero-art img, :root[data-skin="monograph"] .about-portrait img{ height:auto; object-fit:contain; } :root[data-skin="monograph"] .site-footer{ background:transparent; border-top:1px solid var(--line); color:var(--ink-faint); margin-top:clamp(70px,10vw,150px); } :root[data-skin="monograph"] .site-footer a{ color:var(--ink-soft); } :root[data-skin="monograph"] .site-footer h4{ font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink); } /* ---- folio (art-book spread: image and prose share a measured gutter). Uses 1 scaffold layer. ---- */ body[data-struct="folio"] .skin-structure-layer:nth-child(1){ top:0; left:50%; width:1px; height:100vh; background:linear-gradient(transparent, var(--line-strong) 18%, var(--line-strong) 82%, transparent); opacity:.75; } :root[data-skin="folio"] .site-header{ background:var(--surface); border-bottom:1px solid var(--line); } :root[data-skin="folio"] .nav{ min-height:82px; } :root[data-skin="folio"] .brand{ font-family:var(--serif); font-weight:400; color:var(--ink); } :root[data-skin="folio"] .nav-links a{ font-family:var(--serif); color:var(--ink-soft); } :root[data-skin="folio"] .nav-links a::after{ height:1px; background:var(--ink-faint); } :root[data-skin="folio"] .nav-right{ gap:16px; } :root[data-skin="folio"] .cart-btn{ border-radius:0; background:var(--surface); border-color:var(--line); color:var(--ink); } :root[data-skin="folio"] .hero{ padding-block:clamp(76px,10vw,148px); } :root[data-skin="folio"] .hero-grid{ grid-template-columns:1.12fr .88fr; gap:clamp(30px,5.5vw,82px); align-items:center; } :root[data-skin="folio"] .hero h1{ font-family:var(--serif); font-weight:400; line-height:1.04; letter-spacing:-.02em; max-width:11ch; } :root[data-skin="folio"] .hero .lead{ font-family:var(--serif); line-height:1.78; color:var(--ink-soft); max-width:38ch; } :root[data-skin="folio"] .hero .eyebrow, :root[data-skin="folio"] .eyebrow{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; color:var(--ink-faint); } :root[data-skin="folio"] .hero-cta{ margin-top:clamp(28px,4.5vw,56px); } :root[data-skin="folio"] .hero-art{ background:var(--surface); padding:clamp(12px,2vw,24px); border:1px solid var(--line); border-radius:0; overflow:visible; box-shadow:0 30px 60px -42px rgba(0,0,0,.42); } :root[data-skin="folio"] .section{ padding-block:clamp(76px,10vw,150px); } :root[data-skin="folio"] .section--alt{ background:var(--surface); border-block:1px solid var(--line); } :root[data-skin="folio"] .section--showcase{ background:var(--bg); } :root[data-skin="folio"] .section-head{ display:grid; grid-template-columns:1.4fr 1fr; column-gap:clamp(24px,4vw,64px); align-items:end; } :root[data-skin="folio"] .section-head h2{ font-family:var(--serif); font-weight:400; line-height:1.06; color:var(--ink); max-width:13ch; } :root[data-skin="folio"] .btn{ border-radius:0; } :root[data-skin="folio"] .btn-primary{ background:var(--ink); border-color:var(--ink); color:var(--bg); } :root[data-skin="folio"] .btn-ghost{ background:transparent; border-color:var(--line-strong); color:var(--ink); } :root[data-skin="folio"] input, :root[data-skin="folio"] select, :root[data-skin="folio"] textarea{ border-radius:0; background:var(--surface); border-color:var(--line); } :root[data-skin="folio"] .card-media, :root[data-skin="folio"] .about-portrait{ background:var(--surface); padding:clamp(12px,2vw,24px); border:1px solid var(--line); border-radius:0; overflow:visible; box-shadow:0 26px 56px -40px rgba(0,0,0,.38); } :root[data-skin="folio"] .card-media img, :root[data-skin="folio"] .hero-art img, :root[data-skin="folio"] .about-portrait img{ height:auto; object-fit:contain; } :root[data-skin="folio"] .site-footer{ background:var(--surface); border-top:1px solid var(--line); color:var(--ink-soft); } :root[data-skin="folio"] .site-footer a{ color:var(--ink); } :root[data-skin="folio"] .site-footer h4{ font-family:var(--serif); font-weight:400; color:var(--ink); } /* ---- bazaar (Brodovitch editorial space: asymmetric choreography and red magazine cuts). Uses 2 scaffold layers. ---- */ body[data-struct="bazaar"] .skin-structure-layer:nth-child(1){ top:18vh; right:-8vw; width:38vw; height:1px; background:var(--accent); box-shadow:0 34vh 0 var(--accent); opacity:.75; } body[data-struct="bazaar"] .skin-structure-layer:nth-child(2){ bottom:10vh; left:-6vw; width:26vw; height:clamp(80px,12vw,170px); background:var(--surface-2); opacity:.8; transform:skewX(-12deg); } :root[data-skin="bazaar"] .site-header{ background:#fff; border-bottom:none; box-shadow:0 1px 0 var(--ink); } :root[data-skin="bazaar"] .nav{ min-height:74px; } :root[data-skin="bazaar"] .brand{ font-family:var(--serif); font-style:italic; font-weight:400; font-size:clamp(24px,2.8vw,42px); color:var(--ink); } :root[data-skin="bazaar"] .nav-links a{ font-family:var(--sans); font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink); } :root[data-skin="bazaar"] .nav-links a::after{ height:3px; background:var(--accent); } :root[data-skin="bazaar"] .nav-right{ gap:10px; } :root[data-skin="bazaar"] .cart-btn{ border-radius:0; border-color:var(--ink); background:var(--ink); color:#fff; } :root[data-skin="bazaar"] .hero{ padding-block:clamp(66px,9vw,132px) clamp(86px,12vw,168px); } :root[data-skin="bazaar"] .hero-grid{ grid-template-columns:.78fr 1.22fr; gap:clamp(22px,5vw,84px); align-items:end; } :root[data-skin="bazaar"] .hero h1{ font-family:var(--serif); font-style:italic; font-weight:400; font-size:clamp(56px,11vw,164px); line-height:.84; letter-spacing:-.055em; max-width:8ch; } :root[data-skin="bazaar"] .hero .lead{ font-size:clamp(17px,1.45vw,22px); line-height:1.55; color:var(--ink-soft); max-width:32ch; } :root[data-skin="bazaar"] .hero .eyebrow, :root[data-skin="bazaar"] .eyebrow{ font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.22em; color:var(--accent); } :root[data-skin="bazaar"] .hero-cta{ gap:10px; margin-top:clamp(24px,4vw,54px); } :root[data-skin="bazaar"] .hero-art{ background:transparent; border:none; border-radius:0; overflow:visible; padding:0; box-shadow:0 44px 84px -46px rgba(0,0,0,.5); } :root[data-skin="bazaar"] .section{ padding-block:clamp(78px,11vw,160px); } :root[data-skin="bazaar"] .section--alt{ background:#fff; border-block:1px solid var(--ink); } :root[data-skin="bazaar"] .section--showcase{ background:#fff; } :root[data-skin="bazaar"] .section-head{ display:grid; grid-template-columns:.72fr 1.28fr; align-items:end; gap:clamp(20px,4vw,70px); } :root[data-skin="bazaar"] .section-head h2{ font-family:var(--serif); font-style:italic; font-weight:400; font-size:clamp(42px,8vw,118px); line-height:.9; color:var(--ink); } :root[data-skin="bazaar"] .btn{ border-radius:0; font-weight:700; letter-spacing:.12em; text-transform:uppercase; } :root[data-skin="bazaar"] .btn-primary{ background:var(--accent); border-color:var(--accent); color:#fff; } :root[data-skin="bazaar"] .btn-ghost{ background:#fff; border-color:var(--ink); color:var(--ink); } :root[data-skin="bazaar"] input, :root[data-skin="bazaar"] select, :root[data-skin="bazaar"] textarea{ border-radius:0; background:#fff; border:1px solid var(--ink); } :root[data-skin="bazaar"] .card-media, :root[data-skin="bazaar"] .about-portrait{ background:transparent; border:none; border-radius:0; overflow:visible; padding:0; box-shadow:0 34px 74px -42px rgba(0,0,0,.45); } :root[data-skin="bazaar"] .card-media img, :root[data-skin="bazaar"] .hero-art img, :root[data-skin="bazaar"] .about-portrait img{ height:auto; object-fit:contain; } :root[data-skin="bazaar"] .site-footer{ background:#fff; border-top:3px solid var(--ink); color:var(--ink-soft); } :root[data-skin="bazaar"] .site-footer a{ color:var(--ink); } :root[data-skin="bazaar"] .site-footer h4{ font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); } /* ---- essay (Aperture photo-essay: prose measure, dateline red, images as evidence). Uses 1 scaffold layer. ---- */ body[data-struct="essay"] .skin-structure-layer:nth-child(1){ top:0; left:50%; width:min(680px,calc(100vw - 40px)); height:100vh; transform:translateX(-50%); border-left:1px solid rgba(154,59,46,.16); border-right:1px solid rgba(154,59,46,.16); background:linear-gradient(90deg, transparent, rgba(255,255,255,.34) 18%, rgba(255,255,255,.34) 82%, transparent); } :root[data-skin="essay"] .site-header{ background:var(--bg); border-bottom:1px solid var(--line); } :root[data-skin="essay"] .nav{ min-height:72px; max-width:760px; } :root[data-skin="essay"] .brand{ font-family:var(--serif); font-weight:400; color:var(--ink); } :root[data-skin="essay"] .nav-links a{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); } :root[data-skin="essay"] .nav-links a::after{ height:1px; background:var(--accent); } :root[data-skin="essay"] .nav-right{ gap:12px; } :root[data-skin="essay"] .cart-btn{ border-radius:0; background:var(--surface); border-color:var(--line); color:var(--ink); } :root[data-skin="essay"] .hero{ padding-block:clamp(64px,9vw,126px); } :root[data-skin="essay"] .hero-grid{ grid-template-columns:minmax(0,660px); max-width:660px; margin-inline:auto; gap:clamp(28px,5vw,60px); } :root[data-skin="essay"] .hero h1{ font-family:var(--serif); font-weight:400; line-height:1.04; letter-spacing:-.018em; } :root[data-skin="essay"] .hero .lead{ font-family:var(--serif); font-size:clamp(18px,1.55vw,23px); line-height:1.82; color:var(--ink-soft); } :root[data-skin="essay"] .hero .eyebrow, :root[data-skin="essay"] .eyebrow{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; color:var(--accent); } :root[data-skin="essay"] .hero-cta{ margin-top:clamp(26px,4vw,48px); } :root[data-skin="essay"] .hero-art{ background:transparent; border:none; border-radius:0; overflow:visible; padding:0; box-shadow:0 24px 50px -32px rgba(0,0,0,.28); } :root[data-skin="essay"] .section{ padding-block:clamp(62px,8vw,120px); } :root[data-skin="essay"] .section--alt{ background:var(--surface); border-block:1px solid var(--line); } :root[data-skin="essay"] .section--showcase{ background:var(--bg); } :root[data-skin="essay"] .section-head{ display:block; max-width:660px; margin-inline:auto; } :root[data-skin="essay"] .section-head h2{ font-family:var(--serif); font-weight:400; line-height:1.08; color:var(--ink); } :root[data-skin="essay"] .btn{ border-radius:0; font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; } :root[data-skin="essay"] .btn-primary{ background:var(--accent); border-color:var(--accent); color:#fff; } :root[data-skin="essay"] .btn-ghost{ background:transparent; border-color:var(--line-strong); color:var(--ink); } :root[data-skin="essay"] input, :root[data-skin="essay"] select, :root[data-skin="essay"] textarea{ border-radius:0; background:var(--surface); border-color:var(--line); font-family:var(--serif); } :root[data-skin="essay"] .card-media, :root[data-skin="essay"] .about-portrait{ background:transparent; border:none; border-radius:0; overflow:visible; padding:0; box-shadow:0 22px 48px -34px rgba(0,0,0,.3); } :root[data-skin="essay"] .card-media img, :root[data-skin="essay"] .hero-art img, :root[data-skin="essay"] .about-portrait img{ height:auto; object-fit:contain; } :root[data-skin="essay"] .site-footer{ background:var(--surface); border-top:1px solid var(--line); color:var(--ink-soft); } :root[data-skin="essay"] .site-footer .wrap{ max-width:760px; } :root[data-skin="essay"] .site-footer a{ color:var(--accent); } :root[data-skin="essay"] .site-footer h4{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink); } /* ---- taschen (luxury pop-art monograph: dark slipcase, gold imprint, monumental spreads). Uses 3 scaffold layers. ---- */ body[data-struct="taschen"] #skin-structure{ background:var(--bg); } body[data-struct="taschen"] .skin-structure-layer:nth-child(1){ inset:-18vh -12vw auto auto; width:58vw; height:58vw; background:radial-gradient(circle, rgba(231,178,60,.2), rgba(231,178,60,.06) 38%, transparent 68%); } body[data-struct="taschen"] .skin-structure-layer:nth-child(2){ bottom:-16vh; left:-10vw; width:54vw; height:46vh; background:linear-gradient(135deg, rgba(69,55,34,.65), rgba(28,22,16,.05)); transform:skewX(-10deg); } body[data-struct="taschen"] .skin-structure-layer:nth-child(3){ top:0; left:0; width:100vw; height:100vh; background-image:linear-gradient(rgba(244,200,96,.06) 0 1px, transparent 1px), linear-gradient(90deg, rgba(244,200,96,.04) 0 1px, transparent 1px); background-size:80px 80px; opacity:.6; } :root[data-skin="taschen"] .site-header{ background:rgba(18,14,10,.92); border-bottom:1px solid var(--line-strong); box-shadow:0 22px 58px -28px #000; } :root[data-skin="taschen"] .nav{ min-height:86px; } :root[data-skin="taschen"] .brand{ font-family:var(--serif); font-weight:700; letter-spacing:-.02em; color:var(--accent-deep); text-transform:uppercase; } :root[data-skin="taschen"] .nav-links a{ font-family:var(--sans); font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--ink); } :root[data-skin="taschen"] .nav-links a::after{ height:4px; background:var(--accent-deep); } :root[data-skin="taschen"] .nav-right{ gap:12px; } :root[data-skin="taschen"] .cart-btn{ border-radius:0; border-color:var(--accent); background:var(--accent); color:var(--bg); font-weight:800; } :root[data-skin="taschen"] .hero{ padding-block:clamp(72px,10vw,150px); } :root[data-skin="taschen"] .hero-grid{ grid-template-columns:.78fr 1.22fr; gap:clamp(24px,4vw,70px); align-items:center; } :root[data-skin="taschen"] .hero h1{ font-family:var(--serif); font-weight:800; font-size:clamp(54px,10vw,156px); line-height:.82; letter-spacing:-.055em; color:var(--ink); text-shadow:0 4px 34px rgba(0,0,0,.7); } :root[data-skin="taschen"] .hero .lead{ color:var(--ink-soft); font-size:clamp(18px,1.6vw,24px); line-height:1.55; max-width:32ch; } :root[data-skin="taschen"] .hero .eyebrow, :root[data-skin="taschen"] .eyebrow{ font-family:var(--sans); font-size:11px; font-weight:800; letter-spacing:.24em; color:var(--accent-deep); } :root[data-skin="taschen"] .hero-cta{ gap:12px; margin-top:clamp(26px,4vw,56px); } :root[data-skin="taschen"] .hero-art{ background:#000; padding:clamp(10px,1.5vw,18px); border:1px solid var(--line-strong); border-radius:0; overflow:visible; box-shadow:0 38px 88px -38px #000; } :root[data-skin="taschen"] .section{ padding-block:clamp(74px,9vw,140px); } :root[data-skin="taschen"] .section--alt{ background:var(--surface); border-block:1px solid var(--line-strong); } :root[data-skin="taschen"] .section--showcase{ background:var(--bg); } :root[data-skin="taschen"] .section-head{ align-items:flex-start; border-top:6px solid var(--accent); padding-top:clamp(16px,2vw,28px); } :root[data-skin="taschen"] .section-head h2{ font-family:var(--serif); font-weight:800; font-size:clamp(42px,8vw,122px); line-height:.84; letter-spacing:-.045em; color:var(--ink); } :root[data-skin="taschen"] .btn{ border-radius:0; font-family:var(--sans); font-weight:800; letter-spacing:.16em; text-transform:uppercase; } :root[data-skin="taschen"] .btn-primary{ background:var(--accent); border-color:var(--accent-deep); color:var(--bg); } :root[data-skin="taschen"] .btn-ghost{ background:transparent; border-color:var(--line-strong); color:var(--ink); } :root[data-skin="taschen"] input, :root[data-skin="taschen"] select, :root[data-skin="taschen"] textarea{ border-radius:0; background:var(--surface); border-color:var(--line-strong); color:var(--ink); } :root[data-skin="taschen"] .card-media, :root[data-skin="taschen"] .about-portrait{ background:#000; padding:clamp(10px,1.4vw,18px); border:1px solid var(--line-strong); border-radius:0; overflow:visible; box-shadow:0 32px 74px -34px #000; } :root[data-skin="taschen"] .g-media img, :root[data-skin="taschen"] .card-media img, :root[data-skin="taschen"] .hero-art img, :root[data-skin="taschen"] .about-portrait img{ height:auto; object-fit:contain; } :root[data-skin="taschen"] .site-footer{ background:#000; border-top:6px solid var(--accent); color:var(--ink-soft); } :root[data-skin="taschen"] .site-footer a{ color:var(--accent-deep); } :root[data-skin="taschen"] .site-footer h4{ font-family:var(--sans); font-size:11px; font-weight:800; letter-spacing:.22em; text-transform:uppercase; color:var(--ink); } @media (max-width: 820px){ :root[data-skin="monograph"] .hero-grid{ display:block; } :root[data-skin="monograph"] .hero-grid > :first-child{ padding-top:0; } :root[data-skin="monograph"] .hero-art{ margin-top:28px; } :root[data-skin="monograph"] .section-head{ display:block; } :root[data-skin="folio"] .hero-grid{ grid-template-columns:1fr; } :root[data-skin="folio"] .section-head{ display:block; } :root[data-skin="bazaar"] .hero-grid{ grid-template-columns:1fr; } :root[data-skin="bazaar"] .section-head{ display:block; } :root[data-skin="taschen"] .hero-grid{ grid-template-columns:1fr; } } /* ===== p05-swiss-german.css ===== */ /* ============================================================ Swiss & German structural skins — whole-site systems. Scoped only; photos are matted with padding/rules and remain uncropped. ============================================================ */ /* ---- grid (objective tile index: equality through repeated modules) — uses 1 scaffold layer ---- */ body[data-struct="grid"] .skin-structure-layer:nth-child(1){ background-image:linear-gradient(rgba(22,22,26,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(22,22,26,.045) 1px,transparent 1px); background-size:clamp(36px,5vw,72px) clamp(36px,5vw,72px); } :root[data-skin="grid"] .site-header{ background:color-mix(in srgb,var(--surface) 94%,transparent); border-bottom:1px solid var(--line-strong); box-shadow:none; } :root[data-skin="grid"] .nav{ height:64px; display:grid; grid-template-columns:minmax(120px,1fr) auto minmax(120px,1fr); gap:clamp(12px,2vw,28px); } :root[data-skin="grid"] .brand{ font-family:var(--sans); font-size:18px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; } :root[data-skin="grid"] .nav-links{ gap:0; border-inline-start:1px solid var(--line); } :root[data-skin="grid"] .nav-links a{ min-height:64px; display:flex; align-items:center; padding:0 clamp(12px,1.6vw,22px); border-inline-end:1px solid var(--line); font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); } :root[data-skin="grid"] .nav-links a::after{ left:0; right:0; bottom:0; width:100%; height:3px; transform:scaleX(0); transform-origin:left; background:var(--ink); transition:transform .2s var(--ease); } :root[data-skin="grid"] .nav-links a:hover::after,:root[data-skin="grid"] .nav-links a[aria-current="page"]::after{ transform:scaleX(1); } :root[data-skin="grid"] .nav-right{ justify-self:end; gap:10px; } :root[data-skin="grid"] .cart-btn{ border:1px solid var(--line-strong); padding:8px 10px; background:var(--surface); font-family:var(--mono); border-radius:0; } :root[data-skin="grid"] .hero{ padding:clamp(54px,8vw,104px) 0 clamp(38px,6vw,72px); } :root[data-skin="grid"] .hero-grid{ grid-template-columns:repeat(12,1fr); gap:clamp(12px,1.5vw,22px); align-items:stretch; } :root[data-skin="grid"] .hero-grid > :first-child{ grid-column:1 / span 6; align-self:center; } :root[data-skin="grid"] .hero-art{ grid-column:8 / -1; align-self:center; border:1px solid var(--line-strong); border-radius:0; padding:clamp(8px,1vw,14px); background:var(--surface); box-shadow:none; overflow:visible; } :root[data-skin="grid"] .hero-art img,:root[data-skin="grid"] .card-media img,:root[data-skin="grid"] .about-portrait img{ width:100%; height:auto; object-fit:contain; } :root[data-skin="grid"] .hero h1{ font-family:var(--sans); font-size:clamp(42px,7vw,88px); font-weight:800; line-height:.95; letter-spacing:-.05em; margin:14px 0 18px; max-width:8ch; } :root[data-skin="grid"] .hero .lead{ max-width:52ch; color:var(--ink-soft); border-top:1px solid var(--line-strong); padding-top:16px; } :root[data-skin="grid"] .hero .eyebrow,:root[data-skin="grid"] .section-head .eyebrow{ color:var(--ink-faint); } :root[data-skin="grid"] .section{ padding:clamp(44px,7vw,88px) 0; } :root[data-skin="grid"] .section--alt,:root[data-skin="grid"] .section--showcase{ background:var(--surface); border-block:1px solid var(--line); } :root[data-skin="grid"] .section-head{ display:grid; grid-template-columns:repeat(12,1fr); align-items:end; gap:clamp(12px,1.5vw,22px); border-bottom:1px solid var(--line-strong); padding-bottom:14px; } :root[data-skin="grid"] .section-head > *{ grid-column:1 / span 5; } :root[data-skin="grid"] .section-head h2{ font-family:var(--sans); font-weight:800; letter-spacing:-.035em; text-transform:uppercase; } :root[data-skin="grid"] .btn,:root[data-skin="grid"] .btn-primary,:root[data-skin="grid"] .btn--accent,:root[data-skin="grid"] .btn-ghost,:root[data-skin="grid"] .btn--ghost{ border-radius:0; box-shadow:none; text-transform:uppercase; letter-spacing:.08em; font-family:var(--mono); } :root[data-skin="grid"] main input,:root[data-skin="grid"] main select,:root[data-skin="grid"] main textarea,:root[data-skin="grid"] .site-footer input{ border-radius:0; border:1px solid var(--line-strong); background:var(--surface); } :root[data-skin="grid"] .card-media,:root[data-skin="grid"] .about-portrait{ border:1px solid var(--line); border-radius:0; padding:clamp(6px,.8vw,12px); background:var(--surface); box-shadow:none; overflow:visible; } :root[data-skin="grid"] .site-footer{ background:var(--surface); color:var(--ink); border-top:1px solid var(--line-strong); } :root[data-skin="grid"] .site-footer h4{ font-family:var(--mono); text-transform:uppercase; letter-spacing:.12em; font-size:11px; } :root[data-skin="grid"] .site-footer a{ color:var(--ink-soft); text-decoration:none; border-bottom:1px solid transparent; } :root[data-skin="grid"] .site-footer a:hover{ border-bottom-color:var(--ink); color:var(--ink); } @media (max-width:820px){ :root[data-skin="grid"] .nav{ display:flex; } :root[data-skin="grid"] .hero-grid,:root[data-skin="grid"] .section-head{ grid-template-columns:1fr; } :root[data-skin="grid"] .hero-grid > :first-child,:root[data-skin="grid"] .hero-art,:root[data-skin="grid"] .section-head > *{ grid-column:auto; } } /* ---- brutalist (raw construction: black rules make the interface skeleton visible) — uses 0 scaffold layers ---- */ :root[data-skin="brutalist"] .site-header{ background:#fff; border-bottom:4px solid #000; box-shadow:none; backdrop-filter:none; } :root[data-skin="brutalist"] .nav{ height:auto; min-height:66px; align-items:stretch; border-left:2px solid #000; } :root[data-skin="brutalist"] .brand{ display:flex; align-items:center; padding:0 18px; border-right:2px solid #000; font-family:var(--mono); font-size:18px; font-weight:900; text-transform:uppercase; letter-spacing:-.02em; } :root[data-skin="brutalist"] .nav-links{ gap:0; align-self:stretch; } :root[data-skin="brutalist"] .nav-links a{ display:flex; align-items:center; height:100%; padding:18px 16px; border-right:2px solid #000; font-family:var(--mono); font-size:12px; font-weight:800; letter-spacing:.02em; text-transform:uppercase; color:#000; } :root[data-skin="brutalist"] .nav-links a::after{ display:none; } :root[data-skin="brutalist"] .nav-links a:hover,:root[data-skin="brutalist"] .nav-links a[aria-current="page"]{ background:#000; color:#fff; } :root[data-skin="brutalist"] .nav-right{ gap:0; align-self:stretch; } :root[data-skin="brutalist"] .cart-btn{ height:100%; padding:0 16px; border:0; border-right:2px solid #000; border-left:2px solid #000; border-radius:0; background:#fff; color:#000; font-family:var(--mono); font-weight:900; text-transform:uppercase; } :root[data-skin="brutalist"] .hero{ padding:0; border-bottom:4px solid #000; } :root[data-skin="brutalist"] .hero-grid{ grid-template-columns:1fr 1fr; gap:0; align-items:stretch; max-width:none; padding:0; } :root[data-skin="brutalist"] .hero-grid > :first-child{ padding:clamp(32px,6vw,78px); border-right:4px solid #000; } :root[data-skin="brutalist"] .hero h1{ font-family:var(--mono); font-size:clamp(38px,7.5vw,100px); line-height:.88; font-weight:900; letter-spacing:-.08em; text-transform:uppercase; margin:14px 0; } :root[data-skin="brutalist"] .hero .lead{ max-width:56ch; color:#000; font-family:var(--mono); border-top:4px solid #000; padding-top:16px; } :root[data-skin="brutalist"] .hero .eyebrow,:root[data-skin="brutalist"] .section-head .eyebrow{ color:#000; font-weight:900; } :root[data-skin="brutalist"] .hero-art{ margin:0; border:0; border-radius:0; padding:clamp(14px,2vw,28px); background:#f0f0f0; box-shadow:none; overflow:visible; } :root[data-skin="brutalist"] .hero-art img,:root[data-skin="brutalist"] .card-media img,:root[data-skin="brutalist"] .about-portrait img{ width:100%; height:auto; object-fit:contain; } :root[data-skin="brutalist"] .section{ padding:0; border-bottom:4px solid #000; } :root[data-skin="brutalist"] .section > .wrap{ max-width:none; padding:clamp(24px,4vw,52px); } :root[data-skin="brutalist"] .section--alt,:root[data-skin="brutalist"] .section--showcase{ background:#fff; border-block:0; } :root[data-skin="brutalist"] .section-head{ margin:0 0 24px; padding-bottom:14px; border-bottom:4px solid #000; align-items:stretch; } :root[data-skin="brutalist"] .section-head h2{ font-family:var(--mono); font-weight:900; text-transform:uppercase; letter-spacing:-.06em; } :root[data-skin="brutalist"] .btn,:root[data-skin="brutalist"] .btn-primary,:root[data-skin="brutalist"] .btn--accent,:root[data-skin="brutalist"] .btn-ghost,:root[data-skin="brutalist"] .btn--ghost{ border:3px solid #000; border-radius:0; background:#fff; color:#000; box-shadow:6px 6px 0 #000; font-family:var(--mono); text-transform:uppercase; font-weight:900; } :root[data-skin="brutalist"] .btn-primary,:root[data-skin="brutalist"] .btn--accent{ background:#000; color:#fff; box-shadow:6px 6px 0 #888; } :root[data-skin="brutalist"] main input,:root[data-skin="brutalist"] main select,:root[data-skin="brutalist"] main textarea,:root[data-skin="brutalist"] .site-footer input{ border:3px solid #000; border-radius:0; background:#fff; color:#000; font-family:var(--mono); box-shadow:none; } :root[data-skin="brutalist"] .card-media,:root[data-skin="brutalist"] .about-portrait{ border:3px solid #000; border-radius:0; padding:0; background:#fff; box-shadow:none; overflow:visible; } :root[data-skin="brutalist"] .site-footer{ background:#000; color:#fff; border-top:4px solid #000; } :root[data-skin="brutalist"] .site-footer h4{ color:#fff; font-family:var(--mono); text-transform:uppercase; } :root[data-skin="brutalist"] .site-footer a{ color:#fff; text-decoration:underline; text-decoration-thickness:2px; } @media (max-width:820px){ :root[data-skin="brutalist"] .hero-grid{ grid-template-columns:1fr; } :root[data-skin="brutalist"] .hero-grid > :first-child{ border-right:0; border-bottom:4px solid #000; } } /* ---- unigrid (Vignelli institutional kit: numbered plates and red hairline governance) — uses 1 scaffold layer ---- */ body[data-struct="unigrid"] .skin-structure-layer:nth-child(1){ background-image:linear-gradient(rgba(227,20,10,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(227,20,10,.12) 1px,transparent 1px); background-size:clamp(48px,7vw,96px) clamp(48px,7vw,96px); } :root[data-skin="unigrid"] .site-header{ background:#fff; border-bottom:1px solid var(--accent); box-shadow:none; } :root[data-skin="unigrid"] .nav{ height:72px; display:grid; grid-template-columns:2fr 7fr 3fr; gap:0; } :root[data-skin="unigrid"] .brand{ height:72px; display:flex; align-items:center; padding-right:20px; border-right:1px solid var(--accent); font-family:var(--sans); font-weight:800; letter-spacing:-.04em; } :root[data-skin="unigrid"] .nav-links{ gap:0; height:72px; counter-reset:navplate; } :root[data-skin="unigrid"] .nav-links li{ counter-increment:navplate; } :root[data-skin="unigrid"] .nav-links a{ height:72px; display:flex; align-items:center; padding:0 clamp(10px,1.4vw,18px); border-right:1px solid var(--accent); font-family:var(--sans); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--ink); } :root[data-skin="unigrid"] .nav-links a::before{ content:counter(navplate,decimal-leading-zero); margin-right:8px; color:var(--accent); font-family:var(--mono); font-size:10px; } :root[data-skin="unigrid"] .nav-links a::after{ height:1px; bottom:18px; background:var(--accent); } :root[data-skin="unigrid"] .nav-right{ justify-self:end; gap:0; height:72px; } :root[data-skin="unigrid"] .cart-btn{ height:72px; border-left:1px solid var(--accent); border-radius:0; padding:0 14px; font-family:var(--mono); background:#fff; color:var(--ink); } :root[data-skin="unigrid"] .hero{ padding:clamp(46px,7vw,88px) 0; } :root[data-skin="unigrid"] .hero-grid{ grid-template-columns:repeat(12,1fr); gap:0; border-top:1px solid var(--accent); border-left:1px solid var(--accent); background:#fff; } :root[data-skin="unigrid"] .hero-grid > :first-child{ grid-column:1 / span 7; padding:clamp(24px,4vw,54px); border-right:1px solid var(--accent); border-bottom:1px solid var(--accent); } :root[data-skin="unigrid"] .hero-art{ grid-column:8 / -1; padding:clamp(18px,3vw,44px); border:0; border-right:1px solid var(--accent); border-bottom:1px solid var(--accent); border-radius:0; box-shadow:none; background:#fff; overflow:visible; } :root[data-skin="unigrid"] .hero-art img,:root[data-skin="unigrid"] .card-media img,:root[data-skin="unigrid"] .about-portrait img{ width:100%; height:auto; object-fit:contain; } :root[data-skin="unigrid"] .hero h1{ font-family:var(--sans); font-size:clamp(40px,6.8vw,84px); font-weight:800; line-height:.98; letter-spacing:-.055em; text-transform:uppercase; margin:12px 0 18px; } :root[data-skin="unigrid"] .hero .lead{ max-width:50ch; color:var(--ink-soft); } :root[data-skin="unigrid"] .hero .eyebrow,:root[data-skin="unigrid"] .section-head .eyebrow{ color:var(--accent); font-weight:800; } :root[data-skin="unigrid"] .section--alt,:root[data-skin="unigrid"] .section--showcase{ background:#fff; border-block:1px solid var(--accent); } :root[data-skin="unigrid"] .section-head{ display:grid; grid-template-columns:repeat(12,1fr); gap:0; border-top:1px solid var(--accent); border-left:1px solid var(--accent); background:#fff; } :root[data-skin="unigrid"] .section-head > *{ grid-column:1 / span 6; padding:14px 16px; border-right:1px solid var(--accent); border-bottom:1px solid var(--accent); } :root[data-skin="unigrid"] .section-head h2{ font-family:var(--sans); font-weight:800; letter-spacing:-.04em; text-transform:uppercase; } :root[data-skin="unigrid"] .btn,:root[data-skin="unigrid"] .btn-primary,:root[data-skin="unigrid"] .btn--accent,:root[data-skin="unigrid"] .btn-ghost,:root[data-skin="unigrid"] .btn--ghost{ border-radius:0; border:1px solid var(--accent); font-family:var(--sans); font-weight:800; text-transform:uppercase; letter-spacing:.04em; } :root[data-skin="unigrid"] .btn-primary,:root[data-skin="unigrid"] .btn--accent{ background:var(--accent); border-color:var(--accent); color:#fff; } :root[data-skin="unigrid"] main input,:root[data-skin="unigrid"] main select,:root[data-skin="unigrid"] main textarea,:root[data-skin="unigrid"] .site-footer input{ border-radius:0; border:1px solid var(--accent); background:#fff; } :root[data-skin="unigrid"] .card-media,:root[data-skin="unigrid"] .about-portrait{ border:1px solid var(--accent); border-radius:0; padding:clamp(12px,1.4vw,20px); background:#fff; overflow:visible; box-shadow:none; } :root[data-skin="unigrid"] .site-footer{ background:#fff; color:var(--ink); border-top:1px solid var(--accent); } :root[data-skin="unigrid"] .site-footer h4{ font-family:var(--sans); font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--accent); } :root[data-skin="unigrid"] .site-footer a{ color:var(--ink); text-decoration:none; border-bottom:1px solid var(--accent); } @media (max-width:820px){ :root[data-skin="unigrid"] .nav{ display:flex; } :root[data-skin="unigrid"] .hero-grid,:root[data-skin="unigrid"] .section-head{ grid-template-columns:1fr; } :root[data-skin="unigrid"] .hero-grid > :first-child,:root[data-skin="unigrid"] .hero-art,:root[data-skin="unigrid"] .section-head > *{ grid-column:auto; } } /* ---- swiss (Müller-Brockmann: objective asymmetry, baseline rhythm, red rule) — uses 1 scaffold layer ---- */ body[data-struct="swiss"] .skin-structure-layer:nth-child(1){ background-image:linear-gradient(90deg,transparent 0 calc(8.333% - 1px),rgba(216,30,5,.13) calc(8.333% - 1px) 8.333%); } :root[data-skin="swiss"] .site-header{ background:#fff; border-bottom:2px solid var(--accent); box-shadow:none; backdrop-filter:none; } :root[data-skin="swiss"] .nav{ height:76px; display:grid; grid-template-columns:3fr 6fr 3fr; gap:clamp(16px,2vw,30px); align-items:end; padding-bottom:14px; } :root[data-skin="swiss"] .brand{ font-family:var(--sans); font-size:22px; font-weight:800; letter-spacing:-.035em; } :root[data-skin="swiss"] .nav-links{ justify-content:flex-start; gap:clamp(18px,2.4vw,34px); align-items:end; } :root[data-skin="swiss"] .nav-links a{ font-family:var(--sans); font-size:13px; font-weight:700; color:var(--ink); padding-bottom:6px; } :root[data-skin="swiss"] .nav-links a::after{ height:2px; bottom:0; background:var(--accent); } :root[data-skin="swiss"] .nav-right{ justify-self:end; align-items:end; } :root[data-skin="swiss"] .cart-btn{ border-bottom:2px solid var(--accent); border-radius:0; padding:4px 0; font-family:var(--sans); font-weight:700; background:transparent; } :root[data-skin="swiss"] .hero{ padding:clamp(58px,9vw,118px) 0 clamp(48px,8vw,96px); } :root[data-skin="swiss"] .hero-grid{ grid-template-columns:repeat(12,1fr); gap:clamp(16px,2vw,30px); align-items:start; } :root[data-skin="swiss"] .hero-grid > :first-child{ grid-column:1 / span 7; padding-top:clamp(18px,3vw,40px); } :root[data-skin="swiss"] .hero-art{ grid-column:9 / -1; border:0; border-radius:0; padding:0; background:transparent; box-shadow:none; overflow:visible; } :root[data-skin="swiss"] .hero-art::before{ content:""; display:block; width:44%; height:6px; margin:0 0 18px; background:var(--accent); } :root[data-skin="swiss"] .hero-art img,:root[data-skin="swiss"] .card-media img,:root[data-skin="swiss"] .about-portrait img{ width:100%; height:auto; object-fit:contain; } :root[data-skin="swiss"] .hero .eyebrow,:root[data-skin="swiss"] .section-head .eyebrow{ color:var(--accent); font-family:var(--sans); font-weight:800; letter-spacing:.08em; } :root[data-skin="swiss"] .hero h1{ font-family:var(--sans); font-size:clamp(46px,8vw,104px); line-height:.9; letter-spacing:-.07em; font-weight:800; max-width:9ch; margin:16px 0 22px; } :root[data-skin="swiss"] .hero .lead{ max-width:46ch; color:var(--ink-soft); font-family:var(--sans); font-weight:500; } :root[data-skin="swiss"] .section{ padding:clamp(54px,8vw,108px) 0; } :root[data-skin="swiss"] .section--alt,:root[data-skin="swiss"] .section--showcase{ background:#fff; border-block:2px solid var(--line); } :root[data-skin="swiss"] .section-head{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(16px,2vw,30px); align-items:start; border-top:2px solid var(--accent); padding-top:12px; } :root[data-skin="swiss"] .section-head .eyebrow{ grid-column:1 / span 3; } :root[data-skin="swiss"] .section-head h2{ grid-column:4 / span 6; font-family:var(--sans); font-weight:800; letter-spacing:-.05em; line-height:.95; } :root[data-skin="swiss"] .btn,:root[data-skin="swiss"] .btn-primary,:root[data-skin="swiss"] .btn--accent,:root[data-skin="swiss"] .btn-ghost,:root[data-skin="swiss"] .btn--ghost{ border-radius:0; border:2px solid var(--ink); font-family:var(--sans); font-weight:800; letter-spacing:.02em; } :root[data-skin="swiss"] .btn-primary,:root[data-skin="swiss"] .btn--accent{ background:var(--accent); border-color:var(--accent); color:#fff; } :root[data-skin="swiss"] main input,:root[data-skin="swiss"] main select,:root[data-skin="swiss"] main textarea,:root[data-skin="swiss"] .site-footer input{ border-radius:0; border:2px solid var(--line-strong); background:#fff; font-family:var(--sans); } :root[data-skin="swiss"] .card-media,:root[data-skin="swiss"] .about-portrait{ border:0; border-top:2px solid var(--accent); border-radius:0; padding-top:10px; background:transparent; box-shadow:none; overflow:visible; } :root[data-skin="swiss"] .site-footer{ background:#fff; color:var(--ink); border-top:2px solid var(--accent); } :root[data-skin="swiss"] .site-footer h4{ font-family:var(--sans); font-weight:800; color:var(--accent); } :root[data-skin="swiss"] .site-footer a{ color:var(--ink); text-decoration:none; } :root[data-skin="swiss"] .site-footer a:hover{ color:var(--accent); } @media (max-width:820px){ :root[data-skin="swiss"] .nav{ display:flex; align-items:center; padding-bottom:0; } :root[data-skin="swiss"] .hero-grid,:root[data-skin="swiss"] .section-head{ grid-template-columns:1fr; } :root[data-skin="swiss"] .hero-grid > :first-child,:root[data-skin="swiss"] .hero-art,:root[data-skin="swiss"] .section-head .eyebrow,:root[data-skin="swiss"] .section-head h2{ grid-column:auto; } } /* ---- rams (Braun functionalism: quiet appliance modules, one useful indicator) — uses 0 scaffold layers ---- */ :root[data-skin="rams"] .site-header{ background:color-mix(in srgb,var(--bg) 92%,transparent); border-bottom:1px solid var(--line-strong); box-shadow:0 1px 0 rgba(255,255,255,.55) inset; } :root[data-skin="rams"] .nav{ height:70px; } :root[data-skin="rams"] .brand{ font-family:var(--sans); font-size:20px; font-weight:500; letter-spacing:.01em; } :root[data-skin="rams"] .brand span{ color:var(--accent); } :root[data-skin="rams"] .nav-links{ gap:24px; } :root[data-skin="rams"] .nav-links a{ font-family:var(--sans); font-size:13px; font-weight:500; color:var(--ink-soft); padding:7px 0; } :root[data-skin="rams"] .nav-links a::after{ height:1px; background:var(--accent); } :root[data-skin="rams"] .nav-right{ gap:14px; } :root[data-skin="rams"] .cart-btn{ border:1px solid var(--line-strong); border-radius:2px; background:var(--surface); padding:8px 11px; color:var(--ink); box-shadow:0 1px 0 rgba(255,255,255,.7) inset; } :root[data-skin="rams"] .hero{ padding:clamp(58px,8vw,104px) 0 clamp(42px,6vw,78px); } :root[data-skin="rams"] .hero-grid{ grid-template-columns:minmax(0,1fr) minmax(280px,.82fr); gap:clamp(28px,5vw,70px); } :root[data-skin="rams"] .hero-grid > :first-child{ background:var(--surface); border:1px solid var(--line-strong); border-radius:2px; padding:clamp(24px,4vw,56px); box-shadow:0 1px 0 rgba(255,255,255,.65) inset; } :root[data-skin="rams"] .hero-art{ border:1px solid var(--line-strong); border-radius:2px; padding:clamp(12px,1.8vw,22px); background:var(--surface); box-shadow:none; overflow:visible; } :root[data-skin="rams"] .hero-art img,:root[data-skin="rams"] .card-media img,:root[data-skin="rams"] .about-portrait img{ width:100%; height:auto; object-fit:contain; } :root[data-skin="rams"] .hero .eyebrow,:root[data-skin="rams"] .section-head .eyebrow{ color:var(--accent); letter-spacing:.16em; } :root[data-skin="rams"] .hero h1{ font-family:var(--sans); font-size:clamp(38px,6vw,74px); font-weight:500; line-height:1.02; letter-spacing:-.045em; margin:16px 0 20px; } :root[data-skin="rams"] .hero .lead{ max-width:48ch; color:var(--ink-soft); } :root[data-skin="rams"] .hero .lead::before{ content:""; display:inline-block; width:8px; height:8px; margin-right:10px; border-radius:50%; background:var(--accent); vertical-align:middle; } :root[data-skin="rams"] .section--alt,:root[data-skin="rams"] .section--showcase{ background:var(--surface); border-block:1px solid var(--line); } :root[data-skin="rams"] .section-head{ padding:0 0 16px; border-bottom:1px solid var(--line-strong); } :root[data-skin="rams"] .section-head h2{ font-family:var(--sans); font-weight:500; letter-spacing:-.035em; } :root[data-skin="rams"] .btn,:root[data-skin="rams"] .btn-primary,:root[data-skin="rams"] .btn--accent,:root[data-skin="rams"] .btn-ghost,:root[data-skin="rams"] .btn--ghost{ border-radius:2px; border:1px solid var(--line-strong); box-shadow:0 1px 0 rgba(255,255,255,.65) inset; font-weight:500; letter-spacing:.01em; } :root[data-skin="rams"] .btn-primary,:root[data-skin="rams"] .btn--accent{ background:var(--accent); border-color:var(--accent); color:#fff; } :root[data-skin="rams"] main input,:root[data-skin="rams"] main select,:root[data-skin="rams"] main textarea,:root[data-skin="rams"] .site-footer input{ border-radius:2px; border:1px solid var(--line-strong); background:var(--surface); box-shadow:0 1px 0 rgba(255,255,255,.65) inset; } :root[data-skin="rams"] .card-media,:root[data-skin="rams"] .about-portrait{ border:1px solid var(--line-strong); border-radius:2px; padding:clamp(10px,1.4vw,18px); background:var(--surface); box-shadow:none; overflow:visible; } :root[data-skin="rams"] .site-footer{ background:var(--surface); color:var(--ink); border-top:1px solid var(--line-strong); } :root[data-skin="rams"] .site-footer h4{ font-family:var(--sans); font-weight:500; } :root[data-skin="rams"] .site-footer h4::before{ content:""; display:inline-block; width:7px; height:7px; margin-right:8px; border-radius:50%; background:var(--accent); } :root[data-skin="rams"] .site-footer a{ color:var(--ink-soft); text-decoration:none; } :root[data-skin="rams"] .site-footer a:hover{ color:var(--accent); } @media (max-width:820px){ :root[data-skin="rams"] .hero-grid{ grid-template-columns:1fr; } } /* ---- aicher (Munich 1972 civic system: modular public information and coded strips) — uses 1 scaffold layer ---- */ body[data-struct="aicher"] .skin-structure-layer:nth-child(1){ background:linear-gradient(90deg,rgba(62,155,212,.16) 0 25%,rgba(23,166,123,.14) 25% 50%,rgba(245,166,35,.14) 50% 75%,rgba(111,183,224,.16) 75%); clip-path:polygon(0 0,100% 0,100% 18vh,0 34vh); } :root[data-skin="aicher"] .site-header{ background:var(--bg); border-bottom:6px solid var(--accent); box-shadow:none; } :root[data-skin="aicher"] .nav{ height:74px; display:grid; grid-template-columns:2fr 7fr 3fr; gap:20px; } :root[data-skin="aicher"] .brand{ font-family:var(--sans); font-size:20px; font-weight:700; letter-spacing:.01em; } :root[data-skin="aicher"] .nav-links{ gap:20px; } :root[data-skin="aicher"] .nav-links a{ font-family:var(--sans); font-size:13px; font-weight:600; color:var(--ink); padding:10px 0; } :root[data-skin="aicher"] .nav-links a::after{ height:6px; bottom:-4px; background:var(--accent); } :root[data-skin="aicher"] .nav-links li:nth-child(4n+2) a::after{ background:#17A67B; } :root[data-skin="aicher"] .nav-links li:nth-child(4n+3) a::after{ background:#F5A623; } :root[data-skin="aicher"] .nav-links li:nth-child(4n) a::after{ background:#6FB7E0; } :root[data-skin="aicher"] .nav-right{ justify-self:end; } :root[data-skin="aicher"] .cart-btn{ border-radius:0; border:0; border-top:6px solid var(--accent); background:#fff; padding:9px 12px; font-weight:700; } :root[data-skin="aicher"] .hero{ padding:clamp(52px,8vw,102px) 0 clamp(42px,6vw,80px); } :root[data-skin="aicher"] .hero-grid{ grid-template-columns:repeat(12,1fr); gap:20px; align-items:stretch; } :root[data-skin="aicher"] .hero-grid > :first-child{ grid-column:1 / span 6; background:#fff; border-top:10px solid var(--accent); padding:clamp(24px,4vw,52px); } :root[data-skin="aicher"] .hero-art{ grid-column:8 / -1; border:0; border-top:10px solid #17A67B; border-radius:0; padding:clamp(14px,2vw,24px); background:#fff; box-shadow:0 1px 0 var(--line-strong); overflow:visible; } :root[data-skin="aicher"] .hero-art img,:root[data-skin="aicher"] .card-media img,:root[data-skin="aicher"] .about-portrait img{ width:100%; height:auto; object-fit:contain; } :root[data-skin="aicher"] .hero .eyebrow,:root[data-skin="aicher"] .section-head .eyebrow{ color:var(--accent); font-family:var(--sans); font-weight:700; letter-spacing:.14em; } :root[data-skin="aicher"] .hero h1{ font-family:var(--sans); font-size:clamp(40px,6.7vw,84px); font-weight:700; line-height:.98; letter-spacing:-.045em; margin:14px 0 18px; } :root[data-skin="aicher"] .hero .lead{ color:var(--ink-soft); max-width:50ch; } :root[data-skin="aicher"] .section--alt,:root[data-skin="aicher"] .section--showcase{ background:var(--bg); border-block:0; } :root[data-skin="aicher"] .section-head{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; align-items:stretch; } :root[data-skin="aicher"] .section-head > *{ background:#fff; border-top:6px solid var(--accent); padding:14px 16px; } :root[data-skin="aicher"] .section-head h2{ grid-column:2 / span 2; font-family:var(--sans); font-weight:700; letter-spacing:-.035em; } :root[data-skin="aicher"] .btn,:root[data-skin="aicher"] .btn-primary,:root[data-skin="aicher"] .btn--accent,:root[data-skin="aicher"] .btn-ghost,:root[data-skin="aicher"] .btn--ghost{ border-radius:0; border:0; border-top:6px solid var(--accent); background:#fff; color:var(--ink); font-family:var(--sans); font-weight:700; } :root[data-skin="aicher"] .btn-primary,:root[data-skin="aicher"] .btn--accent{ background:var(--accent); color:#fff; } :root[data-skin="aicher"] main input,:root[data-skin="aicher"] main select,:root[data-skin="aicher"] main textarea,:root[data-skin="aicher"] .site-footer input{ border-radius:0; border:1px solid var(--line-strong); border-top:6px solid var(--accent); background:#fff; } :root[data-skin="aicher"] .card-media,:root[data-skin="aicher"] .about-portrait{ border:0; border-top:6px solid var(--accent); border-radius:0; padding:clamp(10px,1.4vw,18px); background:#fff; box-shadow:0 1px 0 var(--line-strong); overflow:visible; } :root[data-skin="aicher"] .site-footer{ background:#fff; color:var(--ink); border-top:6px solid var(--accent); } :root[data-skin="aicher"] .site-footer h4{ font-family:var(--sans); font-weight:700; color:var(--accent); } :root[data-skin="aicher"] .site-footer a{ color:var(--ink); text-decoration:none; } :root[data-skin="aicher"] .site-footer a:hover{ color:var(--accent); } @media (max-width:820px){ :root[data-skin="aicher"] .nav{ display:flex; } :root[data-skin="aicher"] .hero-grid,:root[data-skin="aicher"] .section-head{ grid-template-columns:1fr; } :root[data-skin="aicher"] .hero-grid > :first-child,:root[data-skin="aicher"] .hero-art,:root[data-skin="aicher"] .section-head h2{ grid-column:auto; } } /* ---- spiekermann (humanist information design: warm wayfinding, red route rules) — uses 1 scaffold layer ---- */ body[data-struct="spiekermann"] .skin-structure-layer:nth-child(1){ background:linear-gradient(90deg,transparent 0 8vw,rgba(227,6,19,.12) 8vw calc(8vw + 4px),transparent calc(8vw + 4px)); } :root[data-skin="spiekermann"] .site-header{ background:color-mix(in srgb,var(--bg) 94%,transparent); border-bottom:2px solid var(--accent); box-shadow:none; } :root[data-skin="spiekermann"] .nav{ height:70px; align-items:center; } :root[data-skin="spiekermann"] .brand{ font-family:var(--sans); font-size:23px; font-weight:700; letter-spacing:-.035em; } :root[data-skin="spiekermann"] .nav-links{ gap:clamp(18px,2.6vw,36px); } :root[data-skin="spiekermann"] .nav-links a{ font-family:var(--sans); font-size:14px; font-weight:600; color:var(--ink-soft); letter-spacing:-.005em; } :root[data-skin="spiekermann"] .nav-links a::after{ height:2px; background:var(--accent); } :root[data-skin="spiekermann"] .nav-links a:hover,:root[data-skin="spiekermann"] .nav-links a[aria-current="page"]{ color:var(--ink); } :root[data-skin="spiekermann"] .nav-right{ gap:16px; } :root[data-skin="spiekermann"] .cart-btn{ border-left:4px solid var(--accent); border-radius:0; background:var(--surface); padding:8px 12px; font-weight:700; } :root[data-skin="spiekermann"] .hero{ padding:clamp(56px,8vw,106px) 0 clamp(44px,6vw,82px); } :root[data-skin="spiekermann"] .hero-grid{ grid-template-columns:repeat(12,1fr); gap:clamp(18px,2.5vw,34px); align-items:center; } :root[data-skin="spiekermann"] .hero-grid > :first-child{ grid-column:1 / span 6; border-left:4px solid var(--accent); padding-left:clamp(18px,2.5vw,32px); } :root[data-skin="spiekermann"] .hero-art{ grid-column:8 / -1; border:0; border-radius:0; border-left:4px solid var(--accent); padding-left:clamp(14px,2vw,24px); background:transparent; box-shadow:none; overflow:visible; } :root[data-skin="spiekermann"] .hero-art img,:root[data-skin="spiekermann"] .card-media img,:root[data-skin="spiekermann"] .about-portrait img{ width:100%; height:auto; object-fit:contain; } :root[data-skin="spiekermann"] .hero .eyebrow,:root[data-skin="spiekermann"] .section-head .eyebrow{ color:var(--accent); font-family:var(--sans); font-weight:700; letter-spacing:.1em; } :root[data-skin="spiekermann"] .hero h1{ font-family:var(--sans); font-size:clamp(42px,7vw,88px); font-weight:700; line-height:.98; letter-spacing:-.06em; margin:12px 0 18px; } :root[data-skin="spiekermann"] .hero .lead{ color:var(--ink-soft); max-width:52ch; font-size:clamp(16px,1.7vw,19px); } :root[data-skin="spiekermann"] .section--alt,:root[data-skin="spiekermann"] .section--showcase{ background:var(--bg); border-block:2px solid var(--line); } :root[data-skin="spiekermann"] .section-head{ border-left:4px solid var(--accent); padding-left:clamp(16px,2vw,28px); align-items:flex-start; } :root[data-skin="spiekermann"] .section-head h2{ font-family:var(--sans); font-weight:700; letter-spacing:-.05em; } :root[data-skin="spiekermann"] .btn,:root[data-skin="spiekermann"] .btn-primary,:root[data-skin="spiekermann"] .btn--accent,:root[data-skin="spiekermann"] .btn-ghost,:root[data-skin="spiekermann"] .btn--ghost{ border-radius:0; border:0; border-left:4px solid var(--accent); background:var(--surface); color:var(--ink); font-family:var(--sans); font-weight:700; letter-spacing:-.005em; } :root[data-skin="spiekermann"] .btn-primary,:root[data-skin="spiekermann"] .btn--accent{ background:var(--accent); color:#fff; } :root[data-skin="spiekermann"] main input,:root[data-skin="spiekermann"] main select,:root[data-skin="spiekermann"] main textarea,:root[data-skin="spiekermann"] .site-footer input{ border-radius:0; border:1px solid var(--line-strong); border-left:4px solid var(--accent); background:var(--surface); } :root[data-skin="spiekermann"] .card-media,:root[data-skin="spiekermann"] .about-portrait{ border:0; border-left:4px solid var(--accent); border-radius:0; padding-left:clamp(10px,1.5vw,18px); background:transparent; box-shadow:none; overflow:visible; } :root[data-skin="spiekermann"] .site-footer{ background:var(--surface); color:var(--ink); border-top:2px solid var(--accent); } :root[data-skin="spiekermann"] .site-footer h4{ font-family:var(--sans); font-weight:700; color:var(--accent); letter-spacing:-.01em; } :root[data-skin="spiekermann"] .site-footer a{ color:var(--ink); text-decoration:none; border-bottom:2px solid transparent; } :root[data-skin="spiekermann"] .site-footer a:hover{ border-bottom-color:var(--accent); } @media (max-width:820px){ :root[data-skin="spiekermann"] .hero-grid{ grid-template-columns:1fr; } :root[data-skin="spiekermann"] .hero-grid > :first-child,:root[data-skin="spiekermann"] .hero-art{ grid-column:auto; } } /* ---- werkbund (industrial honesty: useful joints, material grid, no flourish) — uses 1 scaffold layer ---- */ body[data-struct="werkbund"] .skin-structure-layer:nth-child(1){ background-image:linear-gradient(rgba(110,74,46,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(110,74,46,.11) 1px,transparent 1px); background-size:clamp(52px,7vw,104px) clamp(52px,7vw,104px); } :root[data-skin="werkbund"] .site-header{ background:var(--surface); border-bottom:1px solid var(--line-strong); box-shadow:none; } :root[data-skin="werkbund"] .nav{ height:68px; display:grid; grid-template-columns:2fr 7fr 3fr; gap:0; border-left:1px solid var(--line-strong); } :root[data-skin="werkbund"] .brand{ display:flex; align-items:center; height:68px; padding:0 18px; border-right:1px solid var(--line-strong); font-family:var(--sans); font-size:20px; font-weight:600; } :root[data-skin="werkbund"] .nav-links{ height:68px; gap:0; } :root[data-skin="werkbund"] .nav-links a{ height:68px; display:flex; align-items:center; padding:0 clamp(12px,1.5vw,20px); border-right:1px solid var(--line-strong); font-family:var(--sans); font-weight:600; color:var(--ink-soft); } :root[data-skin="werkbund"] .nav-links a::after{ height:1px; bottom:14px; background:var(--accent); } :root[data-skin="werkbund"] .nav-links a:hover,:root[data-skin="werkbund"] .nav-links a[aria-current="page"]{ color:var(--ink); background:var(--bg); } :root[data-skin="werkbund"] .nav-right{ justify-self:end; height:68px; gap:0; } :root[data-skin="werkbund"] .cart-btn{ height:68px; border-left:1px solid var(--line-strong); border-radius:0; background:var(--surface); padding:0 14px; font-weight:600; } :root[data-skin="werkbund"] .hero{ padding:clamp(50px,8vw,96px) 0 clamp(40px,6vw,76px); } :root[data-skin="werkbund"] .hero-grid{ grid-template-columns:repeat(12,1fr); gap:0; border-top:1px solid var(--line-strong); border-left:1px solid var(--line-strong); background:var(--surface); } :root[data-skin="werkbund"] .hero-grid > :first-child{ grid-column:1 / span 6; padding:clamp(24px,4vw,52px); border-right:1px solid var(--line-strong); border-bottom:1px solid var(--line-strong); } :root[data-skin="werkbund"] .hero-art{ grid-column:7 / -1; border:0; border-right:1px solid var(--line-strong); border-bottom:1px solid var(--line-strong); border-radius:0; padding:clamp(16px,2.5vw,34px); background:var(--surface); box-shadow:none; overflow:visible; } :root[data-skin="werkbund"] .hero-art img,:root[data-skin="werkbund"] .card-media img,:root[data-skin="werkbund"] .about-portrait img{ width:100%; height:auto; object-fit:contain; } :root[data-skin="werkbund"] .hero h1{ font-family:var(--sans); font-size:clamp(38px,6.4vw,80px); font-weight:600; line-height:1; letter-spacing:-.04em; margin:14px 0 20px; } :root[data-skin="werkbund"] .hero .lead{ color:var(--ink-soft); max-width:52ch; } :root[data-skin="werkbund"] .hero .eyebrow,:root[data-skin="werkbund"] .section-head .eyebrow{ color:var(--accent); font-weight:700; } :root[data-skin="werkbund"] .section--alt,:root[data-skin="werkbund"] .section--showcase{ background:var(--surface); border-block:1px solid var(--line-strong); } :root[data-skin="werkbund"] .section-head{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--line-strong); border-left:1px solid var(--line-strong); background:var(--surface); } :root[data-skin="werkbund"] .section-head > *{ padding:14px 16px; border-right:1px solid var(--line-strong); border-bottom:1px solid var(--line-strong); } :root[data-skin="werkbund"] .section-head h2{ grid-column:2 / span 2; font-family:var(--sans); font-weight:600; letter-spacing:-.035em; } :root[data-skin="werkbund"] .btn,:root[data-skin="werkbund"] .btn-primary,:root[data-skin="werkbund"] .btn--accent,:root[data-skin="werkbund"] .btn-ghost,:root[data-skin="werkbund"] .btn--ghost{ border-radius:0; border:1px solid var(--line-strong); background:var(--surface); color:var(--ink); font-family:var(--sans); font-weight:600; } :root[data-skin="werkbund"] .btn-primary,:root[data-skin="werkbund"] .btn--accent{ background:var(--accent); border-color:var(--accent); color:var(--bg); } :root[data-skin="werkbund"] main input,:root[data-skin="werkbund"] main select,:root[data-skin="werkbund"] main textarea,:root[data-skin="werkbund"] .site-footer input{ border-radius:0; border:1px solid var(--line-strong); background:var(--surface); } :root[data-skin="werkbund"] .card-media,:root[data-skin="werkbund"] .about-portrait{ border:1px solid var(--line-strong); border-radius:0; padding:clamp(10px,1.4vw,16px); background:var(--surface); box-shadow:none; overflow:visible; } :root[data-skin="werkbund"] .site-footer{ background:var(--surface); color:var(--ink); border-top:1px solid var(--line-strong); } :root[data-skin="werkbund"] .site-footer h4{ font-family:var(--sans); font-weight:600; color:var(--accent); } :root[data-skin="werkbund"] .site-footer a{ color:var(--ink-soft); text-decoration:none; } :root[data-skin="werkbund"] .site-footer a:hover{ color:var(--accent); } @media (max-width:820px){ :root[data-skin="werkbund"] .nav{ display:flex; } :root[data-skin="werkbund"] .hero-grid,:root[data-skin="werkbund"] .section-head{ grid-template-columns:1fr; } :root[data-skin="werkbund"] .hero-grid > :first-child,:root[data-skin="werkbund"] .hero-art,:root[data-skin="werkbund"] .section-head h2{ grid-column:auto; } } /* ===== p06-editorial.css ===== */ /* ---- filmstrip (cinematic sequence: the site reads as a horizontal editing reel on a dark light table). Uses 2 scaffold layers. ---- */ body[data-struct="filmstrip"] #skin-structure{ background:#0C0C0D; } body[data-struct="filmstrip"] .skin-structure-layer:nth-child(1){ background-image:linear-gradient(90deg, rgba(242,240,234,.14) 0 2px, transparent 2px calc(100% - 2px), rgba(242,240,234,.14) calc(100% - 2px) 100%), repeating-linear-gradient(90deg, transparent 0 72px, rgba(242,240,234,.055) 72px 76px, transparent 76px 148px); opacity:.55; } body[data-struct="filmstrip"] .skin-structure-layer:nth-child(2){ top:7vh; left:0; width:100vw; height:16px; background:repeating-linear-gradient(90deg, rgba(242,240,234,.32) 0 10px, transparent 10px 24px); box-shadow:0 calc(86vh - 16px) 0 rgba(242,240,234,.18); opacity:.28; } :root[data-skin="filmstrip"] .site-header{ position:relative; background:rgba(12,12,13,.94); border-bottom:1px solid var(--line-strong); box-shadow:0 18px 50px -38px rgba(0,0,0,.9); } :root[data-skin="filmstrip"] .nav{ min-height:70px; gap:clamp(14px,2.4vw,34px); } :root[data-skin="filmstrip"] .brand{ font-family:var(--mono); font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--ink); } :root[data-skin="filmstrip"] .nav-links{ gap:clamp(14px,2vw,32px); } :root[data-skin="filmstrip"] .nav-links a{ position:relative; font-family:var(--mono); font-size:11px; color:var(--ink-soft); letter-spacing:.16em; text-transform:uppercase; padding:10px 0; } :root[data-skin="filmstrip"] .nav-links a::after{ height:2px; background:var(--ink); box-shadow:0 0 16px rgba(242,240,234,.35); } :root[data-skin="filmstrip"] .nav-right{ gap:10px; } :root[data-skin="filmstrip"] .cart-btn{ border:1px solid var(--line-strong); background:var(--surface); color:var(--ink); border-radius:0; box-shadow:inset 0 0 0 1px rgba(242,240,234,.04); } :root[data-skin="filmstrip"] .hero{ padding-block:clamp(74px,11vw,170px) clamp(46px,7vw,106px); background:linear-gradient(180deg, rgba(255,255,255,.04), transparent 44%), linear-gradient(90deg, transparent 0 7vw, rgba(242,240,234,.08) 7vw calc(7vw + 1px), transparent calc(7vw + 1px)); } :root[data-skin="filmstrip"] .hero-grid{ grid-template-columns:minmax(260px,.78fr) minmax(300px,1.22fr); gap:clamp(30px,6vw,94px); align-items:center; } :root[data-skin="filmstrip"] .hero .eyebrow, :root[data-skin="filmstrip"] .eyebrow{ font-family:var(--mono); color:var(--ink-faint); letter-spacing:.24em; text-transform:uppercase; font-size:11px; } :root[data-skin="filmstrip"] .hero h1{ max-width:13ch; font-family:var(--sans); font-weight:700; letter-spacing:-.055em; line-height:.9; color:var(--ink); } :root[data-skin="filmstrip"] .hero .lead{ max-width:52ch; color:var(--ink-soft); font-size:clamp(17px,1.45vw,21px); line-height:1.64; } :root[data-skin="filmstrip"] .hero-cta{ gap:10px; margin-top:clamp(24px,4vw,54px); } :root[data-skin="filmstrip"] .hero-art{ background:#050506; padding:clamp(8px,1.1vw,14px); border:1px solid var(--line-strong); border-radius:0; box-shadow:0 26px 74px -42px rgba(0,0,0,.95); } :root[data-skin="filmstrip"] .section{ padding-block:clamp(62px,9vw,132px); background:var(--bg); } :root[data-skin="filmstrip"] .section--alt{ background:var(--surface); border-block:1px solid var(--line); } :root[data-skin="filmstrip"] .section--showcase{ background:#0C0C0D; } :root[data-skin="filmstrip"] .section-head{ max-width:none; display:grid; grid-template-columns:minmax(120px,220px) minmax(0,1fr); gap:clamp(18px,4vw,68px); align-items:end; padding-bottom:14px; border-bottom:1px solid var(--line-strong); } :root[data-skin="filmstrip"] .section-head h2{ font-family:var(--sans); font-weight:700; letter-spacing:-.045em; line-height:.94; color:var(--ink); } :root[data-skin="filmstrip"] .btn{ border-radius:0; border:1px solid var(--line-strong); font-family:var(--mono); letter-spacing:.12em; text-transform:uppercase; box-shadow:none; } :root[data-skin="filmstrip"] .btn-primary{ background:var(--ink); color:var(--bg); } :root[data-skin="filmstrip"] .btn-ghost{ background:transparent; color:var(--ink); } :root[data-skin="filmstrip"] input, :root[data-skin="filmstrip"] select, :root[data-skin="filmstrip"] textarea{ border-radius:0; background:var(--surface); border:1px solid var(--line-strong); color:var(--ink); box-shadow:none; } :root[data-skin="filmstrip"] .card-media, :root[data-skin="filmstrip"] .about-portrait{ background:#050506; padding:clamp(7px,1vw,12px); border:1px solid var(--line-strong); border-radius:0; box-shadow:0 20px 54px -38px rgba(0,0,0,.9); } :root[data-skin="filmstrip"] .site-footer{ background:#070708; color:var(--ink-soft); border-top:1px solid var(--line-strong); } :root[data-skin="filmstrip"] .site-footer h4{ font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-faint); } :root[data-skin="filmstrip"] .site-footer a{ color:var(--ink-soft); text-decoration-color:var(--line-strong); text-underline-offset:6px; } /* ---- saville (post-punk classicism: muted restraint, centred objecthood, slow art-historical pacing). Uses 1 scaffold layer. ---- */ body[data-struct="saville"] .skin-structure-layer:nth-child(1){ background:radial-gradient(circle at 50% 18%, rgba(110,123,106,.13), transparent 28%), linear-gradient(90deg, transparent 0 49.8%, rgba(38,38,31,.06) 49.8% 50.2%, transparent 50.2%); opacity:.85; } :root[data-skin="saville"] .site-header{ background:rgba(236,235,229,.9); border-bottom:1px solid var(--line); box-shadow:none; } :root[data-skin="saville"] .nav{ min-height:92px; justify-content:center; } :root[data-skin="saville"] .brand{ font-family:var(--serif); font-weight:400; letter-spacing:.3em; text-transform:uppercase; color:var(--ink); } :root[data-skin="saville"] .nav-links{ gap:clamp(28px,5vw,84px); } :root[data-skin="saville"] .nav-links a{ position:relative; font-family:var(--serif); font-size:12px; color:var(--ink-soft); letter-spacing:.26em; text-transform:uppercase; padding:12px 0; } :root[data-skin="saville"] .nav-links a::after{ height:1px; background:var(--accent); } :root[data-skin="saville"] .nav-right{ opacity:.78; } :root[data-skin="saville"] .cart-btn{ border:1px solid var(--line); background:transparent; color:var(--ink-soft); border-radius:0; box-shadow:none; } :root[data-skin="saville"] .hero{ padding-block:clamp(96px,15vw,230px) clamp(84px,12vw,180px); background:linear-gradient(180deg, rgba(236,235,229,.7), transparent 62%); } :root[data-skin="saville"] .hero-grid{ grid-template-columns:minmax(260px,.9fr) minmax(280px,1.1fr); gap:clamp(48px,8vw,132px); align-items:center; text-align:center; } :root[data-skin="saville"] .hero .eyebrow, :root[data-skin="saville"] .eyebrow{ font-family:var(--serif); font-size:12px; font-style:italic; color:var(--ink-faint); letter-spacing:.08em; text-transform:none; } :root[data-skin="saville"] .hero h1{ margin-inline:auto; max-width:14ch; font-family:var(--serif); font-weight:400; letter-spacing:.08em; text-transform:uppercase; line-height:1.08; color:var(--ink); } :root[data-skin="saville"] .hero .lead{ margin-inline:auto; max-width:50ch; color:var(--ink-soft); font-family:var(--serif); font-size:clamp(17px,1.35vw,20px); line-height:1.9; } :root[data-skin="saville"] .hero-cta{ justify-content:center; gap:18px; margin-top:clamp(30px,5vw,70px); } :root[data-skin="saville"] .hero-art{ justify-self:center; background:transparent; padding:0; border-radius:0; box-shadow:0 34px 72px -54px rgba(38,38,31,.45); filter:saturate(.86) contrast(.98); } :root[data-skin="saville"] .section{ padding-block:clamp(96px,14vw,210px); background:transparent; } :root[data-skin="saville"] .section--alt{ background:rgba(236,235,229,.58); border-block:1px solid var(--line); } :root[data-skin="saville"] .section--showcase{ background:var(--bg); } :root[data-skin="saville"] .section-head{ margin-inline:auto; max-width:820px; text-align:center; margin-bottom:clamp(56px,9vw,128px); } :root[data-skin="saville"] .section-head h2{ font-family:var(--serif); font-weight:400; letter-spacing:.14em; text-transform:uppercase; line-height:1.18; color:var(--ink); } :root[data-skin="saville"] .btn{ border-radius:0; border:1px solid var(--line-strong); background:transparent; box-shadow:none; font-family:var(--serif); font-weight:400; letter-spacing:.18em; text-transform:uppercase; } :root[data-skin="saville"] .btn-primary{ background:var(--ink); color:var(--bg); border-color:var(--ink); } :root[data-skin="saville"] .btn-ghost{ color:var(--ink-soft); } :root[data-skin="saville"] input, :root[data-skin="saville"] select, :root[data-skin="saville"] textarea{ border-radius:0; background:var(--surface); border:1px solid var(--line); box-shadow:none; color:var(--ink); } :root[data-skin="saville"] .card-media, :root[data-skin="saville"] .about-portrait{ background:transparent; padding:0; border-radius:0; box-shadow:0 26px 58px -44px rgba(38,38,31,.38); filter:saturate(.86) contrast(.98); } :root[data-skin="saville"] .site-footer{ background:var(--surface); color:var(--ink-soft); border-top:1px solid var(--line); text-align:center; } :root[data-skin="saville"] .site-footer h4{ font-family:var(--serif); font-weight:400; font-style:italic; color:var(--ink-faint); } :root[data-skin="saville"] .site-footer a{ color:var(--ink-soft); text-decoration-color:var(--accent); text-underline-offset:7px; } /* ---- contact (proof-sheet truth: dense equal frames, light-table notation, no hero worship). Uses 2 scaffold layers. ---- */ body[data-struct="contact"] #skin-structure{ background:#17150F; } body[data-struct="contact"] .skin-structure-layer:nth-child(1){ background-image:repeating-linear-gradient(0deg, rgba(233,162,59,.07) 0 1px, transparent 1px 42px), repeating-linear-gradient(90deg, rgba(233,162,59,.06) 0 1px, transparent 1px 64px); opacity:.7; } body[data-struct="contact"] .skin-structure-layer:nth-child(2){ inset:5vh 4vw auto 4vw; height:90vh; border:1px solid rgba(233,162,59,.12); box-shadow:0 0 80px rgba(233,162,59,.08), inset 0 0 80px rgba(0,0,0,.38); } :root[data-skin="contact"] .site-header{ background:#121009; border-bottom:1px solid var(--line-strong); box-shadow:0 12px 34px -28px rgba(0,0,0,.85); } :root[data-skin="contact"] .nav{ min-height:62px; align-items:center; } :root[data-skin="contact"] .brand{ font-family:var(--mono); font-size:13px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); } :root[data-skin="contact"] .nav-links{ gap:8px; } :root[data-skin="contact"] .nav-links a{ position:relative; font-family:var(--mono); font-size:10px; color:var(--ink-faint); letter-spacing:.12em; text-transform:uppercase; padding:7px 8px; border:1px solid transparent; } :root[data-skin="contact"] .nav-links a::after{ height:1px; background:var(--accent); bottom:2px; } :root[data-skin="contact"] .nav-links a:hover{ border-color:var(--line-strong); color:var(--ink-soft); } :root[data-skin="contact"] .nav-right{ gap:7px; } :root[data-skin="contact"] .cart-btn{ border:1px solid var(--line-strong); background:#0C0B07; color:var(--ink-soft); border-radius:0; box-shadow:none; font-family:var(--mono); } :root[data-skin="contact"] .hero{ padding-block:clamp(52px,8vw,118px); background:linear-gradient(90deg, rgba(233,162,59,.08) 0 1px, transparent 1px 100%); background-size:clamp(44px,6vw,72px) 100%; } :root[data-skin="contact"] .hero-grid{ grid-template-columns:minmax(240px,.7fr) minmax(320px,1.3fr); gap:clamp(14px,3vw,42px); align-items:start; } :root[data-skin="contact"] .hero .eyebrow, :root[data-skin="contact"] .eyebrow{ font-family:var(--mono); color:var(--accent); letter-spacing:.16em; text-transform:uppercase; font-size:10px; } :root[data-skin="contact"] .hero h1{ font-family:var(--mono); font-weight:700; text-transform:uppercase; letter-spacing:.02em; line-height:1; color:var(--ink); } :root[data-skin="contact"] .hero .lead{ max-width:48ch; color:var(--ink-soft); font-family:var(--mono); font-size:clamp(14px,1.15vw,17px); line-height:1.7; } :root[data-skin="contact"] .hero-cta{ gap:8px; margin-top:clamp(18px,3vw,38px); } :root[data-skin="contact"] .hero-art{ background:#0C0B07; padding:clamp(5px,.8vw,9px); border:1px solid var(--line-strong); border-radius:0; box-shadow:0 24px 58px -38px rgba(0,0,0,.75); } :root[data-skin="contact"] .section{ padding-block:clamp(44px,7vw,92px); background:var(--bg); } :root[data-skin="contact"] .section--alt{ background:var(--surface); border-block:1px solid var(--line-strong); } :root[data-skin="contact"] .section--showcase{ background:#121009; } :root[data-skin="contact"] .section-head{ max-width:none; display:grid; grid-template-columns:minmax(90px,160px) 1fr; gap:clamp(10px,2vw,28px); align-items:end; margin-bottom:clamp(18px,3vw,40px); padding-bottom:8px; border-bottom:1px solid var(--line-strong); } :root[data-skin="contact"] .section-head h2{ font-family:var(--mono); font-weight:700; text-transform:uppercase; letter-spacing:.04em; line-height:1.04; color:var(--ink); } :root[data-skin="contact"] .btn{ border-radius:0; border:1px solid var(--line-strong); box-shadow:none; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; } :root[data-skin="contact"] .btn-primary{ background:var(--accent); color:#0C0B07; border-color:var(--accent); } :root[data-skin="contact"] .btn-ghost{ background:#0C0B07; color:var(--ink-soft); } :root[data-skin="contact"] input, :root[data-skin="contact"] select, :root[data-skin="contact"] textarea{ border-radius:0; background:#0C0B07; border:1px solid var(--line-strong); color:var(--ink); font-family:var(--mono); box-shadow:none; } :root[data-skin="contact"] .card-media, :root[data-skin="contact"] .about-portrait{ background:#0C0B07; padding:4px; border:1px solid var(--line-strong); border-radius:0; box-shadow:none; } :root[data-skin="contact"] .site-footer{ background:#0C0B07; color:var(--ink-faint); border-top:1px solid var(--line-strong); } :root[data-skin="contact"] .site-footer h4{ font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); } :root[data-skin="contact"] .site-footer a{ color:var(--ink-soft); text-decoration-color:var(--line-strong); text-underline-offset:4px; } /* ---- brodovitch (the spread as theatre: active whitespace, asymmetric scale jumps, captions as furniture). Uses 1 scaffold layer. ---- */ body[data-struct="brodovitch"] .skin-structure-layer:nth-child(1){ background-image:linear-gradient(90deg, transparent 0 calc(8.333% - .5px), rgba(20,19,15,.035) calc(8.333% - .5px) 8.333%, transparent 8.333%); background-size:100% 100%; opacity:.7; } :root[data-skin="brodovitch"] .site-header{ background:rgba(247,245,240,.88); border-bottom:0; box-shadow:none; } :root[data-skin="brodovitch"] .nav{ min-height:86px; align-items:flex-start; padding-top:clamp(16px,2vw,26px); } :root[data-skin="brodovitch"] .brand{ font-family:var(--serif); font-style:italic; font-weight:400; font-size:clamp(22px,2vw,34px); letter-spacing:-.04em; color:var(--ink); } :root[data-skin="brodovitch"] .nav-links{ gap:clamp(18px,3vw,52px); align-items:flex-start; } :root[data-skin="brodovitch"] .nav-links a{ position:relative; color:var(--ink-soft); font-size:12px; letter-spacing:.18em; text-transform:uppercase; padding:5px 0 12px; } :root[data-skin="brodovitch"] .nav-links li:nth-child(even) a{ margin-top:18px; } :root[data-skin="brodovitch"] .nav-links a::after{ height:1px; background:var(--ink); } :root[data-skin="brodovitch"] .nav-right{ align-self:flex-start; } :root[data-skin="brodovitch"] .cart-btn{ background:transparent; border:1px solid var(--line); color:var(--ink); border-radius:0; box-shadow:none; } :root[data-skin="brodovitch"] .hero{ padding-block:clamp(80px,12vw,190px) clamp(72px,11vw,170px); background:radial-gradient(circle at 78% 18%, rgba(255,255,255,.78), transparent 28%); } :root[data-skin="brodovitch"] .hero-grid{ grid-template-columns:repeat(12,1fr); gap:clamp(18px,3vw,48px); align-items:end; } :root[data-skin="brodovitch"] .hero-grid > *:first-child{ grid-column:1 / 6; } :root[data-skin="brodovitch"] .hero-art{ grid-column:7 / 13; background:var(--surface-2); padding:0; border-radius:0; box-shadow:0 34px 76px -52px rgba(0,0,0,.4); transform:translateY(clamp(20px,5vw,70px)); } :root[data-skin="brodovitch"] .hero .eyebrow, :root[data-skin="brodovitch"] .eyebrow{ font-family:var(--sans); color:var(--ink-faint); font-size:10px; letter-spacing:.22em; text-transform:uppercase; } :root[data-skin="brodovitch"] .hero h1{ max-width:11ch; font-family:var(--serif); font-weight:400; font-style:italic; letter-spacing:-.06em; line-height:.88; color:var(--ink); } :root[data-skin="brodovitch"] .hero .lead{ max-width:44ch; margin-top:clamp(30px,6vw,82px); color:var(--ink-soft); font-size:clamp(17px,1.35vw,20px); line-height:1.72; } :root[data-skin="brodovitch"] .hero-cta{ gap:16px; } :root[data-skin="brodovitch"] .section{ padding-block:clamp(88px,14vw,210px); background:transparent; } :root[data-skin="brodovitch"] .section--alt{ background:var(--surface); border-block:0; } :root[data-skin="brodovitch"] .section--showcase{ background:var(--bg); } :root[data-skin="brodovitch"] .section-head{ max-width:none; display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(16px,3vw,44px); align-items:end; margin-bottom:clamp(46px,8vw,120px); } :root[data-skin="brodovitch"] .section-head .eyebrow{ grid-column:2 / 4; } :root[data-skin="brodovitch"] .section-head h2{ grid-column:5 / 12; font-family:var(--serif); font-weight:400; font-style:italic; letter-spacing:-.055em; line-height:.92; color:var(--ink); } :root[data-skin="brodovitch"] .btn{ border-radius:0; border:1px solid var(--ink); box-shadow:none; letter-spacing:.16em; text-transform:uppercase; } :root[data-skin="brodovitch"] .btn-primary{ background:var(--ink); color:var(--bg); } :root[data-skin="brodovitch"] .btn-ghost{ background:transparent; color:var(--ink); } :root[data-skin="brodovitch"] input, :root[data-skin="brodovitch"] select, :root[data-skin="brodovitch"] textarea{ border-radius:0; background:var(--surface); border:0; border-bottom:1px solid var(--line-strong); box-shadow:none; color:var(--ink); } :root[data-skin="brodovitch"] .card-media, :root[data-skin="brodovitch"] .about-portrait{ background:var(--surface-2); padding:0; border-radius:0; box-shadow:0 30px 60px -46px rgba(0,0,0,.34); } :root[data-skin="brodovitch"] .card:nth-child(3n+2) .card-media{ margin-top:clamp(26px,5vw,76px); } :root[data-skin="brodovitch"] .site-footer{ background:var(--surface); color:var(--ink-soft); border-top:0; } :root[data-skin="brodovitch"] .site-footer h4{ font-family:var(--sans); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-faint); } :root[data-skin="brodovitch"] .site-footer a{ color:var(--ink); text-decoration-thickness:1px; text-underline-offset:6px; } /* ---- fleckhaus (twen modular shock: strict 12-column machinery colliding with orange public voice). Uses 2 scaffold layers. ---- */ body[data-struct="fleckhaus"] .skin-structure-layer:nth-child(1){ top:12vh; right:-10vw; width:52vw; height:42vh; background:var(--accent); opacity:.18; } body[data-struct="fleckhaus"] .skin-structure-layer:nth-child(2){ left:-6vw; bottom:8vh; width:44vw; height:28vh; background:#14120F; opacity:.10; } :root[data-skin="fleckhaus"] .site-header{ background:var(--ink); border-bottom:6px solid var(--accent); box-shadow:none; } :root[data-skin="fleckhaus"] .nav{ min-height:68px; gap:clamp(10px,2vw,30px); } :root[data-skin="fleckhaus"] .brand{ font-family:var(--sans); font-weight:900; letter-spacing:-.06em; text-transform:uppercase; color:var(--accent-ink); } :root[data-skin="fleckhaus"] .nav-links{ gap:0; } :root[data-skin="fleckhaus"] .nav-links a{ position:relative; font-family:var(--sans); font-weight:800; color:var(--accent-ink); text-transform:uppercase; letter-spacing:.02em; padding:12px 14px; } :root[data-skin="fleckhaus"] .nav-links a::after{ height:5px; background:var(--accent); bottom:2px; } :root[data-skin="fleckhaus"] .nav-right{ gap:8px; } :root[data-skin="fleckhaus"] .cart-btn{ background:var(--accent); border:0; color:var(--accent-ink); border-radius:0; box-shadow:none; font-weight:800; text-transform:uppercase; } :root[data-skin="fleckhaus"] .hero{ padding-block:clamp(54px,9vw,132px); background:linear-gradient(90deg, var(--accent) 0 28%, transparent 28% 100%); } :root[data-skin="fleckhaus"] .hero-grid{ grid-template-columns:repeat(12,1fr); gap:clamp(12px,2vw,30px); align-items:center; } :root[data-skin="fleckhaus"] .hero-grid > *:first-child{ grid-column:1 / 7; background:var(--ink); color:var(--accent-ink); padding:clamp(20px,4vw,58px); } :root[data-skin="fleckhaus"] .hero-art{ grid-column:7 / 13; background:var(--ink); padding:clamp(6px,.8vw,10px); border-radius:0; box-shadow:none; filter:grayscale(1) contrast(1.1); } :root[data-skin="fleckhaus"] .hero .eyebrow, :root[data-skin="fleckhaus"] .eyebrow{ font-family:var(--sans); font-weight:900; color:var(--accent); letter-spacing:.12em; text-transform:uppercase; } :root[data-skin="fleckhaus"] .hero h1{ font-family:var(--sans); font-weight:900; text-transform:uppercase; letter-spacing:-.075em; line-height:.78; color:var(--accent-ink); } :root[data-skin="fleckhaus"] .hero .lead{ max-width:42ch; color:rgba(255,255,255,.82); font-family:var(--sans); font-weight:700; line-height:1.42; } :root[data-skin="fleckhaus"] .hero-cta{ gap:8px; } :root[data-skin="fleckhaus"] .section{ padding-block:clamp(54px,8vw,116px); background:var(--bg); } :root[data-skin="fleckhaus"] .section--alt{ background:var(--surface); border-block:6px solid var(--ink); } :root[data-skin="fleckhaus"] .section--showcase{ background:var(--ink); } :root[data-skin="fleckhaus"] .section-head{ max-width:none; display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(10px,1.8vw,26px); align-items:stretch; margin-bottom:clamp(24px,4vw,58px); } :root[data-skin="fleckhaus"] .section-head .eyebrow{ grid-column:1 / 4; align-self:end; } :root[data-skin="fleckhaus"] .section-head h2{ grid-column:4 / 13; background:var(--accent); color:var(--accent-ink); font-family:var(--sans); font-weight:900; text-transform:uppercase; letter-spacing:-.065em; line-height:.8; padding:clamp(12px,2vw,28px); } :root[data-skin="fleckhaus"] .btn{ border-radius:0; border:3px solid var(--ink); box-shadow:none; font-family:var(--sans); font-weight:900; text-transform:uppercase; letter-spacing:.02em; } :root[data-skin="fleckhaus"] .btn-primary{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); } :root[data-skin="fleckhaus"] .btn-ghost{ background:var(--accent-ink); color:var(--ink); } :root[data-skin="fleckhaus"] input, :root[data-skin="fleckhaus"] select, :root[data-skin="fleckhaus"] textarea{ border-radius:0; border:3px solid var(--ink); background:var(--surface); color:var(--ink); box-shadow:none; font-weight:700; } :root[data-skin="fleckhaus"] .card-media, :root[data-skin="fleckhaus"] .about-portrait{ background:var(--ink); padding:clamp(6px,.8vw,10px); border-radius:0; box-shadow:none; filter:grayscale(1) contrast(1.1); } :root[data-skin="fleckhaus"] .site-footer{ background:var(--ink); color:var(--accent-ink); border-top:10px solid var(--accent); } :root[data-skin="fleckhaus"] .site-footer h4{ font-family:var(--sans); font-weight:900; text-transform:uppercase; letter-spacing:.02em; color:var(--accent); } :root[data-skin="fleckhaus"] .site-footer a{ color:var(--accent-ink); text-decoration-color:var(--accent); text-decoration-thickness:3px; text-underline-offset:4px; } /* ---- broadsheet (front-page order: ruled columns, ranked headlines, civic newsprint hierarchy). Uses 1 scaffold layer. ---- */ body[data-struct="broadsheet"] .skin-structure-layer:nth-child(1){ background-image:repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), rgba(26,24,20,.08) calc(25% - 1px) 25%), repeating-linear-gradient(0deg, rgba(26,24,20,.035) 0 1px, transparent 1px 34px); opacity:.72; } :root[data-skin="broadsheet"] .site-header{ background:var(--surface); border-bottom:4px double var(--ink); box-shadow:none; } :root[data-skin="broadsheet"] .nav{ min-height:86px; display:grid; grid-template-columns:1fr auto 1fr; gap:clamp(14px,2vw,28px); align-items:end; } :root[data-skin="broadsheet"] .brand{ grid-column:2; font-family:var(--serif); font-weight:900; letter-spacing:-.055em; font-size:clamp(28px,4vw,58px); color:var(--ink); } :root[data-skin="broadsheet"] .nav-links{ grid-column:1; grid-row:1; gap:clamp(10px,1.4vw,18px); align-self:end; } :root[data-skin="broadsheet"] .nav-links a{ position:relative; font-family:var(--sans); font-size:10px; font-weight:700; color:var(--ink-soft); letter-spacing:.14em; text-transform:uppercase; padding:6px 0; } :root[data-skin="broadsheet"] .nav-links a::after{ height:1px; background:var(--accent); } :root[data-skin="broadsheet"] .nav-right{ grid-column:3; justify-self:end; align-self:end; } :root[data-skin="broadsheet"] .cart-btn{ border:1px solid var(--ink); background:var(--surface); color:var(--ink); border-radius:0; box-shadow:none; font-family:var(--sans); font-weight:700; } :root[data-skin="broadsheet"] .hero{ padding-block:clamp(48px,8vw,116px); background:linear-gradient(180deg, transparent 0 calc(100% - 4px), var(--ink) calc(100% - 4px) calc(100% - 2px), transparent calc(100% - 2px)); } :root[data-skin="broadsheet"] .hero-grid{ grid-template-columns:repeat(4,1fr); gap:0; align-items:start; border-top:3px double var(--ink); border-left:1px solid var(--line); } :root[data-skin="broadsheet"] .hero-grid > *:first-child{ grid-column:1 / 3; padding:clamp(18px,3vw,40px); border-right:1px solid var(--line); } :root[data-skin="broadsheet"] .hero-art{ grid-column:3 / 5; background:var(--surface); padding:clamp(14px,2vw,24px); border-right:1px solid var(--line); border-bottom:1px solid var(--line); border-radius:0; box-shadow:none; filter:grayscale(1) contrast(1.06); } :root[data-skin="broadsheet"] .hero .eyebrow, :root[data-skin="broadsheet"] .eyebrow{ font-family:var(--sans); font-weight:700; color:var(--accent); letter-spacing:.16em; text-transform:uppercase; font-size:10px; } :root[data-skin="broadsheet"] .hero h1{ font-family:var(--serif); font-weight:900; letter-spacing:-.055em; line-height:.86; color:var(--ink); } :root[data-skin="broadsheet"] .hero .lead{ max-width:45ch; color:var(--ink-soft); font-family:var(--serif); font-size:clamp(17px,1.25vw,20px); line-height:1.55; } :root[data-skin="broadsheet"] .hero-cta{ gap:10px; } :root[data-skin="broadsheet"] .section{ padding-block:clamp(54px,8vw,120px); background:var(--bg); } :root[data-skin="broadsheet"] .section--alt{ background:var(--surface); border-block:3px double var(--ink); } :root[data-skin="broadsheet"] .section--showcase{ background:var(--bg); } :root[data-skin="broadsheet"] .section-head{ max-width:none; display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-bottom:0; border-top:3px double var(--ink); border-bottom:1px solid var(--line); } :root[data-skin="broadsheet"] .section-head .eyebrow{ grid-column:1; padding:12px 16px; border-right:1px solid var(--line); align-self:stretch; } :root[data-skin="broadsheet"] .section-head h2{ grid-column:2 / 5; padding:10px 16px 14px; font-family:var(--serif); font-weight:900; letter-spacing:-.045em; line-height:.9; color:var(--ink); } :root[data-skin="broadsheet"] .btn{ border-radius:0; border:1px solid var(--ink); box-shadow:none; font-family:var(--sans); font-weight:800; letter-spacing:.12em; text-transform:uppercase; } :root[data-skin="broadsheet"] .btn-primary{ background:var(--ink); color:var(--bg); } :root[data-skin="broadsheet"] .btn-ghost{ background:var(--surface); color:var(--ink); } :root[data-skin="broadsheet"] input, :root[data-skin="broadsheet"] select, :root[data-skin="broadsheet"] textarea{ border-radius:0; background:var(--surface); border:1px solid var(--ink); color:var(--ink); box-shadow:none; } :root[data-skin="broadsheet"] .card-media, :root[data-skin="broadsheet"] .about-portrait{ background:var(--surface); padding:clamp(12px,1.6vw,20px); border:1px solid var(--line); border-radius:0; box-shadow:none; filter:grayscale(1) contrast(1.06); } :root[data-skin="broadsheet"] .site-footer{ background:var(--surface); color:var(--ink-soft); border-top:4px double var(--ink); } :root[data-skin="broadsheet"] .site-footer h4{ font-family:var(--serif); font-weight:900; color:var(--ink); } :root[data-skin="broadsheet"] .site-footer a{ color:var(--ink); text-decoration-color:var(--accent); text-underline-offset:4px; } @media (max-width: 820px){ :root[data-skin="brodovitch"] .hero-grid, :root[data-skin="fleckhaus"] .hero-grid, :root[data-skin="broadsheet"] .hero-grid{ grid-template-columns:1fr; } :root[data-skin="brodovitch"] .hero-grid > *:first-child, :root[data-skin="brodovitch"] .hero-art, :root[data-skin="fleckhaus"] .hero-grid > *:first-child, :root[data-skin="fleckhaus"] .hero-art, :root[data-skin="broadsheet"] .hero-grid > *:first-child, :root[data-skin="broadsheet"] .hero-art{ grid-column:1; transform:none; } :root[data-skin="broadsheet"] .nav{ display:flex; align-items:center; } :root[data-skin="broadsheet"] .brand, :root[data-skin="broadsheet"] .nav-links, :root[data-skin="broadsheet"] .nav-right{ grid-column:auto; grid-row:auto; } } /* ===== p07-japanese1.css ===== */ /* ---- sabi (patina, modest imperfection, photobook breath) — 1 scaffold layer ---- */ body[data-struct="sabi"] .skin-structure-layer:nth-child(1){ inset:0; background-image:radial-gradient(circle at 18% 22%, rgba(122,90,58,.08) 0 1px, transparent 1px), radial-gradient(circle at 72% 64%, rgba(42,36,27,.05) 0 1px, transparent 1px); background-size:38px 38px, 54px 54px; opacity:.65; } :root[data-skin="sabi"] .site-header{ background:rgba(241,234,220,.86); border-bottom:1px solid var(--line); box-shadow:0 18px 44px rgba(60,45,25,.08); } :root[data-skin="sabi"] .nav{ align-items:flex-end; padding-block:clamp(18px,2.4vw,34px); } :root[data-skin="sabi"] .brand{ font-family:var(--serif); font-style:italic; letter-spacing:.03em; color:var(--ink); } :root[data-skin="sabi"] .nav-links a{ color:var(--ink-soft); padding-block:.35rem; } :root[data-skin="sabi"] .nav-links a::after{ height:1px; background:var(--accent); opacity:.55; } :root[data-skin="sabi"] .nav-right, :root[data-skin="sabi"] .cart-btn{ border-color:var(--line); background:var(--surface); color:var(--ink); } :root[data-skin="sabi"] .hero{ padding-block:clamp(76px,12vw,170px) clamp(58px,9vw,126px); } :root[data-skin="sabi"] .hero-grid{ grid-template-columns:minmax(0,.92fr) minmax(280px,1.08fr); gap:clamp(36px,7vw,112px); align-items:end; } :root[data-skin="sabi"] .hero h1{ max-width:10.5ch; font-family:var(--serif); font-style:italic; font-weight:400; line-height:.98; color:var(--ink); } :root[data-skin="sabi"] .hero .lead{ max-width:42rem; color:var(--ink-soft); } :root[data-skin="sabi"] .hero .eyebrow, :root[data-skin="sabi"] .eyebrow{ color:var(--accent); letter-spacing:.18em; } :root[data-skin="sabi"] .hero-cta{ margin-top:clamp(28px,4vw,54px); } :root[data-skin="sabi"] .hero-art, :root[data-skin="sabi"] .card-media, :root[data-skin="sabi"] .about-portrait{ background:transparent; padding:clamp(8px,1.2vw,16px); border:1px solid rgba(122,90,58,.18); box-shadow:0 28px 70px -44px rgba(60,45,25,.58); } :root[data-skin="sabi"] .section{ padding-block:clamp(70px,11vw,150px); } :root[data-skin="sabi"] .section--alt{ background:rgba(241,234,220,.5); border-block:1px solid var(--line); } :root[data-skin="sabi"] .section-head{ max-width:760px; margin-inline:0 auto; } :root[data-skin="sabi"] .section-head h2{ font-family:var(--serif); font-weight:400; font-style:italic; color:var(--ink); } :root[data-skin="sabi"] .btn, :root[data-skin="sabi"] input, :root[data-skin="sabi"] select, :root[data-skin="sabi"] textarea{ border-radius:2px; border-color:var(--line); background:var(--surface); color:var(--ink); } :root[data-skin="sabi"] .btn-primary{ background:var(--accent); border-color:var(--accent); color:var(--surface); } :root[data-skin="sabi"] .btn-ghost{ background:transparent; color:var(--ink); } :root[data-skin="sabi"] .site-footer{ background:var(--surface-2); border-top:1px solid var(--line-strong); color:var(--ink-soft); } :root[data-skin="sabi"] .site-footer h4, :root[data-skin="sabi"] .site-footer a{ color:var(--ink); } /* ---- iki (urbane restraint, indigo discipline, one vermilion wit) — 1 scaffold layer ---- */ body[data-struct="iki"] .skin-structure-layer:nth-child(1){ top:0; right:clamp(24px,7vw,118px); width:2px; height:100%; background:linear-gradient(180deg, transparent 0 8%, rgba(34,54,110,.35) 8% 86%, transparent 86%); } :root[data-skin="iki"] .site-header{ background:rgba(245,243,236,.94); border-bottom:2px solid var(--line-strong); } :root[data-skin="iki"] .nav{ padding-block:clamp(14px,1.8vw,26px); gap:clamp(24px,4vw,56px); } :root[data-skin="iki"] .brand{ font-family:var(--serif); font-weight:400; letter-spacing:.04em; color:var(--ink); } :root[data-skin="iki"] .nav-links a{ color:var(--ink); letter-spacing:.08em; } :root[data-skin="iki"] .nav-links a::after{ height:2px; background:var(--accent); transform-origin:left center; } :root[data-skin="iki"] .nav-right, :root[data-skin="iki"] .cart-btn{ background:var(--surface); border:1px solid var(--line-strong); color:var(--ink); } :root[data-skin="iki"] .hero{ padding-block:clamp(64px,9vw,128px); } :root[data-skin="iki"] .hero-grid{ grid-template-columns:minmax(0,1fr) minmax(300px,.86fr); gap:clamp(28px,5vw,76px); } :root[data-skin="iki"] .hero h1{ font-family:var(--serif); font-weight:400; max-width:12ch; letter-spacing:.015em; } :root[data-skin="iki"] .hero .lead{ max-width:39rem; color:var(--ink-soft); } :root[data-skin="iki"] .hero .eyebrow, :root[data-skin="iki"] .eyebrow{ color:var(--accent); letter-spacing:.22em; } :root[data-skin="iki"] .hero-cta{ gap:12px; } :root[data-skin="iki"] .hero-art, :root[data-skin="iki"] .card-media, :root[data-skin="iki"] .about-portrait{ padding:0 0 10px; background:linear-gradient(var(--line-strong),var(--line-strong)) left bottom / 100% 2px no-repeat; box-shadow:none; } :root[data-skin="iki"] .section{ padding-block:clamp(62px,8vw,118px); } :root[data-skin="iki"] .section--alt{ background:var(--surface-2); border-block:2px solid var(--line-strong); } :root[data-skin="iki"] .section-head{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:clamp(18px,3vw,42px); } :root[data-skin="iki"] .section-head h2{ font-family:var(--serif); font-weight:400; letter-spacing:.02em; } :root[data-skin="iki"] .btn, :root[data-skin="iki"] input, :root[data-skin="iki"] select, :root[data-skin="iki"] textarea{ border-radius:0; border-color:var(--line-strong); background:var(--surface); color:var(--ink); } :root[data-skin="iki"] .btn-primary{ background:var(--ink); border-color:var(--ink); color:var(--bg); } :root[data-skin="iki"] .btn-primary::after{ background:var(--accent); } :root[data-skin="iki"] .btn-ghost{ color:var(--ink); } :root[data-skin="iki"] .site-footer{ background:var(--ink); color:var(--bg); border-top:4px solid var(--accent); } :root[data-skin="iki"] .site-footer h4, :root[data-skin="iki"] .site-footer a{ color:var(--bg); } /* ---- shibui (austere subtlety, low-chroma hidden richness) — 0 scaffold layers ---- */ :root[data-skin="shibui"] .site-header{ background:rgba(218,214,204,.92); border-bottom:1px solid var(--line); box-shadow:none; } :root[data-skin="shibui"] .nav{ padding-block:clamp(12px,1.6vw,22px); } :root[data-skin="shibui"] .brand{ color:var(--ink); font-weight:500; letter-spacing:.02em; } :root[data-skin="shibui"] .nav-links a{ color:var(--ink-soft); letter-spacing:.04em; } :root[data-skin="shibui"] .nav-links a::after{ height:1px; background:var(--accent); opacity:.42; } :root[data-skin="shibui"] .nav-right, :root[data-skin="shibui"] .cart-btn{ background:var(--surface); border:1px solid var(--line); color:var(--ink); } :root[data-skin="shibui"] .hero{ padding-block:clamp(58px,8vw,112px); } :root[data-skin="shibui"] .hero-grid{ gap:clamp(24px,4vw,64px); align-items:center; } :root[data-skin="shibui"] .hero h1{ max-width:13ch; font-family:var(--serif); font-weight:400; color:var(--ink); } :root[data-skin="shibui"] .hero .lead{ max-width:40rem; color:var(--ink-soft); } :root[data-skin="shibui"] .hero .eyebrow, :root[data-skin="shibui"] .eyebrow{ color:var(--accent); letter-spacing:.16em; } :root[data-skin="shibui"] .hero-art, :root[data-skin="shibui"] .card-media, :root[data-skin="shibui"] .about-portrait{ background:var(--surface); padding:clamp(10px,1.5vw,18px); border:1px solid var(--line); box-shadow:none; } :root[data-skin="shibui"] .section{ padding-block:clamp(58px,8vw,116px); } :root[data-skin="shibui"] .section--alt{ background:var(--surface-2); border-block:1px solid var(--line); } :root[data-skin="shibui"] .section-head{ max-width:820px; } :root[data-skin="shibui"] .section-head h2{ font-family:var(--serif); font-weight:400; color:var(--ink); } :root[data-skin="shibui"] .btn, :root[data-skin="shibui"] input, :root[data-skin="shibui"] select, :root[data-skin="shibui"] textarea{ border-radius:0; background:var(--surface); border-color:var(--line); color:var(--ink); } :root[data-skin="shibui"] .btn-primary{ background:var(--accent); border-color:var(--accent); color:var(--surface); } :root[data-skin="shibui"] .btn-ghost{ color:var(--ink-soft); } :root[data-skin="shibui"] .site-footer{ background:var(--surface-2); color:var(--ink-soft); border-top:1px solid var(--line); } :root[data-skin="shibui"] .site-footer h4, :root[data-skin="shibui"] .site-footer a{ color:var(--ink); } /* ---- mono-aware (transience, sakura tenderness, beauty passing) — 2 scaffold layers ---- */ body[data-struct="mono-aware"] .skin-structure-layer:nth-child(1){ top:8vh; left:-12vw; width:55vw; height:48vh; background:radial-gradient(ellipse at 50% 50%, rgba(201,122,134,.16), transparent 66%); filter:blur(10px); } body[data-struct="mono-aware"] .skin-structure-layer:nth-child(2){ inset:0; background-image:radial-gradient(circle at 20% 12%, rgba(201,122,134,.34) 0 2px, transparent 3px), radial-gradient(circle at 66% 26%, rgba(201,122,134,.24) 0 3px, transparent 4px), radial-gradient(circle at 84% 60%, rgba(201,122,134,.28) 0 2px, transparent 3px), radial-gradient(circle at 40% 78%, rgba(201,122,134,.2) 0 2px, transparent 3px), radial-gradient(circle at 12% 52%, rgba(201,122,134,.18) 0 2px, transparent 3px), radial-gradient(circle at 54% 46%, rgba(201,122,134,.16) 0 2px, transparent 3px); } :root[data-skin="mono-aware"] .site-header{ background:rgba(255,248,246,.82); border-bottom:1px solid var(--line); } :root[data-skin="mono-aware"] .nav{ padding-block:clamp(16px,2.4vw,32px); } :root[data-skin="mono-aware"] .brand{ font-family:var(--serif); font-style:italic; font-weight:400; color:var(--ink); } :root[data-skin="mono-aware"] .nav-links a{ color:var(--ink-soft); } :root[data-skin="mono-aware"] .nav-links a::after{ height:1px; background:var(--accent); opacity:.48; } :root[data-skin="mono-aware"] .nav-right, :root[data-skin="mono-aware"] .cart-btn{ background:var(--surface); border:1px solid var(--line); color:var(--ink); } :root[data-skin="mono-aware"] .hero{ padding-block:clamp(86px,13vw,178px) clamp(72px,10vw,140px); } :root[data-skin="mono-aware"] .hero-grid{ grid-template-columns:minmax(0,1fr) minmax(280px,.9fr); gap:clamp(42px,8vw,124px); align-items:center; } :root[data-skin="mono-aware"] .hero h1{ font-family:var(--serif); font-style:italic; font-weight:400; max-width:11ch; color:var(--ink); } :root[data-skin="mono-aware"] .hero .lead{ max-width:37rem; color:var(--ink-soft); } :root[data-skin="mono-aware"] .hero .eyebrow, :root[data-skin="mono-aware"] .eyebrow{ color:var(--accent); letter-spacing:.14em; } :root[data-skin="mono-aware"] .hero-cta{ margin-top:clamp(30px,5vw,64px); } :root[data-skin="mono-aware"] .hero-art, :root[data-skin="mono-aware"] .card-media, :root[data-skin="mono-aware"] .about-portrait{ background:rgba(255,248,246,.68); padding:clamp(12px,2vw,24px); border:1px solid var(--line); box-shadow:0 24px 58px -38px rgba(120,70,80,.32); } :root[data-skin="mono-aware"] .section{ padding-block:clamp(78px,12vw,164px); } :root[data-skin="mono-aware"] .section--alt{ background:linear-gradient(180deg, rgba(255,248,246,.72), rgba(242,224,221,.5)); border-block:1px solid transparent; border-image:linear-gradient(90deg, transparent, rgba(201,122,134,.5), transparent) 1; } :root[data-skin="mono-aware"] .section-head{ max-width:760px; margin-inline:auto; text-align:center; } :root[data-skin="mono-aware"] .section-head h2{ font-family:var(--serif); font-style:italic; font-weight:400; color:var(--ink); } :root[data-skin="mono-aware"] .btn, :root[data-skin="mono-aware"] input, :root[data-skin="mono-aware"] select, :root[data-skin="mono-aware"] textarea{ border-radius:999px; background:var(--surface); border-color:var(--line); color:var(--ink); } :root[data-skin="mono-aware"] .btn-primary{ background:var(--accent); border-color:var(--accent); color:var(--surface); } :root[data-skin="mono-aware"] .btn-ghost{ background:transparent; color:var(--ink-soft); } :root[data-skin="mono-aware"] .site-footer{ background:var(--surface-2); color:var(--ink-soft); border-top:1px solid var(--line); } :root[data-skin="mono-aware"] .site-footer h4, :root[data-skin="mono-aware"] .site-footer a{ color:var(--ink); } /* ---- ukiyoe (woodblock sheet culture, carved outlines, flat colour) — 1 scaffold layer ---- */ body[data-struct="ukiyoe"] .skin-structure-layer:nth-child(1){ inset:0; background-image:linear-gradient(90deg, rgba(23,33,60,.07) 0 2px, transparent 2px), linear-gradient(0deg, rgba(196,68,46,.05) 0 1px, transparent 1px); background-size:96px 100%, 100% 72px; opacity:.75; } :root[data-skin="ukiyoe"] .site-header{ background:var(--surface); border-bottom:3px solid var(--ink); box-shadow:none; } :root[data-skin="ukiyoe"] .nav{ padding-block:clamp(12px,1.8vw,26px); } :root[data-skin="ukiyoe"] .brand{ font-family:var(--serif); font-weight:700; color:var(--ink); } :root[data-skin="ukiyoe"] .nav-links a{ color:var(--ink); font-weight:700; letter-spacing:.06em; } :root[data-skin="ukiyoe"] .nav-links a::after{ height:3px; background:var(--accent); } :root[data-skin="ukiyoe"] .nav-right, :root[data-skin="ukiyoe"] .cart-btn{ background:var(--surface); border:2px solid var(--ink); color:var(--ink); } :root[data-skin="ukiyoe"] .hero{ padding-block:clamp(56px,8vw,116px); } :root[data-skin="ukiyoe"] .hero-grid{ grid-template-columns:minmax(0,.95fr) minmax(300px,1.05fr); gap:clamp(22px,4vw,58px); align-items:stretch; } :root[data-skin="ukiyoe"] .hero h1{ font-family:var(--serif); font-weight:800; line-height:.95; color:var(--ink); text-shadow:2px 2px 0 var(--surface); } :root[data-skin="ukiyoe"] .hero .lead{ max-width:42rem; color:var(--ink-soft); } :root[data-skin="ukiyoe"] .hero .eyebrow, :root[data-skin="ukiyoe"] .eyebrow{ color:var(--accent); letter-spacing:.16em; font-weight:700; } :root[data-skin="ukiyoe"] .hero-art, :root[data-skin="ukiyoe"] .card-media, :root[data-skin="ukiyoe"] .about-portrait{ background:var(--surface); padding:clamp(10px,1.5vw,18px); border:3px solid var(--ink); box-shadow:8px 8px 0 var(--surface-2); } :root[data-skin="ukiyoe"] .section{ padding-block:clamp(58px,8vw,118px); } :root[data-skin="ukiyoe"] .section--alt{ background:var(--surface-2); border-block:3px solid var(--ink); } :root[data-skin="ukiyoe"] .section-head{ padding:clamp(18px,3vw,34px); background:var(--surface); border:2px solid var(--ink); box-shadow:6px 6px 0 rgba(23,33,60,.16); } :root[data-skin="ukiyoe"] .section-head h2{ font-family:var(--serif); font-weight:800; color:var(--ink); } :root[data-skin="ukiyoe"] .btn, :root[data-skin="ukiyoe"] input, :root[data-skin="ukiyoe"] select, :root[data-skin="ukiyoe"] textarea{ border-radius:0; border:2px solid var(--ink); background:var(--surface); color:var(--ink); } :root[data-skin="ukiyoe"] .btn-primary{ background:var(--accent); border-color:var(--ink); color:var(--surface); box-shadow:4px 4px 0 var(--ink); } :root[data-skin="ukiyoe"] .btn-ghost{ background:var(--surface); color:var(--ink); } :root[data-skin="ukiyoe"] .site-footer{ background:var(--ink); color:var(--surface); border-top:4px solid var(--accent); } :root[data-skin="ukiyoe"] .site-footer h4, :root[data-skin="ukiyoe"] .site-footer a{ color:var(--surface); } /* ---- sumie (ink-wash restraint, one brush, charged void) — 2 scaffold layers ---- */ body[data-struct="sumie"] .skin-structure-layer:nth-child(1){ top:10vh; left:8vw; width:34vw; height:62vh; background:radial-gradient(ellipse at 42% 26%, rgba(44,44,44,.11), transparent 62%); filter:blur(18px); } body[data-struct="sumie"] .skin-structure-layer:nth-child(2){ right:12vw; bottom:8vh; width:1px; height:50vh; background:linear-gradient(180deg, transparent, rgba(44,44,44,.38), transparent); } :root[data-skin="sumie"] .site-header{ background:rgba(246,244,238,.78); border-bottom:1px solid var(--line); } :root[data-skin="sumie"] .nav{ padding-block:clamp(22px,3vw,44px); } :root[data-skin="sumie"] .brand{ font-family:var(--serif); font-weight:400; letter-spacing:.06em; color:var(--ink); } :root[data-skin="sumie"] .nav-links a{ color:var(--ink-soft); letter-spacing:.12em; } :root[data-skin="sumie"] .nav-links a::after{ height:1px; background:var(--ink); opacity:.5; } :root[data-skin="sumie"] .nav-right, :root[data-skin="sumie"] .cart-btn{ background:transparent; border:1px solid var(--line); color:var(--ink); } :root[data-skin="sumie"] .hero{ padding-block:clamp(100px,16vw,220px); } :root[data-skin="sumie"] .hero-grid{ grid-template-columns:minmax(0,.78fr) minmax(260px,.72fr); justify-content:center; gap:clamp(70px,12vw,180px); align-items:center; } :root[data-skin="sumie"] .hero h1{ font-family:var(--serif); font-weight:400; max-width:9ch; line-height:1.05; color:var(--ink); } :root[data-skin="sumie"] .hero .lead{ max-width:31rem; color:var(--ink-soft); } :root[data-skin="sumie"] .hero .eyebrow, :root[data-skin="sumie"] .eyebrow{ color:var(--accent); letter-spacing:.3em; } :root[data-skin="sumie"] .hero-cta{ margin-top:clamp(38px,6vw,82px); } :root[data-skin="sumie"] .hero-art, :root[data-skin="sumie"] .card-media, :root[data-skin="sumie"] .about-portrait{ background:transparent; padding:0; border:0; box-shadow:none; } :root[data-skin="sumie"] .section{ padding-block:clamp(98px,15vw,210px); } :root[data-skin="sumie"] .section--alt{ background:transparent; border-block:1px solid var(--line); } :root[data-skin="sumie"] .section-head{ max-width:560px; margin-inline:auto; text-align:center; } :root[data-skin="sumie"] .section-head h2{ font-family:var(--serif); font-weight:400; letter-spacing:.04em; } :root[data-skin="sumie"] .btn, :root[data-skin="sumie"] input, :root[data-skin="sumie"] select, :root[data-skin="sumie"] textarea{ border-radius:0; border-color:var(--line); background:rgba(251,250,245,.68); color:var(--ink); } :root[data-skin="sumie"] .btn-primary{ background:var(--ink); border-color:var(--ink); color:var(--bg); } :root[data-skin="sumie"] .btn-ghost{ background:transparent; color:var(--ink); } :root[data-skin="sumie"] .site-footer{ background:var(--surface-2); color:var(--ink-soft); border-top:1px solid var(--line); } :root[data-skin="sumie"] .site-footer h4, :root[data-skin="sumie"] .site-footer a{ color:var(--ink); } /* ---- rinpa (gold screen opulence disciplined by sumi contour) — 2 scaffold layers ---- */ body[data-struct="rinpa"] .skin-structure-layer:nth-child(1){ top:-18vh; left:-8vw; width:70vw; height:58vh; background:radial-gradient(ellipse at 50% 50%, rgba(255,232,142,.28), transparent 68%); } body[data-struct="rinpa"] .skin-structure-layer:nth-child(2){ right:-12vw; bottom:0; width:62vw; height:72vh; background:radial-gradient(ellipse at 50% 50%, rgba(156,43,43,.16), transparent 64%); } :root[data-skin="rinpa"] .site-header{ background:rgba(198,169,74,.92); border-bottom:3px solid var(--ink); } :root[data-skin="rinpa"] .nav{ padding-block:clamp(18px,2.6vw,36px); } :root[data-skin="rinpa"] .brand{ font-family:var(--serif); font-weight:700; color:var(--ink); } :root[data-skin="rinpa"] .nav-links a{ color:var(--ink); font-weight:700; letter-spacing:.08em; } :root[data-skin="rinpa"] .nav-links a::after{ height:3px; background:var(--accent); } :root[data-skin="rinpa"] .nav-right, :root[data-skin="rinpa"] .cart-btn{ background:var(--surface); border:2px solid var(--ink); color:var(--ink); } :root[data-skin="rinpa"] .hero{ padding-block:clamp(72px,10vw,150px); } :root[data-skin="rinpa"] .hero-grid{ gap:clamp(28px,5vw,76px); align-items:center; } :root[data-skin="rinpa"] .hero h1{ font-family:var(--serif); font-weight:800; max-width:10ch; color:var(--ink); } :root[data-skin="rinpa"] .hero .lead{ max-width:40rem; color:var(--ink-soft); } :root[data-skin="rinpa"] .hero .eyebrow, :root[data-skin="rinpa"] .eyebrow{ color:var(--accent); letter-spacing:.18em; font-weight:700; } :root[data-skin="rinpa"] .hero-art, :root[data-skin="rinpa"] .card-media, :root[data-skin="rinpa"] .about-portrait{ background:var(--surface); padding:clamp(12px,2vw,26px); border:4px solid var(--ink); box-shadow:0 26px 58px -34px rgba(60,45,10,.56); } :root[data-skin="rinpa"] .section{ padding-block:clamp(66px,9vw,136px); } :root[data-skin="rinpa"] .section--alt{ background:var(--surface); border-block:3px solid var(--ink); } :root[data-skin="rinpa"] .section-head{ padding-block:clamp(14px,2vw,26px); border-top:3px solid var(--ink); border-bottom:3px solid var(--ink); } :root[data-skin="rinpa"] .section-head h2{ font-family:var(--serif); font-weight:800; color:var(--ink); } :root[data-skin="rinpa"] .btn, :root[data-skin="rinpa"] input, :root[data-skin="rinpa"] select, :root[data-skin="rinpa"] textarea{ border-radius:0; border:2px solid var(--ink); background:var(--surface); color:var(--ink); } :root[data-skin="rinpa"] .btn-primary{ background:var(--accent); border-color:var(--ink); color:var(--bg); } :root[data-skin="rinpa"] .btn-ghost{ background:transparent; color:var(--ink); } :root[data-skin="rinpa"] .site-footer{ background:var(--ink); color:var(--bg); border-top:4px solid var(--accent); } :root[data-skin="rinpa"] .site-footer h4, :root[data-skin="rinpa"] .site-footer a{ color:var(--bg); } /* ---- aizome (indigo dye vat, cloth depth, shibori reserve) — 2 scaffold layers ---- */ body[data-struct="aizome"] #skin-structure{ background:var(--bg); } body[data-struct="aizome"] .skin-structure-layer:nth-child(1){ inset:0; background:repeating-linear-gradient(90deg, rgba(230,238,248,.05) 0 1px, transparent 1px 4px), repeating-linear-gradient(0deg, rgba(8,16,34,.18) 0 1px, transparent 1px 4px), radial-gradient(ellipse at 18% 18%, rgba(228,236,246,.1), transparent 42%), radial-gradient(ellipse at 78% 72%, rgba(67,96,142,.26), transparent 48%); } body[data-struct="aizome"] .skin-structure-layer:nth-child(2){ top:0; left:9vw; width:1px; height:100%; background:linear-gradient(180deg, transparent, rgba(228,236,246,.34), transparent); box-shadow:18vw 0 0 rgba(228,236,246,.08), 54vw 0 0 rgba(228,236,246,.1); } :root[data-skin="aizome"] .site-header{ background:rgba(23,40,70,.9); border-bottom:1px solid var(--line-strong); } :root[data-skin="aizome"] .nav{ padding-block:clamp(16px,2.2vw,32px); } :root[data-skin="aizome"] .brand{ font-family:var(--serif); font-weight:400; color:var(--ink); letter-spacing:.06em; } :root[data-skin="aizome"] .nav-links a{ color:var(--ink-soft); letter-spacing:.12em; } :root[data-skin="aizome"] .nav-links a::after{ height:1px; background:var(--accent); opacity:.8; } :root[data-skin="aizome"] .nav-right, :root[data-skin="aizome"] .cart-btn{ background:var(--surface); border:1px solid var(--line-strong); color:var(--ink); } :root[data-skin="aizome"] .hero{ padding-block:clamp(72px,11vw,160px); } :root[data-skin="aizome"] .hero-grid{ gap:clamp(36px,7vw,116px); align-items:center; } :root[data-skin="aizome"] .hero h1{ font-family:var(--serif); font-weight:400; max-width:11ch; color:var(--ink); } :root[data-skin="aizome"] .hero .lead{ max-width:39rem; color:var(--ink-soft); } :root[data-skin="aizome"] .hero .eyebrow, :root[data-skin="aizome"] .eyebrow{ color:var(--accent); letter-spacing:.28em; } :root[data-skin="aizome"] .hero-art, :root[data-skin="aizome"] .card-media, :root[data-skin="aizome"] .about-portrait{ background:var(--surface); padding:clamp(10px,1.6vw,20px); border:1px solid var(--line-strong); box-shadow:0 34px 70px -42px rgba(0,0,0,.82); } :root[data-skin="aizome"] .section{ padding-block:clamp(66px,10vw,148px); } :root[data-skin="aizome"] .section--alt{ background:rgba(30,51,88,.72); border-block:1px solid var(--line); } :root[data-skin="aizome"] .section-head{ border-left:1px solid var(--accent); padding-left:clamp(18px,3vw,42px); } :root[data-skin="aizome"] .section-head h2{ font-family:var(--serif); font-weight:400; color:var(--ink); } :root[data-skin="aizome"] .btn, :root[data-skin="aizome"] input, :root[data-skin="aizome"] select, :root[data-skin="aizome"] textarea{ border-radius:0; border-color:var(--line-strong); background:var(--surface); color:var(--ink); } :root[data-skin="aizome"] .btn-primary{ background:var(--accent); border-color:var(--accent); color:var(--bg); } :root[data-skin="aizome"] .btn-ghost{ background:transparent; color:var(--ink); } :root[data-skin="aizome"] .site-footer{ background:#0f1d33; color:var(--ink-soft); border-top:1px solid var(--line-strong); } :root[data-skin="aizome"] .site-footer h4, :root[data-skin="aizome"] .site-footer a{ color:var(--ink); } /* ---- kintsugi (mended imperfection, gold repair as structure) — 1 scaffold layer ---- */ body[data-struct="kintsugi"] .skin-structure-layer:nth-child(1){ inset:0; background:linear-gradient(166deg, transparent 0 45.6%, rgba(184,145,47,.5) 45.6% 46%, transparent 46.4%), linear-gradient(26deg, transparent 0 61.7%, rgba(184,145,47,.4) 61.7% 62%, transparent 62.3%), linear-gradient(98deg, transparent 0 29.8%, rgba(184,145,47,.3) 29.8% 30.05%, transparent 30.3%), radial-gradient(circle at 46% 45%, rgba(184,145,47,.62) 0 5px, transparent 6px), radial-gradient(circle at 62% 60%, rgba(184,145,47,.5) 0 4px, transparent 5px), radial-gradient(circle at 30% 72%, rgba(184,145,47,.42) 0 3px, transparent 4px); opacity:.72; } :root[data-skin="kintsugi"] .site-header{ background:rgba(240,235,226,.9); border-bottom:2px solid var(--line-strong); } :root[data-skin="kintsugi"] .nav{ padding-block:clamp(14px,2vw,28px); } :root[data-skin="kintsugi"] .brand{ font-family:var(--serif); font-weight:400; color:var(--ink); } :root[data-skin="kintsugi"] .nav-links a{ color:var(--ink-soft); } :root[data-skin="kintsugi"] .nav-links a::after{ height:2px; background:var(--line-strong); } :root[data-skin="kintsugi"] .nav-right, :root[data-skin="kintsugi"] .cart-btn{ background:var(--surface); border:1px solid var(--line-strong); color:var(--ink); } :root[data-skin="kintsugi"] .hero{ padding-block:clamp(66px,10vw,146px); } :root[data-skin="kintsugi"] .hero-grid{ gap:clamp(30px,6vw,94px); align-items:center; } :root[data-skin="kintsugi"] .hero h1{ font-family:var(--serif); font-weight:400; max-width:12ch; color:var(--ink); } :root[data-skin="kintsugi"] .hero .lead{ max-width:41rem; color:var(--ink-soft); } :root[data-skin="kintsugi"] .hero .eyebrow, :root[data-skin="kintsugi"] .eyebrow{ color:var(--accent); letter-spacing:.18em; } :root[data-skin="kintsugi"] .hero-art, :root[data-skin="kintsugi"] .card-media, :root[data-skin="kintsugi"] .about-portrait{ position:relative; background:var(--surface); padding:clamp(12px,2vw,24px); border-top:3px solid var(--line-strong); box-shadow:0 22px 58px -38px rgba(51,48,42,.35); } :root[data-skin="kintsugi"] .hero-art::after, :root[data-skin="kintsugi"] .card-media::after, :root[data-skin="kintsugi"] .about-portrait::after{ content:""; position:absolute; top:8%; bottom:8%; left:64%; width:2px; background:linear-gradient(180deg, transparent, var(--line-strong), transparent); transform:skewX(-8deg); pointer-events:none; } :root[data-skin="kintsugi"] .section{ padding-block:clamp(62px,9vw,132px); } :root[data-skin="kintsugi"] .section--alt{ background:var(--surface-2); border-block:1px solid var(--line); } :root[data-skin="kintsugi"] .section-head{ border-top:2px solid var(--line-strong); padding-top:clamp(16px,2.5vw,34px); } :root[data-skin="kintsugi"] .section-head h2{ font-family:var(--serif); font-weight:400; color:var(--ink); } :root[data-skin="kintsugi"] .btn, :root[data-skin="kintsugi"] input, :root[data-skin="kintsugi"] select, :root[data-skin="kintsugi"] textarea{ border-radius:0; border-color:var(--line-strong); background:var(--surface); color:var(--ink); } :root[data-skin="kintsugi"] .btn-primary{ background:var(--line-strong); border-color:var(--line-strong); color:var(--surface); } :root[data-skin="kintsugi"] .btn-ghost{ color:var(--ink); } :root[data-skin="kintsugi"] .site-footer{ background:var(--surface-2); color:var(--ink-soft); border-top:3px solid var(--line-strong); } :root[data-skin="kintsugi"] .site-footer h4, :root[data-skin="kintsugi"] .site-footer a{ color:var(--ink); } /* ---- tanaka (Ikko Tanaka modernism, modular planes, Japan red) — 1 scaffold layer ---- */ body[data-struct="tanaka"] .skin-structure-layer:nth-child(1){ inset:0; background-image:linear-gradient(90deg, rgba(26,26,26,.12) 0 3px, transparent 3px), linear-gradient(0deg, rgba(26,26,26,.08) 0 3px, transparent 3px), linear-gradient(135deg, transparent 0 78%, rgba(200,16,46,.18) 78% 88%, transparent 88%); background-size:160px 100%, 100% 120px, 100% 100%; } :root[data-skin="tanaka"] .site-header{ background:var(--surface); border-bottom:4px solid var(--ink); } :root[data-skin="tanaka"] .nav{ padding-block:12px; } :root[data-skin="tanaka"] .brand{ font-family:var(--sans); font-weight:900; text-transform:uppercase; letter-spacing:.06em; color:var(--ink); } :root[data-skin="tanaka"] .nav-links a{ font-family:var(--sans); font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--ink); } :root[data-skin="tanaka"] .nav-links a::after{ height:4px; background:var(--accent); } :root[data-skin="tanaka"] .nav-right, :root[data-skin="tanaka"] .cart-btn{ border:3px solid var(--ink); background:var(--surface); color:var(--ink); border-radius:0; } :root[data-skin="tanaka"] .hero{ padding-block:clamp(48px,7vw,104px); } :root[data-skin="tanaka"] .hero-grid{ gap:0; align-items:stretch; border:4px solid var(--ink); background:var(--surface); } :root[data-skin="tanaka"] .hero-grid > *{ padding:clamp(22px,4vw,58px); } :root[data-skin="tanaka"] .hero h1{ font-family:var(--sans); font-weight:900; text-transform:uppercase; letter-spacing:-.035em; line-height:.88; color:var(--ink); } :root[data-skin="tanaka"] .hero .lead{ max-width:40rem; color:var(--ink-soft); } :root[data-skin="tanaka"] .hero .eyebrow, :root[data-skin="tanaka"] .eyebrow{ color:var(--accent); font-weight:900; letter-spacing:.16em; } :root[data-skin="tanaka"] .hero-art, :root[data-skin="tanaka"] .card-media, :root[data-skin="tanaka"] .about-portrait{ background:var(--surface); padding:0; border:4px solid var(--ink); box-shadow:none; } :root[data-skin="tanaka"] .section{ padding-block:clamp(54px,8vw,118px); } :root[data-skin="tanaka"] .section--alt{ background:var(--surface); border-block:4px solid var(--ink); } :root[data-skin="tanaka"] .section-head{ display:grid; grid-template-columns:1fr minmax(80px,16vw); border:4px solid var(--ink); background:var(--surface); } :root[data-skin="tanaka"] .section-head > *{ padding:clamp(14px,2.5vw,32px); } :root[data-skin="tanaka"] .section-head h2{ font-family:var(--sans); font-weight:900; text-transform:uppercase; letter-spacing:-.02em; color:var(--ink); } :root[data-skin="tanaka"] .btn, :root[data-skin="tanaka"] input, :root[data-skin="tanaka"] select, :root[data-skin="tanaka"] textarea{ border-radius:0; border:3px solid var(--ink); background:var(--surface); color:var(--ink); font-family:var(--sans); font-weight:800; } :root[data-skin="tanaka"] .btn-primary{ background:var(--accent); color:var(--surface); } :root[data-skin="tanaka"] .btn-ghost{ background:var(--surface); } :root[data-skin="tanaka"] .site-footer{ background:var(--ink); color:var(--surface); border-top:8px solid var(--accent); } :root[data-skin="tanaka"] .site-footer h4, :root[data-skin="tanaka"] .site-footer a{ color:var(--surface); } /* ---- hakugin (Yamato silver ratio, cool modular proportion) — 1 scaffold layer ---- */ body[data-struct="hakugin"] .skin-structure-layer:nth-child(1){ inset:0; background:linear-gradient(90deg, transparent 0 70.6%, rgba(74,110,134,.18) 70.6% 70.78%, transparent 70.95%), linear-gradient(90deg, transparent 0 49.9%, rgba(74,110,134,.12) 50% 50.15%, transparent 50.3%), linear-gradient(0deg, transparent 0 70.6%, rgba(74,110,134,.12) 70.6% 70.78%, transparent 70.95%), linear-gradient(0deg, transparent 0 49.9%, rgba(74,110,134,.08) 50% 50.15%, transparent 50.3%); } :root[data-skin="hakugin"] .site-header{ background:rgba(248,250,251,.92); border-bottom:1px solid var(--line-strong); } :root[data-skin="hakugin"] .nav{ padding-block:clamp(14px,2vw,28px); } :root[data-skin="hakugin"] .brand{ font-family:var(--serif); font-weight:400; letter-spacing:.0414em; color:var(--ink); } :root[data-skin="hakugin"] .nav-links a{ color:var(--ink-soft); letter-spacing:.1414em; } :root[data-skin="hakugin"] .nav-links a::after{ height:1px; background:var(--accent); } :root[data-skin="hakugin"] .nav-right, :root[data-skin="hakugin"] .cart-btn{ background:var(--surface); border:1px solid var(--line-strong); color:var(--ink); } :root[data-skin="hakugin"] .hero{ padding-block:clamp(56px,8.5vw,120px); } :root[data-skin="hakugin"] .hero-grid{ grid-template-columns:minmax(0,1fr) minmax(280px,.707fr); gap:clamp(28px,4.14vw,70px); align-items:center; } :root[data-skin="hakugin"] .hero h1{ font-family:var(--serif); font-weight:400; max-width:14.14ch; line-height:1; color:var(--ink); } :root[data-skin="hakugin"] .hero .lead{ max-width:41.4rem; color:var(--ink-soft); } :root[data-skin="hakugin"] .hero .eyebrow, :root[data-skin="hakugin"] .eyebrow{ color:var(--accent); letter-spacing:.1414em; } :root[data-skin="hakugin"] .hero-art, :root[data-skin="hakugin"] .card-media, :root[data-skin="hakugin"] .about-portrait{ background:var(--surface); padding:clamp(10px,1.414vw,22px); border:1px solid var(--line); box-shadow:0 18px 44px -34px rgba(35,38,41,.28); } :root[data-skin="hakugin"] .section{ padding-block:clamp(56px,8.48vw,120px); } :root[data-skin="hakugin"] .section--alt{ background:var(--surface-2); border-block:1px solid var(--line-strong); } :root[data-skin="hakugin"] .section-head{ display:grid; grid-template-columns:minmax(0,1fr) minmax(140px,.414fr); gap:clamp(16px,2.828vw,40px); align-items:end; } :root[data-skin="hakugin"] .section-head h2{ font-family:var(--serif); font-weight:400; color:var(--ink); } :root[data-skin="hakugin"] .btn, :root[data-skin="hakugin"] input, :root[data-skin="hakugin"] select, :root[data-skin="hakugin"] textarea{ border-radius:0; border:1px solid var(--line-strong); background:var(--surface); color:var(--ink); } :root[data-skin="hakugin"] .btn-primary{ background:var(--accent); border-color:var(--accent); color:var(--surface); } :root[data-skin="hakugin"] .btn-ghost{ background:transparent; color:var(--ink); } :root[data-skin="hakugin"] .site-footer{ background:var(--surface); color:var(--ink-soft); border-top:1px solid var(--line-strong); } :root[data-skin="hakugin"] .site-footer h4, :root[data-skin="hakugin"] .site-footer a{ color:var(--ink); } /* ---- rakkan (artist seal, authorship, final vermilion presence) — 1 scaffold layer ---- */ body[data-struct="rakkan"] .skin-structure-layer:nth-child(1){ right:clamp(28px,8vw,130px); bottom:clamp(40px,10vw,150px); width:clamp(70px,9vw,130px); height:clamp(70px,9vw,130px); background:radial-gradient(circle at 34% 28%, rgba(255,236,232,.14), transparent 46%), radial-gradient(circle at 70% 74%, rgba(120,20,24,.16), transparent 54%), var(--accent); opacity:.12; clip-path:polygon(4% 6%, 96% 2%, 98% 94%, 6% 98%); transform:rotate(-6deg); box-shadow:inset 0 0 0 2px rgba(120,20,24,.18); } :root[data-skin="rakkan"] .site-header{ background:rgba(252,250,243,.9); border-bottom:1px solid var(--line); } :root[data-skin="rakkan"] .nav{ padding-block:clamp(14px,2vw,28px); } :root[data-skin="rakkan"] .brand{ font-family:var(--serif); font-weight:400; color:var(--ink); } :root[data-skin="rakkan"] .brand::after{ content:"印"; display:inline-grid; place-items:center; width:1.6em; height:1.6em; margin-left:.7em; background:var(--accent); color:var(--surface); border-radius:3px; font-size:.72em; vertical-align:middle; } :root[data-skin="rakkan"] .nav-links a{ color:var(--ink-soft); letter-spacing:.08em; } :root[data-skin="rakkan"] .nav-links a::after{ height:2px; background:var(--accent); } :root[data-skin="rakkan"] .nav-right, :root[data-skin="rakkan"] .cart-btn{ background:var(--surface); border:1px solid var(--line); color:var(--ink); } :root[data-skin="rakkan"] .hero{ padding-block:clamp(66px,10vw,146px); } :root[data-skin="rakkan"] .hero-grid{ gap:clamp(28px,5vw,84px); align-items:center; } :root[data-skin="rakkan"] .hero h1{ font-family:var(--serif); font-weight:400; max-width:12ch; color:var(--ink); } :root[data-skin="rakkan"] .hero .lead{ max-width:40rem; color:var(--ink-soft); } :root[data-skin="rakkan"] .hero .eyebrow, :root[data-skin="rakkan"] .eyebrow{ color:var(--accent); letter-spacing:.2em; } :root[data-skin="rakkan"] .hero-art, :root[data-skin="rakkan"] .card-media, :root[data-skin="rakkan"] .about-portrait{ position:relative; background:var(--surface); padding:clamp(10px,1.5vw,18px); border:1px solid var(--line); box-shadow:0 18px 42px -30px rgba(0,0,0,.34); } :root[data-skin="rakkan"] .hero-art::after, :root[data-skin="rakkan"] .card-media::after, :root[data-skin="rakkan"] .about-portrait::after{ content:"印"; position:absolute; right:clamp(12px,2vw,22px); bottom:clamp(12px,2vw,22px); width:32px; height:32px; display:grid; place-items:center; background:var(--accent); color:var(--surface); border-radius:3px; font-family:var(--serif); box-shadow:0 3px 8px rgba(0,0,0,.24); pointer-events:none; } :root[data-skin="rakkan"] .section{ padding-block:clamp(62px,9vw,134px); } :root[data-skin="rakkan"] .section--alt{ background:var(--surface-2); border-block:1px solid var(--line); } :root[data-skin="rakkan"] .section-head{ position:relative; padding-right:clamp(42px,7vw,90px); } :root[data-skin="rakkan"] .section-head::after{ content:"印"; position:absolute; right:0; bottom:.2em; width:34px; height:34px; display:grid; place-items:center; background:var(--accent); color:var(--surface); border-radius:3px; font-family:var(--serif); } :root[data-skin="rakkan"] .section-head h2{ font-family:var(--serif); font-weight:400; color:var(--ink); } :root[data-skin="rakkan"] .btn, :root[data-skin="rakkan"] input, :root[data-skin="rakkan"] select, :root[data-skin="rakkan"] textarea{ border-radius:3px; border-color:var(--line); background:var(--surface); color:var(--ink); } :root[data-skin="rakkan"] .btn-primary{ background:var(--accent); border-color:var(--accent); color:var(--surface); } :root[data-skin="rakkan"] .btn-ghost{ background:transparent; color:var(--ink); } :root[data-skin="rakkan"] .site-footer{ background:var(--surface-2); color:var(--ink-soft); border-top:1px solid var(--line); } :root[data-skin="rakkan"] .site-footer h4, :root[data-skin="rakkan"] .site-footer a{ color:var(--ink); } /* ===== comment-driven refinements (per philosophy.html feedback) ===== */ /* aizome: felt textile weave on the dyed mats and cloth panels — make the indigo feel like dyed cloth */ :root[data-skin="aizome"] .hero-art, :root[data-skin="aizome"] .card-media, :root[data-skin="aizome"] .about-portrait{ background-color:var(--surface); background-image:repeating-linear-gradient(90deg, rgba(230,238,248,.05) 0 1px, transparent 1px 3px), repeating-linear-gradient(0deg, rgba(0,0,0,.12) 0 1px, transparent 1px 3px), repeating-linear-gradient(45deg, rgba(230,238,248,.03) 0 2px, transparent 2px 5px); } :root[data-skin="aizome"] .section--alt{ background-color:rgba(30,51,88,.72); background-image:repeating-linear-gradient(90deg, rgba(230,238,248,.035) 0 1px, transparent 1px 5px), repeating-linear-gradient(0deg, rgba(0,0,0,.14) 0 1px, transparent 1px 5px); } :root[data-skin="aizome"] .site-footer{ background-image:repeating-linear-gradient(90deg, rgba(230,238,248,.03) 0 1px, transparent 1px 4px), repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 4px); } /* kintsugi: memory of breakage — ceramic craquelure (un-gilded old cracks) + a mended gold join across each section fragment */ :root[data-skin="kintsugi"] .hero-art, :root[data-skin="kintsugi"] .card-media, :root[data-skin="kintsugi"] .about-portrait, :root[data-skin="kintsugi"] .section-head{ background-image:linear-gradient(114deg, transparent 0 38%, rgba(51,48,42,.05) 38% 38.5%, transparent 39%), linear-gradient(72deg, transparent 0 61%, rgba(51,48,42,.045) 61% 61.4%, transparent 61.8%), linear-gradient(158deg, transparent 0 74%, rgba(51,48,42,.04) 74% 74.4%, transparent 74.8%); } :root[data-skin="kintsugi"] .section--alt{ position:relative; } :root[data-skin="kintsugi"] .section--alt::before{ content:""; position:absolute; top:-1px; left:0; right:0; height:2px; pointer-events:none; background:repeating-linear-gradient(90deg, rgba(184,145,47,.72) 0 30px, transparent 30px 40px, rgba(184,145,47,.42) 40px 66px, transparent 66px 88px); } :root[data-skin="kintsugi"] .section--alt::after{ content:""; position:absolute; top:-4px; left:29px; width:6px; height:6px; border-radius:50%; background:rgba(184,145,47,.72); pointer-events:none; } /* hakugin: the 1:√2 silver ratio extended beyond the gallery — footer, controls, rhythm and mat proportion */ :root[data-skin="hakugin"] .footer-grid{ grid-template-columns:minmax(0,1.414fr) minmax(0,1fr); gap:clamp(20px,2.828vw,48px); } :root[data-skin="hakugin"] .hero-cta{ gap:clamp(10px,1.414vw,20px); } :root[data-skin="hakugin"] .btn{ padding:.707em 1em; } :root[data-skin="hakugin"] .hero-art, :root[data-skin="hakugin"] .card-media, :root[data-skin="hakugin"] .about-portrait{ padding:clamp(10px,1.414vw,22px) clamp(7px,1vw,16px); } /* mono-aware: beauty because passing — images and panels dissolve softly into the blossom ground instead of holding a hard edge */ :root[data-skin="mono-aware"] .hero-art, :root[data-skin="mono-aware"] .card-media, :root[data-skin="mono-aware"] .about-portrait{ -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 8%, #000 92%, transparent 100%); mask-image:linear-gradient(180deg, transparent 0, #000 8%, #000 92%, transparent 100%); box-shadow:none; border-color:transparent; } /* rakkan: seals read as pressed cinnabar impressions (uneven ink, carved edge, hand angle, sunk into paper) — not a flat rounded graphic */ :root[data-skin="rakkan"] .brand::after, :root[data-skin="rakkan"] .hero-art::after, :root[data-skin="rakkan"] .card-media::after, :root[data-skin="rakkan"] .about-portrait::after, :root[data-skin="rakkan"] .section-head::after{ border-radius:0; box-shadow:inset 0 0 0 1.5px rgba(250,238,232,.5); background:radial-gradient(circle at 30% 24%, rgba(255,224,216,.32), transparent 42%), radial-gradient(circle at 74% 78%, rgba(120,20,24,.55), transparent 56%), radial-gradient(circle at 58% 40%, rgba(150,28,32,.3), transparent 60%), var(--accent); clip-path:polygon(3% 5%, 97% 1%, 99% 95%, 5% 99%); transform:rotate(-5deg); } :root[data-skin="rakkan"] .hero-art::after, :root[data-skin="rakkan"] .card-media::after, :root[data-skin="rakkan"] .about-portrait::after{ transform:rotate(-6deg); } @media (max-width: 760px){ :root[data-skin="sabi"] .hero-grid, :root[data-skin="iki"] .hero-grid, :root[data-skin="mono-aware"] .hero-grid, :root[data-skin="ukiyoe"] .hero-grid, :root[data-skin="sumie"] .hero-grid, :root[data-skin="rinpa"] .hero-grid, :root[data-skin="aizome"] .hero-grid, :root[data-skin="kintsugi"] .hero-grid, :root[data-skin="tanaka"] .hero-grid, :root[data-skin="hakugin"] .hero-grid, :root[data-skin="rakkan"] .hero-grid{ grid-template-columns:1fr; } :root[data-skin="tanaka"] .hero-grid > *{ padding:clamp(18px,6vw,34px); } :root[data-skin="tanaka"] .section-head, :root[data-skin="hakugin"] .section-head, :root[data-skin="iki"] .section-head{ grid-template-columns:1fr; } :root[data-skin="sumie"] .section-head, :root[data-skin="mono-aware"] .section-head{ text-align:left; margin-inline:0; } } /* ===== p08-japanese2.css ===== */ /* ---- marumado (round-window mitate: the site becomes a quiet room of circular apertures). Uses 2 scaffold layers. ---- */ body[data-struct="marumado"] .skin-structure-layer:nth-child(1){ top:-18vmin; right:-12vmin; width:48vmin; height:48vmin; border:1px solid color-mix(in srgb, var(--line-strong) 74%, transparent); border-radius:50%; background:radial-gradient(circle, transparent 58%, color-mix(in srgb, var(--surface) 54%, transparent) 59% 68%, transparent 70%); } body[data-struct="marumado"] .skin-structure-layer:nth-child(2){ left:-16vmin; bottom:12vh; width:36vmin; height:36vmin; border:1px solid color-mix(in srgb, var(--accent) 28%, transparent); border-radius:50%; background:radial-gradient(circle, color-mix(in srgb, var(--surface-2) 36%, transparent) 0 54%, transparent 56%); } :root[data-skin="marumado"] .site-header{ background:color-mix(in srgb, var(--surface) 92%, transparent); border-bottom:1px solid var(--line); box-shadow:0 18px 42px -34px rgba(41,38,32,.36); } :root[data-skin="marumado"] .nav{ min-height:82px; } :root[data-skin="marumado"] .brand{ font-family:var(--serif); font-weight:400; letter-spacing:.08em; } :root[data-skin="marumado"] .nav-links a{ border-radius:999px; padding:9px 14px; color:var(--ink-soft); } :root[data-skin="marumado"] .nav-links a::after{ left:50%; width:6px; height:6px; transform:translateX(-50%); border-radius:50%; background:var(--accent); } :root[data-skin="marumado"] .nav-right{ gap:14px; } :root[data-skin="marumado"] .cart-btn{ border-radius:999px; border-color:var(--line-strong); background:var(--surface); } :root[data-skin="marumado"] .hero{ padding-block:clamp(76px, 10vw, 150px); } :root[data-skin="marumado"] .hero-grid{ grid-template-columns:minmax(0,.9fr) minmax(280px,.7fr); align-items:center; gap:clamp(48px,7vw,112px); } :root[data-skin="marumado"] .hero h1{ max-width:10ch; font-weight:400; line-height:.98; } :root[data-skin="marumado"] .hero .lead{ max-width:52ch; color:var(--ink-soft); } :root[data-skin="marumado"] .hero .eyebrow, :root[data-skin="marumado"] .section-head .eyebrow{ color:var(--accent); letter-spacing:.24em; } :root[data-skin="marumado"] .hero-cta{ margin-top:32px; } :root[data-skin="marumado"] .hero-art, :root[data-skin="marumado"] .card-media, :root[data-skin="marumado"] .about-portrait{ padding:clamp(16px,2.4vw,30px); background:var(--surface); border:1px solid var(--line); border-radius:clamp(18px,3vw,32px); box-shadow:0 22px 60px -46px rgba(41,38,32,.34); } :root[data-skin="marumado"] .section{ padding-block:clamp(74px,9vw,136px); } :root[data-skin="marumado"] .section--alt{ background:radial-gradient(circle at 88% 16%, color-mix(in srgb, var(--surface-2) 42%, transparent), transparent 28%), var(--surface); border-block:1px solid var(--line); } :root[data-skin="marumado"] .section-head{ text-align:center; max-width:700px; margin-inline:auto; } :root[data-skin="marumado"] .section-head h2{ font-weight:400; } :root[data-skin="marumado"] .btn, :root[data-skin="marumado"] main input, :root[data-skin="marumado"] main select, :root[data-skin="marumado"] main textarea, :root[data-skin="marumado"] .site-footer input{ border-radius:999px; } :root[data-skin="marumado"] .btn-primary{ background:var(--accent); border-color:var(--accent); color:var(--surface); } :root[data-skin="marumado"] .btn-ghost{ background:var(--surface); border-color:var(--line-strong); color:var(--ink); } :root[data-skin="marumado"] .site-footer{ background:var(--surface); border-top:1px solid var(--line); } :root[data-skin="marumado"] .site-footer h4{ font-weight:400; color:var(--accent); } :root[data-skin="marumado"] .site-footer a{ color:var(--ink-soft); } /* marumado refinements: the round window as a way of seeing, applied across nav, sections and footer — kept airy, not stuffy or limiting */ :root[data-skin="marumado"] .hero{ padding-block:clamp(96px,13vw,190px); } :root[data-skin="marumado"] .section{ padding-block:clamp(90px,11vw,170px); } :root[data-skin="marumado"] .brand{ position:relative; } :root[data-skin="marumado"] .brand::before{ content:""; position:absolute; left:-.7em; top:50%; width:1.9em; height:1.9em; transform:translateY(-50%); border:1px solid color-mix(in srgb, var(--accent) 34%, transparent); border-radius:50%; pointer-events:none; } :root[data-skin="marumado"] .section-head{ position:relative; padding-top:clamp(30px,5vw,64px); } :root[data-skin="marumado"] .section-head::before{ content:""; position:absolute; left:50%; top:0; width:clamp(30px,4vw,52px); height:clamp(30px,4vw,52px); transform:translateX(-50%); border:1px solid color-mix(in srgb, var(--line-strong) 60%, transparent); border-radius:50%; background:radial-gradient(circle, transparent 60%, color-mix(in srgb, var(--surface-2) 40%, transparent) 61% 100%); pointer-events:none; } :root[data-skin="marumado"] .site-footer{ position:relative; overflow:hidden; } :root[data-skin="marumado"] .site-footer::before{ content:""; position:absolute; left:50%; bottom:-42vmin; width:64vmin; height:64vmin; transform:translateX(-50%); border:1px solid color-mix(in srgb, var(--accent) 22%, transparent); border-radius:50%; background:radial-gradient(circle, color-mix(in srgb, var(--surface-2) 24%, transparent) 0 58%, transparent 60%); pointer-events:none; } /* ---- fukinsei (asymmetry: balance by unequal intervals, not mirrored order). Uses 1 scaffold layer. ---- */ body[data-struct="fukinsei"] .skin-structure-layer:nth-child(1){ top:18vh; left:6vw; width:68vw; height:1px; background:color-mix(in srgb, var(--accent) 34%, transparent); transform:rotate(-7deg); transform-origin:left center; } :root[data-skin="fukinsei"] .site-header{ background:color-mix(in srgb, var(--surface) 88%, transparent); border-bottom:0; } :root[data-skin="fukinsei"] .nav{ min-height:76px; justify-content:flex-start; gap:clamp(22px,5vw,88px); } :root[data-skin="fukinsei"] .brand{ margin-right:clamp(20px,9vw,150px); font-family:var(--serif); font-weight:400; } :root[data-skin="fukinsei"] .nav-links a{ padding:8px 0; color:var(--ink-soft); } :root[data-skin="fukinsei"] .nav-links a::after{ left:0; right:auto; width:38%; height:2px; background:var(--accent); } :root[data-skin="fukinsei"] .nav-right{ margin-left:auto; transform:translateY(5px); } :root[data-skin="fukinsei"] .cart-btn{ border-color:var(--line-strong); border-radius:2px 16px 2px 10px; } :root[data-skin="fukinsei"] .hero{ padding-block:clamp(70px,9vw,132px); } :root[data-skin="fukinsei"] .hero-grid{ grid-template-columns:minmax(0,1.05fr) minmax(260px,.82fr); gap:clamp(34px,8vw,126px); align-items:end; } :root[data-skin="fukinsei"] .hero h1{ max-width:11ch; font-weight:400; transform:translateX(clamp(0px,4vw,56px)); } :root[data-skin="fukinsei"] .hero .lead{ max-width:48ch; margin-left:clamp(0px,8vw,110px); color:var(--ink-soft); } :root[data-skin="fukinsei"] .hero .eyebrow{ margin-left:clamp(0px,3vw,44px); color:var(--accent); } :root[data-skin="fukinsei"] .hero-cta{ margin-left:clamp(0px,5vw,74px); } :root[data-skin="fukinsei"] .hero-art{ transform:translateY(clamp(18px,4vw,64px)); } :root[data-skin="fukinsei"] .hero-art, :root[data-skin="fukinsei"] .card-media, :root[data-skin="fukinsei"] .about-portrait{ background:transparent; border:0; box-shadow:0 24px 54px -38px rgba(35,32,25,.42); border-radius:3px 22px 5px 12px; } :root[data-skin="fukinsei"] .section{ padding-block:clamp(72px,10vw,150px); } :root[data-skin="fukinsei"] .section:nth-of-type(2n) .section-head{ margin-left:clamp(0px,10vw,150px); } :root[data-skin="fukinsei"] .section:nth-of-type(2n+1) .section-head{ margin-left:auto; margin-right:clamp(0px,8vw,120px); } :root[data-skin="fukinsei"] .section--alt{ background:linear-gradient(102deg, transparent 0 18%, color-mix(in srgb, var(--surface-2) 45%, transparent) 18% 72%, transparent 72%); border-block:0; } :root[data-skin="fukinsei"] .section-head{ max-width:760px; } :root[data-skin="fukinsei"] .section-head h2{ font-weight:400; max-width:12ch; } :root[data-skin="fukinsei"] .eyebrow{ color:var(--accent); } :root[data-skin="fukinsei"] .btn{ border-radius:4px 18px 4px 12px; } :root[data-skin="fukinsei"] .btn-primary{ background:var(--accent); border-color:var(--accent); color:var(--surface); transform:translateY(-3px); } :root[data-skin="fukinsei"] .btn-ghost, :root[data-skin="fukinsei"] main input, :root[data-skin="fukinsei"] main select, :root[data-skin="fukinsei"] main textarea, :root[data-skin="fukinsei"] .site-footer input{ border-color:var(--line-strong); border-radius:2px 14px 2px 10px; } :root[data-skin="fukinsei"] .site-footer{ background:var(--surface); border-top:0; box-shadow:inset 0 1px 0 var(--line); } :root[data-skin="fukinsei"] .site-footer h4{ color:var(--accent); } :root[data-skin="fukinsei"] .site-footer a{ color:var(--ink-soft); } /* ---- byobu (folding screen: one continuous surface divided by hinges). Uses 2 scaffold layers. ---- */ body[data-struct="byobu"] .skin-structure-layer:nth-child(1){ inset:0; background:linear-gradient(90deg, transparent 0 24.8%, color-mix(in srgb, var(--line-strong) 38%, transparent) 24.8% 25.1%, transparent 25.1% 49.8%, color-mix(in srgb, var(--line-strong) 34%, transparent) 49.8% 50.1%, transparent 50.1% 74.8%, color-mix(in srgb, var(--line-strong) 30%, transparent) 74.8% 75.1%, transparent 75.1%); } body[data-struct="byobu"] .skin-structure-layer:nth-child(2){ inset:8vh 4vw; background:linear-gradient(90deg, color-mix(in srgb, var(--surface) 24%, transparent), transparent 18%, color-mix(in srgb, var(--surface-2) 22%, transparent) 50%, transparent 82%, color-mix(in srgb, var(--surface) 20%, transparent)); border:1px solid color-mix(in srgb, var(--line-strong) 28%, transparent); } :root[data-skin="byobu"] .site-header{ background:var(--surface); border-bottom:2px solid var(--line-strong); box-shadow:inset 12vw 0 60px -80px rgba(0,0,0,.22), inset -12vw 0 60px -80px rgba(0,0,0,.2); } :root[data-skin="byobu"] .nav{ min-height:78px; } :root[data-skin="byobu"] .brand{ font-family:var(--serif); font-weight:500; } :root[data-skin="byobu"] .nav-links{ gap:0; border-inline:1px solid var(--line-strong); } :root[data-skin="byobu"] .nav-links a{ padding:12px 18px; border-right:1px solid var(--line); color:var(--ink); } :root[data-skin="byobu"] .nav-links a::after{ inset:auto 0 -2px; height:2px; background:var(--accent); } :root[data-skin="byobu"] .nav-right{ gap:0; } :root[data-skin="byobu"] .cart-btn{ border-radius:0; border:1px solid var(--line-strong); background:var(--surface-2); } :root[data-skin="byobu"] .hero{ padding-block:clamp(64px,8vw,124px); } :root[data-skin="byobu"] .hero-grid{ gap:0; grid-template-columns:1fr 1fr; background:var(--surface); border:2px solid var(--line-strong); box-shadow:0 28px 70px -52px rgba(42,37,25,.45); } :root[data-skin="byobu"] .hero-grid > *{ padding:clamp(26px,4vw,58px); } :root[data-skin="byobu"] .hero-grid > :first-child{ border-right:2px solid var(--line-strong); background:linear-gradient(90deg, color-mix(in srgb, var(--surface) 90%, white), transparent 70%); } :root[data-skin="byobu"] .hero h1, :root[data-skin="byobu"] .section-head h2{ font-weight:400; } :root[data-skin="byobu"] .hero .lead{ color:var(--ink-soft); } :root[data-skin="byobu"] .hero .eyebrow, :root[data-skin="byobu"] .eyebrow{ color:var(--accent); } :root[data-skin="byobu"] .hero-art, :root[data-skin="byobu"] .card-media, :root[data-skin="byobu"] .about-portrait{ padding:12px; background:linear-gradient(90deg, color-mix(in srgb, var(--surface-2) 55%, transparent), var(--surface)); border:1px solid var(--line-strong); border-radius:0; box-shadow:none; } :root[data-skin="byobu"] .section{ padding-block:clamp(66px,8vw,126px); } :root[data-skin="byobu"] .section--alt{ background:var(--surface); border-block:2px solid var(--line-strong); box-shadow:inset 50vw 0 80px -86px rgba(0,0,0,.2); } :root[data-skin="byobu"] .section-head{ padding:clamp(18px,3vw,34px); border:2px solid var(--line-strong); background:var(--surface); } :root[data-skin="byobu"] .btn, :root[data-skin="byobu"] main input, :root[data-skin="byobu"] main select, :root[data-skin="byobu"] main textarea, :root[data-skin="byobu"] .site-footer input{ border-radius:0; border-color:var(--line-strong); } :root[data-skin="byobu"] .btn-primary{ background:var(--accent); border-color:var(--accent); color:var(--surface); } :root[data-skin="byobu"] .btn-ghost{ background:var(--surface); color:var(--ink); } :root[data-skin="byobu"] .site-footer{ background:var(--surface); border-top:2px solid var(--line-strong); } :root[data-skin="byobu"] .site-footer h4{ color:var(--accent); font-weight:400; } :root[data-skin="byobu"] .site-footer a{ color:var(--ink-soft); } /* ---- mingei (folk craft: honest joinery, handled surfaces, useful warmth). Uses 0 scaffold layers. ---- */ :root[data-skin="mingei"] .site-header{ background:var(--surface); border-bottom:2px solid var(--line-strong); box-shadow:0 3px 0 color-mix(in srgb, var(--line-strong) 75%, transparent); } :root[data-skin="mingei"] .nav{ min-height:74px; } :root[data-skin="mingei"] .brand{ font-family:var(--serif); font-weight:700; letter-spacing:.02em; } :root[data-skin="mingei"] .nav-links a{ color:var(--ink); padding:10px 12px; border:1px solid transparent; } :root[data-skin="mingei"] .nav-links a::after{ left:12px; right:12px; height:2px; background:var(--accent); } :root[data-skin="mingei"] .nav-right{ gap:10px; } :root[data-skin="mingei"] .cart-btn{ background:var(--surface-2); border:2px solid var(--line-strong); border-radius:0; box-shadow:0 2px 0 var(--line-strong); } :root[data-skin="mingei"] .hero{ padding-block:clamp(58px,7vw,112px); } :root[data-skin="mingei"] .hero-grid{ grid-template-columns:minmax(0,.95fr) minmax(280px,1fr); gap:clamp(28px,4vw,64px); align-items:stretch; } :root[data-skin="mingei"] .hero-grid > :first-child{ background:var(--surface); border:1px solid var(--line-strong); box-shadow:0 3px 0 var(--line-strong); padding:clamp(26px,4vw,52px); } :root[data-skin="mingei"] .hero h1, :root[data-skin="mingei"] .section-head h2{ font-weight:600; line-height:1.02; } :root[data-skin="mingei"] .hero .lead{ color:var(--ink-soft); } :root[data-skin="mingei"] .hero .eyebrow, :root[data-skin="mingei"] .eyebrow{ color:var(--accent); letter-spacing:.14em; } :root[data-skin="mingei"] .hero-art, :root[data-skin="mingei"] .card-media, :root[data-skin="mingei"] .about-portrait{ padding:10px; background:var(--surface); border:1px solid var(--line-strong); border-radius:0; box-shadow:0 3px 0 var(--line-strong); } :root[data-skin="mingei"] .section{ padding-block:clamp(58px,8vw,118px); } :root[data-skin="mingei"] .section--alt{ background:var(--surface-2); border-block:2px solid var(--line-strong); } :root[data-skin="mingei"] .section-head{ background:var(--surface); border:1px solid var(--line-strong); box-shadow:0 2px 0 var(--line-strong); padding:clamp(18px,3vw,32px); } :root[data-skin="mingei"] .btn, :root[data-skin="mingei"] main input, :root[data-skin="mingei"] main select, :root[data-skin="mingei"] main textarea, :root[data-skin="mingei"] .site-footer input{ border-radius:0; border:2px solid var(--line-strong); box-shadow:0 2px 0 var(--line-strong); background:var(--surface); } :root[data-skin="mingei"] .btn-primary{ background:var(--accent); border-color:var(--line-strong); color:var(--surface); } :root[data-skin="mingei"] .btn-ghost{ color:var(--ink); } :root[data-skin="mingei"] .site-footer{ background:var(--surface-2); border-top:2px solid var(--line-strong); } :root[data-skin="mingei"] .site-footer h4{ color:var(--accent); font-weight:700; } :root[data-skin="mingei"] .site-footer a{ color:var(--ink); } /* ---- kanso (simplicity by elimination: only essential interval, line, and text remain). Uses 0 scaffold layers. ---- */ :root[data-skin="kanso"] .site-header{ background:var(--bg); border-bottom:1px solid var(--line); box-shadow:none; } :root[data-skin="kanso"] .nav{ min-height:72px; } :root[data-skin="kanso"] .brand{ font-family:var(--sans); font-weight:400; letter-spacing:.05em; } :root[data-skin="kanso"] .nav-links{ gap:24px; } :root[data-skin="kanso"] .nav-links a{ padding:8px 0; color:var(--ink); letter-spacing:.03em; } :root[data-skin="kanso"] .nav-links a::after{ height:1px; background:var(--ink); } :root[data-skin="kanso"] .nav-right{ gap:12px; } :root[data-skin="kanso"] .cart-btn{ background:var(--bg); border:1px solid var(--line-strong); border-radius:0; box-shadow:none; } :root[data-skin="kanso"] .hero{ padding-block:clamp(84px,12vw,172px); } :root[data-skin="kanso"] .hero-grid{ grid-template-columns:minmax(0,1fr) minmax(240px,.7fr); gap:clamp(64px,10vw,148px); align-items:start; } :root[data-skin="kanso"] .hero h1{ font-family:var(--sans); font-weight:400; line-height:1; max-width:12ch; } :root[data-skin="kanso"] .hero .lead{ max-width:48ch; color:var(--ink-soft); } :root[data-skin="kanso"] .hero .eyebrow, :root[data-skin="kanso"] .eyebrow{ color:var(--ink-faint); letter-spacing:.18em; } :root[data-skin="kanso"] .hero-art, :root[data-skin="kanso"] .card-media, :root[data-skin="kanso"] .about-portrait{ padding:0; background:transparent; border:1px solid var(--line); border-radius:0; box-shadow:none; } :root[data-skin="kanso"] .section{ padding-block:clamp(88px,12vw,176px); } :root[data-skin="kanso"] .section--alt{ background:var(--bg); border-block:1px solid var(--line); } :root[data-skin="kanso"] .section-head{ max-width:620px; margin-bottom:clamp(40px,6vw,84px); } :root[data-skin="kanso"] .section-head h2{ font-family:var(--sans); font-weight:400; letter-spacing:.02em; } :root[data-skin="kanso"] .btn, :root[data-skin="kanso"] main input, :root[data-skin="kanso"] main select, :root[data-skin="kanso"] main textarea, :root[data-skin="kanso"] .site-footer input{ border-radius:0; border:1px solid var(--line-strong); box-shadow:none; background:var(--bg); } :root[data-skin="kanso"] .btn-primary{ background:var(--ink); color:var(--bg); border-color:var(--ink); } :root[data-skin="kanso"] .btn-ghost{ color:var(--ink); } :root[data-skin="kanso"] .site-footer{ background:var(--bg); border-top:1px solid var(--line); } :root[data-skin="kanso"] .site-footer h4{ font-family:var(--sans); font-weight:400; color:var(--ink); } :root[data-skin="kanso"] .site-footer a{ color:var(--ink-soft); } /* ---- kokou (austere patina: weathered dignity, tall withdrawal, dry restraint). Uses 1 scaffold layer. ---- */ body[data-struct="kokou"] .skin-structure-layer:nth-child(1){ inset:0; background:linear-gradient(110deg, transparent 0 55%, color-mix(in srgb, var(--line-strong) 16%, transparent) 55% 56%, transparent 56%), radial-gradient(80% 90% at 80% 10%, color-mix(in srgb, var(--surface-2) 28%, transparent), transparent 58%); } :root[data-skin="kokou"] .site-header{ background:color-mix(in srgb, var(--surface) 86%, transparent); border-bottom:1px solid var(--line-strong); } :root[data-skin="kokou"] .nav{ min-height:86px; } :root[data-skin="kokou"] .brand{ font-family:var(--serif); font-style:italic; font-weight:400; color:var(--ink-soft); } :root[data-skin="kokou"] .nav-links{ gap:clamp(18px,3vw,44px); } :root[data-skin="kokou"] .nav-links a{ color:var(--ink-soft); padding:10px 0; } :root[data-skin="kokou"] .nav-links a::after{ height:1px; background:var(--accent); opacity:.7; } :root[data-skin="kokou"] .nav-right{ gap:14px; } :root[data-skin="kokou"] .cart-btn{ background:transparent; border:1px solid var(--line-strong); border-radius:0; color:var(--ink-soft); } :root[data-skin="kokou"] .hero{ padding-block:clamp(90px,12vw,178px); } :root[data-skin="kokou"] .hero-grid{ grid-template-columns:minmax(0,.82fr) minmax(220px,.54fr); gap:clamp(54px,9vw,144px); align-items:end; } :root[data-skin="kokou"] .hero h1{ max-width:9ch; font-style:italic; font-weight:400; color:var(--ink-soft); } :root[data-skin="kokou"] .hero .lead{ max-width:43ch; color:var(--ink-soft); } :root[data-skin="kokou"] .hero .eyebrow, :root[data-skin="kokou"] .eyebrow{ color:var(--accent); letter-spacing:.2em; } :root[data-skin="kokou"] .hero-art, :root[data-skin="kokou"] .card-media, :root[data-skin="kokou"] .about-portrait{ padding:8px; background:var(--surface); border:1px solid var(--line-strong); border-radius:0; box-shadow:0 30px 64px -54px rgba(68,62,51,.48); filter:sepia(.1) saturate(.86); } :root[data-skin="kokou"] .section{ padding-block:clamp(84px,11vw,166px); } :root[data-skin="kokou"] .section--alt{ background:color-mix(in srgb, var(--surface-2) 58%, transparent); border-block:1px solid var(--line-strong); } :root[data-skin="kokou"] .section-head{ max-width:560px; } :root[data-skin="kokou"] .section-head h2{ font-style:italic; font-weight:400; color:var(--ink-soft); } :root[data-skin="kokou"] .btn, :root[data-skin="kokou"] main input, :root[data-skin="kokou"] main select, :root[data-skin="kokou"] main textarea, :root[data-skin="kokou"] .site-footer input{ border-radius:0; border:1px solid var(--line-strong); background:var(--surface); color:var(--ink-soft); } :root[data-skin="kokou"] .btn-primary{ background:var(--accent); border-color:var(--accent); color:var(--surface); } :root[data-skin="kokou"] .btn-ghost{ background:transparent; } :root[data-skin="kokou"] .site-footer{ background:var(--surface); border-top:1px solid var(--line-strong); color:var(--ink-soft); } :root[data-skin="kokou"] .site-footer h4{ font-style:italic; font-weight:400; color:var(--accent); } :root[data-skin="kokou"] .site-footer a{ color:var(--ink-soft); } /* ---- shizen (naturalness: unforced growth, organic edges, earth-leaf quiet). Uses 2 scaffold layers. ---- */ body[data-struct="shizen"] .skin-structure-layer:nth-child(1){ top:12vh; left:-10vw; width:44vw; height:54vh; border-radius:42% 58% 51% 49%; background:color-mix(in srgb, var(--accent) 10%, transparent); } body[data-struct="shizen"] .skin-structure-layer:nth-child(2){ right:-8vw; bottom:-8vh; width:38vw; height:42vh; border-radius:56% 44% 62% 38%; background:color-mix(in srgb, var(--surface-2) 48%, transparent); } :root[data-skin="shizen"] .site-header{ background:color-mix(in srgb, var(--surface) 86%, transparent); border-bottom:1px solid var(--line); } :root[data-skin="shizen"] .nav{ min-height:78px; } :root[data-skin="shizen"] .brand{ font-family:var(--serif); font-weight:500; } :root[data-skin="shizen"] .nav-links{ gap:clamp(12px,2.6vw,38px); } :root[data-skin="shizen"] .nav-links a{ padding:9px 4px; color:var(--ink-soft); } :root[data-skin="shizen"] .nav-links a::after{ height:2px; border-radius:4px; background:var(--accent); } :root[data-skin="shizen"] .nav-right{ gap:12px; } :root[data-skin="shizen"] .cart-btn{ background:var(--surface); border:1px solid var(--line-strong); border-radius:14px 5px 12px 7px; } :root[data-skin="shizen"] .hero{ padding-block:clamp(72px,9vw,140px); } :root[data-skin="shizen"] .hero-grid{ grid-template-columns:minmax(0,.9fr) minmax(280px,.95fr); gap:clamp(38px,6vw,92px); align-items:center; } :root[data-skin="shizen"] .hero h1{ max-width:12ch; font-weight:500; } :root[data-skin="shizen"] .hero .lead{ color:var(--ink-soft); max-width:52ch; } :root[data-skin="shizen"] .hero .eyebrow, :root[data-skin="shizen"] .eyebrow{ color:var(--accent); } :root[data-skin="shizen"] .hero-art, :root[data-skin="shizen"] .card-media, :root[data-skin="shizen"] .about-portrait{ padding:12px; background:var(--surface); border:1px solid var(--line); border-radius:22px 6px 18px 10px; box-shadow:0 16px 42px -34px rgba(51,54,44,.36); } :root[data-skin="shizen"] .section{ padding-block:clamp(68px,9vw,132px); } :root[data-skin="shizen"] .section--alt{ background:linear-gradient(140deg, color-mix(in srgb, var(--surface) 72%, transparent), color-mix(in srgb, var(--surface-2) 66%, transparent)); border-block:1px solid var(--line); } :root[data-skin="shizen"] .section-head{ max-width:720px; } :root[data-skin="shizen"] .section-head h2{ font-weight:500; } :root[data-skin="shizen"] .btn, :root[data-skin="shizen"] main input, :root[data-skin="shizen"] main select, :root[data-skin="shizen"] main textarea, :root[data-skin="shizen"] .site-footer input{ border-radius:16px 5px 14px 8px; border-color:var(--line-strong); background:var(--surface); } :root[data-skin="shizen"] .btn-primary{ background:var(--accent); border-color:var(--accent); color:var(--surface); } :root[data-skin="shizen"] .btn-ghost{ color:var(--ink); } :root[data-skin="shizen"] .site-footer{ background:var(--surface); border-top:1px solid var(--line); } :root[data-skin="shizen"] .site-footer h4{ font-weight:500; color:var(--accent); } :root[data-skin="shizen"] .site-footer a{ color:var(--ink-soft); } /* ---- datsuzoku (freedom from convention: keep the rule visible, then escape it). Uses 2 scaffold layers. ---- */ body[data-struct="datsuzoku"] .skin-structure-layer:nth-child(1){ top:18vh; right:8vw; width:30vw; height:30vw; max-width:420px; max-height:420px; background:color-mix(in srgb, var(--accent) 12%, transparent); transform:rotate(13deg); } body[data-struct="datsuzoku"] .skin-structure-layer:nth-child(2){ left:0; bottom:18vh; width:78vw; height:2px; background:color-mix(in srgb, var(--ink) 18%, transparent); transform:rotate(-4deg); transform-origin:left center; } :root[data-skin="datsuzoku"] .site-header{ background:var(--surface); border-bottom:1px solid var(--line); } :root[data-skin="datsuzoku"] .nav{ min-height:72px; } :root[data-skin="datsuzoku"] .brand{ font-family:var(--sans); font-weight:800; letter-spacing:-.03em; transform:translateY(4px); } :root[data-skin="datsuzoku"] .nav-links a{ padding:10px 12px; color:var(--ink); } :root[data-skin="datsuzoku"] .nav-links li:nth-child(2n) a{ transform:translateY(6px); } :root[data-skin="datsuzoku"] .nav-links a::after{ height:3px; background:var(--accent); transform:skewX(-18deg); } :root[data-skin="datsuzoku"] .nav-right{ gap:12px; transform:translateY(-5px); } :root[data-skin="datsuzoku"] .cart-btn{ border:2px solid var(--ink); border-radius:0; background:var(--surface); box-shadow:5px 5px 0 var(--accent); } :root[data-skin="datsuzoku"] .hero{ padding-block:clamp(58px,8vw,128px); } :root[data-skin="datsuzoku"] .hero-grid{ grid-template-columns:repeat(6,1fr); gap:22px; align-items:end; } :root[data-skin="datsuzoku"] .hero-grid > :first-child{ grid-column:1 / span 4; } :root[data-skin="datsuzoku"] .hero-art{ grid-column:4 / span 3; grid-row:1; transform:translateY(clamp(28px,5vw,78px)) rotate(-1deg); } :root[data-skin="datsuzoku"] .hero h1{ max-width:11ch; font-family:var(--sans); font-weight:800; line-height:.92; letter-spacing:-.05em; } :root[data-skin="datsuzoku"] .hero .lead{ max-width:48ch; color:var(--ink-soft); margin-left:clamp(0px,6vw,84px); } :root[data-skin="datsuzoku"] .hero .eyebrow, :root[data-skin="datsuzoku"] .eyebrow{ color:var(--accent); } :root[data-skin="datsuzoku"] .hero-art, :root[data-skin="datsuzoku"] .card-media, :root[data-skin="datsuzoku"] .about-portrait{ padding:0; background:var(--surface); border:2px solid var(--ink); border-radius:0; box-shadow:8px 8px 0 color-mix(in srgb, var(--accent) 70%, transparent); } :root[data-skin="datsuzoku"] .section{ padding-block:clamp(62px,8vw,124px); } :root[data-skin="datsuzoku"] .section--alt{ background:linear-gradient(100deg, transparent 0 12%, var(--surface-2) 12% 86%, transparent 86%); border-block:0; } :root[data-skin="datsuzoku"] .section:nth-of-type(2n) .section-head{ margin-left:auto; transform:rotate(.6deg); } :root[data-skin="datsuzoku"] .section-head{ max-width:760px; } :root[data-skin="datsuzoku"] .section-head h2{ font-family:var(--sans); font-weight:800; letter-spacing:-.04em; } :root[data-skin="datsuzoku"] .btn, :root[data-skin="datsuzoku"] main input, :root[data-skin="datsuzoku"] main select, :root[data-skin="datsuzoku"] main textarea, :root[data-skin="datsuzoku"] .site-footer input{ border-radius:0; border:2px solid var(--ink); } :root[data-skin="datsuzoku"] .btn-primary{ background:var(--accent); color:var(--surface); box-shadow:5px 5px 0 var(--ink); } :root[data-skin="datsuzoku"] .btn-ghost{ background:var(--surface); color:var(--ink); transform:translateY(5px); } :root[data-skin="datsuzoku"] .site-footer{ background:var(--ink); color:var(--surface); border-top:4px solid var(--accent); } :root[data-skin="datsuzoku"] .site-footer h4{ color:var(--surface); font-family:var(--sans); } :root[data-skin="datsuzoku"] .site-footer a{ color:color-mix(in srgb, var(--surface) 80%, var(--accent)); } /* ---- seijaku (active stillness: centered calm, cool atmosphere, charged void). Uses 1 scaffold layer. ---- */ body[data-struct="seijaku"] .skin-structure-layer:nth-child(1){ inset:0; background:radial-gradient(circle at 50% 20%, color-mix(in srgb, var(--surface) 60%, transparent), transparent 34%), radial-gradient(circle at 50% 82%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 42%); } :root[data-skin="seijaku"] .site-header{ background:color-mix(in srgb, var(--surface) 74%, transparent); border-bottom:1px solid var(--line); } :root[data-skin="seijaku"] .nav{ min-height:88px; justify-content:center; } :root[data-skin="seijaku"] .brand{ font-family:var(--serif); font-weight:400; letter-spacing:.18em; } :root[data-skin="seijaku"] .nav-links{ gap:clamp(22px,3.6vw,56px); } :root[data-skin="seijaku"] .nav-links a{ color:var(--ink-soft); padding:10px 0; letter-spacing:.12em; text-transform:uppercase; font-size:.78rem; } :root[data-skin="seijaku"] .nav-links a::after{ left:35%; right:35%; height:1px; background:var(--accent); } :root[data-skin="seijaku"] .nav-right{ gap:14px; } :root[data-skin="seijaku"] .cart-btn{ background:transparent; border:1px solid var(--line-strong); border-radius:999px; color:var(--ink-soft); } :root[data-skin="seijaku"] .hero{ padding-block:clamp(96px,14vw,210px); text-align:center; } :root[data-skin="seijaku"] .hero-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(48px,7vw,108px); justify-items:center; } :root[data-skin="seijaku"] .hero h1{ max-width:14ch; margin-inline:auto; font-weight:400; letter-spacing:.04em; } :root[data-skin="seijaku"] .hero .lead{ max-width:56ch; margin-inline:auto; color:var(--ink-soft); } :root[data-skin="seijaku"] .hero .eyebrow, :root[data-skin="seijaku"] .eyebrow{ color:var(--accent); letter-spacing:.24em; } :root[data-skin="seijaku"] .hero-cta{ justify-content:center; } :root[data-skin="seijaku"] .hero-art{ max-width:min(720px,82vw); } :root[data-skin="seijaku"] .hero-art, :root[data-skin="seijaku"] .card-media, :root[data-skin="seijaku"] .about-portrait{ background:transparent; border:0; border-radius:0; box-shadow:0 28px 70px -48px rgba(44,51,53,.42); } :root[data-skin="seijaku"] .section{ padding-block:clamp(104px,14vw,220px); } :root[data-skin="seijaku"] .section--alt{ background:color-mix(in srgb, var(--surface) 54%, transparent); border-block:1px solid var(--line); } :root[data-skin="seijaku"] .section-head{ text-align:center; max-width:680px; margin-inline:auto; margin-bottom:clamp(56px,8vw,112px); } :root[data-skin="seijaku"] .section-head h2{ font-weight:400; letter-spacing:.08em; } :root[data-skin="seijaku"] .btn, :root[data-skin="seijaku"] main input, :root[data-skin="seijaku"] main select, :root[data-skin="seijaku"] main textarea, :root[data-skin="seijaku"] .site-footer input{ border-radius:999px; border:1px solid var(--line-strong); background:color-mix(in srgb, var(--surface) 70%, transparent); } :root[data-skin="seijaku"] .btn-primary{ background:var(--accent); border-color:var(--accent); color:var(--surface); } :root[data-skin="seijaku"] .btn-ghost{ color:var(--ink-soft); } :root[data-skin="seijaku"] .site-footer{ background:var(--surface); border-top:1px solid var(--line); text-align:center; } :root[data-skin="seijaku"] .site-footer h4{ font-weight:400; letter-spacing:.16em; color:var(--accent); } :root[data-skin="seijaku"] .site-footer a{ color:var(--ink-soft); } /* ---- notan (light-dark massing: every region becomes positive or negative shape). Uses 1 scaffold layer. ---- */ body[data-struct="notan"] #skin-structure{ background:#fff; } body[data-struct="notan"] .skin-structure-layer:nth-child(1){ top:0; right:0; width:42vw; height:100vh; background:#000; } :root[data-skin="notan"] .site-header{ background:#fff; border-bottom:3px solid #000; box-shadow:none; } :root[data-skin="notan"] .nav{ min-height:72px; } :root[data-skin="notan"] .brand{ font-family:var(--sans); font-weight:900; color:#000; } :root[data-skin="notan"] .nav-links{ gap:0; border-left:2px solid #000; } :root[data-skin="notan"] .nav-links a{ color:#000; padding:12px 16px; border-right:2px solid #000; text-transform:uppercase; font-weight:800; } :root[data-skin="notan"] .nav-links a::after{ inset:0; height:auto; background:#000; z-index:-1; transform:scaleY(0); transform-origin:bottom; } :root[data-skin="notan"] .nav-links a:hover{ color:#fff; } :root[data-skin="notan"] .nav-links a:hover::after{ transform:scaleY(1); } :root[data-skin="notan"] .nav-right{ gap:0; } :root[data-skin="notan"] .cart-btn{ background:#000; color:#fff; border:2px solid #000; border-radius:0; } :root[data-skin="notan"] .hero{ padding-block:clamp(54px,8vw,120px); } :root[data-skin="notan"] .hero-grid{ grid-template-columns:1fr 1fr; gap:0; border:3px solid #000; background:#fff; } :root[data-skin="notan"] .hero-grid > :first-child{ padding:clamp(28px,5vw,68px); } :root[data-skin="notan"] .hero-art{ background:#000; padding:clamp(18px,3vw,42px); border-left:3px solid #000; } :root[data-skin="notan"] .hero h1{ font-family:var(--sans); font-weight:900; letter-spacing:-.05em; line-height:.9; } :root[data-skin="notan"] .hero .lead{ color:#000; } :root[data-skin="notan"] .hero .eyebrow, :root[data-skin="notan"] .eyebrow{ color:#000; font-weight:900; } :root[data-skin="notan"] .card-media, :root[data-skin="notan"] .about-portrait{ padding:10px; background:#fff; border:3px solid #000; border-radius:0; box-shadow:none; } :root[data-skin="notan"] .section{ padding-block:clamp(58px,8vw,128px); } :root[data-skin="notan"] .section--alt{ background:#000; color:#fff; border-block:3px solid #000; } :root[data-skin="notan"] .section--alt .section-head h2, :root[data-skin="notan"] .section--alt .eyebrow{ color:#fff; } :root[data-skin="notan"] .section-head{ border:3px solid #000; background:#fff; padding:clamp(18px,3vw,36px); } :root[data-skin="notan"] .section-head h2{ font-family:var(--sans); font-weight:900; color:#000; } :root[data-skin="notan"] .btn, :root[data-skin="notan"] main input, :root[data-skin="notan"] main select, :root[data-skin="notan"] main textarea, :root[data-skin="notan"] .site-footer input{ border-radius:0; border:3px solid #000; box-shadow:none; } :root[data-skin="notan"] .btn-primary{ background:#000; color:#fff; } :root[data-skin="notan"] .btn-ghost{ background:#fff; color:#000; } :root[data-skin="notan"] .site-footer{ background:#000; color:#fff; border-top:3px solid #000; } :root[data-skin="notan"] .site-footer h4{ color:#fff; font-family:var(--sans); font-weight:900; } :root[data-skin="notan"] .site-footer a{ color:#fff; } /* ---- enso (one-breath circle: open stroke, warm paper, centered contemplation). Uses 2 scaffold layers. ---- */ body[data-struct="enso"] .skin-structure-layer:nth-child(1){ top:12vh; left:50%; width:min(76vw,760px); height:min(76vw,760px); border:clamp(3px,.7vw,8px) solid color-mix(in srgb, var(--ink) 16%, transparent); border-right-color:transparent; border-radius:50%; transform:translateX(-50%) rotate(24deg); } body[data-struct="enso"] .skin-structure-layer:nth-child(2){ right:9vw; bottom:10vh; width:18vmin; height:18vmin; border:2px solid color-mix(in srgb, var(--ink) 28%, transparent); border-top-color:transparent; border-radius:50%; transform:rotate(-18deg); } :root[data-skin="enso"] .site-header{ background:color-mix(in srgb, var(--surface) 90%, transparent); border-bottom:1px solid var(--line); } :root[data-skin="enso"] .nav{ min-height:82px; } :root[data-skin="enso"] .brand{ font-family:var(--serif); font-weight:400; letter-spacing:.06em; } :root[data-skin="enso"] .nav-links{ gap:clamp(16px,3vw,42px); } :root[data-skin="enso"] .nav-links a{ color:var(--ink-soft); padding:10px 0; } :root[data-skin="enso"] .nav-links a::after{ left:50%; width:10px; height:10px; border:2px solid var(--ink); border-right-color:transparent; border-radius:50%; background:transparent; transform:translateX(-50%) rotate(24deg); } :root[data-skin="enso"] .nav-right{ gap:14px; } :root[data-skin="enso"] .cart-btn{ border-radius:999px; background:var(--surface); border:1px solid var(--line-strong); } :root[data-skin="enso"] .hero{ padding-block:clamp(88px,12vw,182px); text-align:center; } :root[data-skin="enso"] .hero-grid{ grid-template-columns:minmax(0,1fr); justify-items:center; gap:clamp(44px,7vw,104px); } :root[data-skin="enso"] .hero h1{ max-width:12ch; margin-inline:auto; font-weight:400; line-height:.96; } :root[data-skin="enso"] .hero .lead{ max-width:54ch; margin-inline:auto; color:var(--ink-soft); } :root[data-skin="enso"] .hero .eyebrow, :root[data-skin="enso"] .eyebrow{ color:var(--accent); letter-spacing:.2em; } :root[data-skin="enso"] .hero-cta{ justify-content:center; } :root[data-skin="enso"] .hero-art{ max-width:min(620px,80vw); } :root[data-skin="enso"] .hero-art, :root[data-skin="enso"] .card-media, :root[data-skin="enso"] .about-portrait{ padding:clamp(14px,2.4vw,28px); background:var(--surface); border:2px solid var(--ink); border-right-color:transparent; border-radius:50%; box-shadow:0 24px 60px -44px rgba(22,20,18,.34); } :root[data-skin="enso"] .section{ padding-block:clamp(88px,12vw,180px); } :root[data-skin="enso"] .section--alt{ background:radial-gradient(circle at 50% 16%, color-mix(in srgb, var(--surface-2) 48%, transparent), transparent 38%); border-block:1px solid var(--line); } :root[data-skin="enso"] .section-head{ text-align:center; max-width:680px; margin-inline:auto; } :root[data-skin="enso"] .section-head h2{ font-weight:400; } :root[data-skin="enso"] .btn, :root[data-skin="enso"] main input, :root[data-skin="enso"] main select, :root[data-skin="enso"] main textarea, :root[data-skin="enso"] .site-footer input{ border-radius:999px; border-color:var(--line-strong); background:var(--surface); } :root[data-skin="enso"] .btn-primary{ background:var(--ink); border-color:var(--ink); color:var(--surface); } :root[data-skin="enso"] .btn-ghost{ color:var(--ink); } :root[data-skin="enso"] .site-footer{ background:var(--surface); border-top:1px solid var(--line); text-align:center; } :root[data-skin="enso"] .site-footer h4{ font-weight:400; color:var(--accent); } :root[data-skin="enso"] .site-footer a{ color:var(--ink-soft); } @media (max-width: 820px){ :root[data-skin="marumado"] .hero-grid, :root[data-skin="fukinsei"] .hero-grid, :root[data-skin="byobu"] .hero-grid, :root[data-skin="mingei"] .hero-grid, :root[data-skin="kanso"] .hero-grid, :root[data-skin="kokou"] .hero-grid, :root[data-skin="shizen"] .hero-grid, :root[data-skin="notan"] .hero-grid{ grid-template-columns:1fr; } :root[data-skin="byobu"] .hero-grid > :first-child, :root[data-skin="notan"] .hero-art{ border-right:0; border-left:0; } :root[data-skin="datsuzoku"] .hero-grid{ display:block; } :root[data-skin="datsuzoku"] .hero-art{ transform:none; margin-top:28px; } :root[data-skin="fukinsei"] .hero h1, :root[data-skin="fukinsei"] .hero .lead, :root[data-skin="fukinsei"] .hero .eyebrow, :root[data-skin="fukinsei"] .hero-cta{ margin-left:0; transform:none; } :root[data-skin="seijaku"] .nav, :root[data-skin="enso"] .nav{ justify-content:space-between; } } /* ===== p09-movements.css ===== */ /* ============================================================ MOVEMENTS — whole-site structural skins ============================================================ */ /* ---- riso (constraint becomes character: cheap stock, spot-ink registration, reproducible zine sheets). Uses 2 scaffold layers. ---- */ body[data-struct="riso"] .skin-structure-layer:nth-child(1){ background-image:radial-gradient(rgba(27,26,23,.055) .7px, transparent .9px); background-size:7px 7px; opacity:.65; } body[data-struct="riso"] .skin-structure-layer:nth-child(2){ inset:-10vh -8vw; background:radial-gradient(circle at 12% 22%, rgba(255,62,127,.16) 0 10vw, transparent 10.3vw),radial-gradient(circle at 86% 18%, rgba(44,127,255,.14) 0 12vw, transparent 12.3vw),radial-gradient(circle at 76% 82%, rgba(23,184,144,.13) 0 14vw, transparent 14.3vw); transform:translate(10px,-7px); } :root[data-skin="riso"] .site-header{ background:color-mix(in srgb, var(--bg) 94%, transparent); border-bottom:2px solid var(--ink); box-shadow:6px 6px 0 rgba(255,62,127,.28); } :root[data-skin="riso"] .nav{ height:72px; align-items:flex-end; padding-bottom:10px; } :root[data-skin="riso"] .brand{ font-family:var(--mono); text-transform:uppercase; letter-spacing:.02em; font-weight:700; } :root[data-skin="riso"] .brand span{ color:var(--accent); text-shadow:2px 0 #2C7FFF; } :root[data-skin="riso"] .nav-links a{ font-family:var(--mono); text-transform:uppercase; font-size:12px; letter-spacing:.08em; color:var(--ink); background:var(--surface-2); padding:6px 8px; box-shadow:3px 3px 0 rgba(27,26,23,.15); } :root[data-skin="riso"] .nav-links a::after{ height:3px; bottom:-5px; background:var(--accent); } :root[data-skin="riso"] .nav-right{ align-items:flex-end; gap:12px; } :root[data-skin="riso"] .cart-btn{ font-family:var(--mono); text-transform:uppercase; border:2px solid var(--ink); background:var(--accent); color:var(--bg); box-shadow:3px 3px 0 #2C7FFF; border-radius:0; } :root[data-skin="riso"] .hero{ padding-block:clamp(48px,9vw,112px) clamp(44px,7vw,78px); } :root[data-skin="riso"] .hero-grid{ grid-template-columns:.9fr 1.1fr; gap:clamp(24px,4vw,52px); align-items:end; } :root[data-skin="riso"] .hero h1{ font-family:var(--mono); font-weight:700; text-transform:uppercase; line-height:.94; letter-spacing:-.04em; text-shadow:4px 0 rgba(255,62,127,.28), -4px 0 rgba(44,127,255,.22); } :root[data-skin="riso"] .hero .lead{ font-family:var(--mono); max-width:50ch; color:var(--ink-soft); } :root[data-skin="riso"] .hero .eyebrow, :root[data-skin="riso"] .section-head .eyebrow{ font-family:var(--mono); color:var(--accent); background:var(--bg); display:inline-block; padding:3px 7px; border:1px solid var(--ink); text-transform:uppercase; } :root[data-skin="riso"] .hero-cta{ gap:10px; } :root[data-skin="riso"] .hero-art, :root[data-skin="riso"] .card-media, :root[data-skin="riso"] .about-portrait{ aspect-ratio:auto; overflow:visible; background:var(--accent); padding:clamp(10px,1.5vw,18px); border:2px solid var(--ink); border-radius:0; box-shadow:6px 6px 0 #2C7FFF, -3px -3px 0 rgba(23,184,144,.45); } :root[data-skin="riso"] .hero-art img, :root[data-skin="riso"] .card-media img, :root[data-skin="riso"] .about-portrait img{ width:100%; height:auto; object-fit:contain; display:block; mix-blend-mode:multiply; filter:grayscale(1) contrast(1.08); } :root[data-skin="riso"] .card:hover .card-media img{ transform:none; } :root[data-skin="riso"] .section{ padding-block:clamp(44px,7vw,88px); } :root[data-skin="riso"] .section-head{ align-items:start; border-top:2px solid var(--ink); padding-top:12px; } :root[data-skin="riso"] .section-head h2{ font-family:var(--mono); text-transform:uppercase; letter-spacing:-.04em; background:linear-gradient(90deg,var(--accent) 0 38%, transparent 38%); padding-inline:8px; } :root[data-skin="riso"] .section--alt{ background:var(--surface-2); border-block:2px solid var(--ink); box-shadow:inset 0 10px rgba(255,62,127,.08); } :root[data-skin="riso"] .section--showcase{ background:var(--bg); } :root[data-skin="riso"] .btn, :root[data-skin="riso"] input, :root[data-skin="riso"] select, :root[data-skin="riso"] textarea{ border-radius:0; border:2px solid var(--ink); font-family:var(--mono); box-shadow:3px 3px 0 rgba(27,26,23,.18); } :root[data-skin="riso"] .btn-primary{ background:var(--accent); color:var(--bg); border-color:var(--ink); } :root[data-skin="riso"] .btn-ghost{ background:var(--surface); color:var(--ink); } :root[data-skin="riso"] .site-footer{ background:var(--surface-2); border-top:2px solid var(--ink); box-shadow:0 -6px 0 rgba(255,62,127,.22); } :root[data-skin="riso"] .site-footer a{ color:var(--ink); text-decoration:underline; text-decoration-thickness:2px; text-decoration-color:var(--accent); } :root[data-skin="riso"] .site-footer h4{ font-family:var(--mono); color:var(--accent); } /* ---- newwave (layered digital instability: skewed chips, synthetic magenta/cyan, screen-space rather than the sober Swiss plane). Uses 3 scaffold layers. ---- */ body[data-struct="newwave"] .skin-structure-layer:nth-child(1){ background-image:linear-gradient(115deg, transparent 0 43%, rgba(229,0,125,.11) 43% 45%, transparent 45% 100%),radial-gradient(rgba(0,166,184,.14) 1px, transparent 1.2px); background-size:100% 100%,18px 18px; } body[data-struct="newwave"] .skin-structure-layer:nth-child(2){ inset:8vh auto auto -8vw; width:52vw; height:40vh; background:rgba(229,0,125,.18); clip-path:polygon(0 18%,100% 0,78% 100%,8% 82%); transform:skewX(-10deg); } body[data-struct="newwave"] .skin-structure-layer:nth-child(3){ inset:auto -10vw 4vh auto; width:48vw; height:46vh; background:rgba(0,166,184,.18); clip-path:polygon(16% 0,100% 24%,82% 100%,0 76%); transform:skewX(12deg); } :root[data-skin="newwave"] .site-header{ background:color-mix(in srgb, var(--surface) 82%, transparent); border-bottom:none; box-shadow:0 18px 46px -38px rgba(20,19,24,.55); transform:skewY(-.6deg); transform-origin:left top; } :root[data-skin="newwave"] .nav{ min-height:76px; transform:skewY(.6deg); } :root[data-skin="newwave"] .brand{ font-family:var(--sans); font-weight:800; letter-spacing:-.04em; text-transform:uppercase; color:var(--ink); } :root[data-skin="newwave"] .brand span{ color:var(--accent); } :root[data-skin="newwave"] .nav-links{ gap:clamp(14px,2.5vw,34px); } :root[data-skin="newwave"] .nav-links a{ color:var(--ink); font-weight:800; text-transform:uppercase; letter-spacing:.01em; padding:7px 9px; transform:skewX(-8deg); } :root[data-skin="newwave"] .nav-links a:hover, :root[data-skin="newwave"] .nav-links a[aria-current="page"]{ background:var(--accent); color:#fff; } :root[data-skin="newwave"] .nav-links a::after{ height:4px; background:var(--accent-cyan); bottom:-6px; transform:skewX(8deg); } :root[data-skin="newwave"] .nav-right{ gap:16px; transform:translateY(6px); } :root[data-skin="newwave"] .cart-btn{ background:var(--accent-cyan); color:#fff; border:none; transform:skewX(-8deg); box-shadow:10px 10px 0 rgba(229,0,125,.32); border-radius:0; } :root[data-skin="newwave"] .hero{ padding-block:clamp(64px,10vw,136px) clamp(50px,8vw,96px); } :root[data-skin="newwave"] .hero-grid{ grid-template-columns:1fr .88fr; gap:clamp(22px,5vw,78px); align-items:center; } :root[data-skin="newwave"] .hero h1{ font-family:var(--sans); font-weight:800; text-transform:uppercase; line-height:.86; letter-spacing:-.07em; max-width:10ch; } :root[data-skin="newwave"] .hero .lead{ color:var(--ink-soft); background:rgba(255,255,255,.72); padding:clamp(12px,1.8vw,20px); box-shadow:14px 14px 0 rgba(0,166,184,.18); transform:translateX(clamp(0px,3vw,42px)); } :root[data-skin="newwave"] .hero .eyebrow, :root[data-skin="newwave"] .section-head .eyebrow{ display:inline-block; background:var(--accent); color:#fff; padding:6px 10px; transform:skewX(-8deg); font-family:var(--mono); letter-spacing:.16em; } :root[data-skin="newwave"] .hero-cta{ transform:translateX(clamp(0px,2vw,28px)); } :root[data-skin="newwave"] .hero-art, :root[data-skin="newwave"] .card-media, :root[data-skin="newwave"] .about-portrait{ aspect-ratio:auto; overflow:visible; border:none; border-radius:0; background:transparent; padding:0; box-shadow:0 34px 70px -38px rgba(20,19,24,.55); transform:skewY(-1.2deg); } :root[data-skin="newwave"] .hero-art img, :root[data-skin="newwave"] .card-media img, :root[data-skin="newwave"] .about-portrait img{ width:100%; height:auto; object-fit:contain; display:block; } :root[data-skin="newwave"] .card:hover .card-media img{ transform:none; } :root[data-skin="newwave"] .section{ padding-block:clamp(52px,8vw,104px); } :root[data-skin="newwave"] .section-head{ align-items:center; transform:translateX(clamp(0px,2vw,32px)); } :root[data-skin="newwave"] .section-head h2{ font-family:var(--sans); font-weight:800; text-transform:uppercase; line-height:.92; letter-spacing:-.05em; text-shadow:6px 6px 0 rgba(0,166,184,.22); } :root[data-skin="newwave"] .section--alt{ background:linear-gradient(105deg, rgba(229,0,125,.08), rgba(0,166,184,.10)); border-block:none; } :root[data-skin="newwave"] .section--showcase{ background:var(--bg); } :root[data-skin="newwave"] .btn, :root[data-skin="newwave"] input, :root[data-skin="newwave"] select, :root[data-skin="newwave"] textarea{ border-radius:0; border:2px solid var(--ink); box-shadow:8px 8px 0 rgba(0,166,184,.22); } :root[data-skin="newwave"] .btn-primary{ background:var(--accent); color:#fff; border-color:var(--accent); transform:skewX(-8deg); } :root[data-skin="newwave"] .btn-ghost{ background:#fff; color:var(--ink); transform:skewX(5deg); } :root[data-skin="newwave"] .site-footer{ background:var(--ink); color:#fff; border-top:none; clip-path:polygon(0 8%,100% 0,100% 100%,0 100%); } :root[data-skin="newwave"] .site-footer a{ color:var(--accent-cyan); } :root[data-skin="newwave"] .site-footer h4{ color:var(--accent); font-family:var(--mono); } /* ---- ruscha (deadpan artist-book procession: warm California paper, the phrase becomes the picture). Uses 1 scaffold layer. ---- */ body[data-struct="ruscha"] .skin-structure-layer:nth-child(1){ background:linear-gradient(90deg, transparent 0 48%, rgba(232,98,42,.12) 48% 49%, transparent 49% 100%),linear-gradient(180deg, rgba(255,255,255,.22), transparent 40%, rgba(232,98,42,.08)); } :root[data-skin="ruscha"] .site-header{ background:var(--bg); border-bottom:1px solid var(--ink); box-shadow:none; } :root[data-skin="ruscha"] .nav{ height:74px; justify-content:center; gap:clamp(24px,5vw,80px); } :root[data-skin="ruscha"] .brand{ font-family:var(--sans); font-weight:800; text-transform:uppercase; letter-spacing:-.04em; font-size:clamp(22px,3vw,34px); color:var(--ink); } :root[data-skin="ruscha"] .brand span{ color:var(--accent); } :root[data-skin="ruscha"] .nav-links a{ font-family:var(--sans); font-weight:800; text-transform:uppercase; color:var(--ink); letter-spacing:.02em; } :root[data-skin="ruscha"] .nav-links a::after{ height:2px; background:var(--accent); } :root[data-skin="ruscha"] .nav-right{ gap:24px; } :root[data-skin="ruscha"] .cart-btn{ font-family:var(--mono); text-transform:uppercase; color:var(--accent); border:1px solid var(--ink); background:var(--surface); border-radius:0; } :root[data-skin="ruscha"] .hero{ padding-block:clamp(70px,12vw,160px) clamp(58px,8vw,104px); text-align:center; } :root[data-skin="ruscha"] .hero-grid{ grid-template-columns:1fr; max-width:1040px; margin-inline:auto; gap:clamp(28px,5vw,62px); } :root[data-skin="ruscha"] .hero h1{ font-family:var(--sans); font-weight:800; text-transform:uppercase; letter-spacing:-.07em; line-height:.82; margin-inline:auto; } :root[data-skin="ruscha"] .hero .lead{ margin-inline:auto; max-width:58ch; color:var(--ink-soft); font-size:clamp(18px,2vw,23px); } :root[data-skin="ruscha"] .hero .eyebrow, :root[data-skin="ruscha"] .section-head .eyebrow{ font-family:var(--mono); color:var(--accent); text-transform:uppercase; letter-spacing:.18em; } :root[data-skin="ruscha"] .hero-cta{ justify-content:center; } :root[data-skin="ruscha"] .hero-art, :root[data-skin="ruscha"] .card-media, :root[data-skin="ruscha"] .about-portrait{ aspect-ratio:auto; overflow:visible; background:transparent; border:none; border-radius:0; padding:0; box-shadow:0 30px 64px -36px rgba(0,0,0,.4); } :root[data-skin="ruscha"] .hero-art img, :root[data-skin="ruscha"] .card-media img, :root[data-skin="ruscha"] .about-portrait img{ width:100%; height:auto; object-fit:contain; display:block; } :root[data-skin="ruscha"] .card:hover .card-media img{ transform:none; } :root[data-skin="ruscha"] .section{ padding-block:clamp(60px,9vw,126px); } :root[data-skin="ruscha"] .section-head{ display:block; max-width:1000px; margin-inline:auto; border-top:1px solid var(--ink); padding-top:18px; } :root[data-skin="ruscha"] .section-head h2{ font-family:var(--sans); font-weight:800; text-transform:uppercase; letter-spacing:-.06em; line-height:.85; font-size:clamp(42px,8vw,112px); } :root[data-skin="ruscha"] .section--alt{ background:var(--surface); border-block:1px solid var(--line-strong); } :root[data-skin="ruscha"] .section--showcase{ background:var(--bg); } :root[data-skin="ruscha"] .btn, :root[data-skin="ruscha"] input, :root[data-skin="ruscha"] select, :root[data-skin="ruscha"] textarea{ border-radius:0; border:1px solid var(--ink); font-family:var(--mono); text-transform:uppercase; } :root[data-skin="ruscha"] .btn-primary{ background:var(--ink); color:var(--bg); } :root[data-skin="ruscha"] .btn-ghost{ background:transparent; color:var(--accent); } :root[data-skin="ruscha"] .site-footer{ background:var(--bg); border-top:1px solid var(--ink); text-align:left; } :root[data-skin="ruscha"] .site-footer a{ color:var(--ink); } :root[data-skin="ruscha"] .site-footer h4{ color:var(--accent); font-family:var(--mono); } /* ---- supergraphic (colour as architecture and wayfinding, not decoration). Uses 3 scaffold layers. ---- */ body[data-struct="supergraphic"] .skin-structure-layer:nth-child(1){ inset:0 auto auto 0; width:30vw; height:100vh; background:#1F6FEB; opacity:.14; } body[data-struct="supergraphic"] .skin-structure-layer:nth-child(2){ inset:12vh 0 auto auto; width:44vw; height:34vh; background:#FF4E2A; opacity:.18; clip-path:polygon(0 0,100% 0,100% 72%,18% 100%); } body[data-struct="supergraphic"] .skin-structure-layer:nth-child(3){ inset:auto 8vw 0 auto; width:34vw; height:42vh; background:linear-gradient(135deg,#F4B400 0 42%,#00A98F 42% 72%,#7A3FF2 72%); opacity:.18; } :root[data-skin="supergraphic"] .site-header{ background:#fff; border-bottom:0; box-shadow:inset 0 -10px 0 var(--accent); } :root[data-skin="supergraphic"] .nav{ height:84px; } :root[data-skin="supergraphic"] .brand{ font-family:var(--sans); font-weight:800; text-transform:uppercase; letter-spacing:-.05em; background:var(--accent); color:#fff; padding:8px 12px; } :root[data-skin="supergraphic"] .brand span{ color:#fff; } :root[data-skin="supergraphic"] .nav-links a{ font-family:var(--sans); font-weight:800; text-transform:uppercase; color:var(--ink); padding:10px 12px; } :root[data-skin="supergraphic"] .nav-links a:hover, :root[data-skin="supergraphic"] .nav-links a[aria-current="page"]{ background:#1F6FEB; color:#fff; } :root[data-skin="supergraphic"] .nav-links a::after{ height:6px; bottom:-10px; background:#F4B400; } :root[data-skin="supergraphic"] .nav-right{ gap:10px; } :root[data-skin="supergraphic"] .cart-btn{ background:#00A98F; color:#fff; border:0; border-radius:0; font-weight:800; text-transform:uppercase; } :root[data-skin="supergraphic"] .hero{ padding-block:clamp(58px,10vw,126px); background:linear-gradient(90deg, transparent 0 54%, rgba(255,78,42,.12) 54% 100%); } :root[data-skin="supergraphic"] .hero-grid{ grid-template-columns:.78fr 1.22fr; gap:clamp(18px,4vw,56px); } :root[data-skin="supergraphic"] .hero h1{ font-family:var(--sans); font-weight:800; text-transform:uppercase; line-height:.86; letter-spacing:-.07em; background:#fff; padding:clamp(14px,2vw,24px); box-shadow:clamp(12px,2vw,24px) clamp(12px,2vw,24px) 0 #1F6FEB; } :root[data-skin="supergraphic"] .hero .lead{ color:var(--ink); background:#F4B400; padding:clamp(12px,2vw,22px); max-width:42ch; font-weight:700; } :root[data-skin="supergraphic"] .hero .eyebrow, :root[data-skin="supergraphic"] .section-head .eyebrow{ background:#7A3FF2; color:#fff; padding:6px 10px; font-family:var(--mono); text-transform:uppercase; } :root[data-skin="supergraphic"] .hero-cta{ gap:0; } :root[data-skin="supergraphic"] .hero-art, :root[data-skin="supergraphic"] .card-media, :root[data-skin="supergraphic"] .about-portrait{ aspect-ratio:auto; overflow:visible; border:0; border-radius:0; background:var(--accent); padding:clamp(12px,1.8vw,24px); box-shadow:none; } :root[data-skin="supergraphic"] .hero-art img, :root[data-skin="supergraphic"] .card-media img, :root[data-skin="supergraphic"] .about-portrait img{ width:100%; height:auto; object-fit:contain; display:block; background:#fff; } :root[data-skin="supergraphic"] .card:hover .card-media img{ transform:none; } :root[data-skin="supergraphic"] .section{ padding-block:clamp(46px,7vw,88px); } :root[data-skin="supergraphic"] .section-head{ background:#fff; padding:clamp(14px,2vw,24px); border-left:clamp(14px,2vw,24px) solid var(--accent); } :root[data-skin="supergraphic"] .section-head h2{ font-family:var(--sans); font-weight:800; text-transform:uppercase; letter-spacing:-.06em; line-height:.9; } :root[data-skin="supergraphic"] .section--alt{ background:linear-gradient(90deg, #1F6FEB 0 18px, var(--surface-2) 18px); border-block:0; } :root[data-skin="supergraphic"] .section--showcase{ background:var(--bg); } :root[data-skin="supergraphic"] .btn, :root[data-skin="supergraphic"] input, :root[data-skin="supergraphic"] select, :root[data-skin="supergraphic"] textarea{ border-radius:0; border:0; box-shadow:inset 0 0 0 3px var(--ink); font-weight:800; } :root[data-skin="supergraphic"] .btn-primary{ background:var(--accent); color:#fff; } :root[data-skin="supergraphic"] .btn-ghost{ background:#fff; color:var(--ink); } :root[data-skin="supergraphic"] .site-footer{ background:linear-gradient(90deg,#FF4E2A 0 25%,#1F6FEB 25% 50%,#F4B400 50% 75%,#00A98F 75%); color:#fff; border-top:0; } :root[data-skin="supergraphic"] .site-footer a, :root[data-skin="supergraphic"] .site-footer h4{ color:#fff; } /* ---- bauhaus (art and craft unified by rational construction: primary planes, black rules, functional modules). Uses 2 scaffold layers. ---- */ body[data-struct="bauhaus"] .skin-structure-layer:nth-child(1){ background-image:repeating-linear-gradient(0deg, rgba(18,18,18,.05) 0 2px, transparent 2px 76px),repeating-linear-gradient(90deg, rgba(18,18,18,.05) 0 2px, transparent 2px 76px); } body[data-struct="bauhaus"] .skin-structure-layer:nth-child(2){ background:radial-gradient(circle at 88% 18%, rgba(30,90,168,.18) 0 9vw, transparent 9.2vw),linear-gradient(135deg, transparent 0 10%, rgba(216,64,44,.13) 10% 20%, transparent 20%),linear-gradient(90deg, transparent 0 8vw, rgba(242,180,23,.16) 8vw 16vw, transparent 16vw); } :root[data-skin="bauhaus"] .site-header{ background:var(--surface); border-bottom:4px solid var(--ink); } :root[data-skin="bauhaus"] .nav{ height:76px; display:grid; grid-template-columns:1fr auto 1fr; gap:24px; } :root[data-skin="bauhaus"] .brand{ font-family:var(--sans); font-weight:800; text-transform:lowercase; letter-spacing:-.05em; color:var(--ink); } :root[data-skin="bauhaus"] .brand span{ color:var(--bh-red); } :root[data-skin="bauhaus"] .nav-links{ justify-content:center; } :root[data-skin="bauhaus"] .nav-links a{ font-family:var(--sans); font-weight:800; text-transform:uppercase; color:var(--ink); padding:8px 10px; } :root[data-skin="bauhaus"] .nav-links li:nth-child(3n+1) a{ background:var(--bh-yellow); } :root[data-skin="bauhaus"] .nav-links a::after{ height:4px; background:var(--ink); bottom:-6px; } :root[data-skin="bauhaus"] .nav-right{ justify-content:end; gap:12px; } :root[data-skin="bauhaus"] .cart-btn{ border:3px solid var(--ink); background:var(--bh-blue); color:#fff; border-radius:0; font-weight:800; } :root[data-skin="bauhaus"] .hero{ padding-block:clamp(56px,9vw,118px); } :root[data-skin="bauhaus"] .hero-grid{ grid-template-columns:repeat(6,1fr); gap:clamp(14px,2vw,28px); align-items:stretch; } :root[data-skin="bauhaus"] .hero-grid > :first-child{ grid-column:span 3; display:flex; flex-direction:column; justify-content:center; border:3px solid var(--ink); background:var(--surface); padding:clamp(18px,3vw,38px); } :root[data-skin="bauhaus"] .hero-art{ grid-column:span 3; } :root[data-skin="bauhaus"] .hero h1{ font-family:var(--sans); font-weight:800; text-transform:uppercase; line-height:.9; letter-spacing:-.06em; } :root[data-skin="bauhaus"] .hero .lead{ color:var(--ink); border-top:3px solid var(--ink); padding-top:16px; } :root[data-skin="bauhaus"] .hero .eyebrow, :root[data-skin="bauhaus"] .section-head .eyebrow{ font-family:var(--mono); text-transform:uppercase; color:var(--ink); background:var(--bh-yellow); padding:5px 8px; } :root[data-skin="bauhaus"] .hero-cta{ gap:12px; } :root[data-skin="bauhaus"] .hero-art, :root[data-skin="bauhaus"] .card-media, :root[data-skin="bauhaus"] .about-portrait{ aspect-ratio:auto; overflow:visible; border:3px solid var(--ink); border-radius:0; background:var(--surface); padding:clamp(10px,1.4vw,18px); box-shadow:none; } :root[data-skin="bauhaus"] .hero-art img, :root[data-skin="bauhaus"] .card-media img, :root[data-skin="bauhaus"] .about-portrait img{ width:100%; height:auto; object-fit:contain; display:block; } :root[data-skin="bauhaus"] .card:hover .card-media img{ transform:none; } :root[data-skin="bauhaus"] .section{ padding-block:clamp(48px,7vw,92px); } :root[data-skin="bauhaus"] .section-head{ display:grid; grid-template-columns:2fr 4fr; align-items:end; border:3px solid var(--ink); background:var(--surface); padding:clamp(14px,2vw,24px); } :root[data-skin="bauhaus"] .section-head h2{ font-family:var(--sans); font-weight:800; text-transform:uppercase; line-height:.9; letter-spacing:-.05em; } :root[data-skin="bauhaus"] .section--alt{ background:linear-gradient(90deg, var(--bh-red) 0 12px, var(--surface-2) 12px); border-block:3px solid var(--ink); } :root[data-skin="bauhaus"] .section--showcase{ background:var(--bg); } :root[data-skin="bauhaus"] .btn, :root[data-skin="bauhaus"] input, :root[data-skin="bauhaus"] select, :root[data-skin="bauhaus"] textarea{ border-radius:0; border:3px solid var(--ink); font-family:var(--sans); font-weight:800; } :root[data-skin="bauhaus"] .btn-primary{ background:var(--bh-red); color:#fff; } :root[data-skin="bauhaus"] .btn-ghost{ background:var(--bh-yellow); color:var(--ink); } :root[data-skin="bauhaus"] .site-footer{ background:var(--ink); color:#fff; border-top:8px solid var(--bh-yellow); } :root[data-skin="bauhaus"] .site-footer a{ color:#fff; } :root[data-skin="bauhaus"] .site-footer h4{ color:var(--bh-yellow); font-family:var(--mono); } /* ---- destijl (universal order by orthogonal black line, white plane and primary rectangles; asymmetry becomes balanced). Uses 3 scaffold layers. ---- */ body[data-struct="destijl"] .skin-structure-layer:nth-child(1){ background-image:linear-gradient(90deg, transparent 0 22%, rgba(14,14,14,.10) 22% calc(22% + 7px), transparent calc(22% + 7px) 100%),linear-gradient(0deg, transparent 0 36%, rgba(14,14,14,.10) 36% calc(36% + 7px), transparent calc(36% + 7px) 100%); } body[data-struct="destijl"] .skin-structure-layer:nth-child(2){ inset:9vh auto auto 6vw; width:18vw; height:28vh; background:#D5261F; opacity:.14; } body[data-struct="destijl"] .skin-structure-layer:nth-child(3){ inset:auto 8vw 10vh auto; width:24vw; height:18vh; background:linear-gradient(90deg,#143C82 0 62%,#F7CE00 62%); opacity:.15; } :root[data-skin="destijl"] .site-header{ background:#fff; border-bottom:7px solid var(--ink); } :root[data-skin="destijl"] .nav{ height:78px; display:grid; grid-template-columns:2fr 5fr 2fr; gap:0; } :root[data-skin="destijl"] .brand{ font-family:var(--sans); font-weight:800; text-transform:uppercase; color:var(--ink); border-right:7px solid var(--ink); align-self:stretch; display:flex; align-items:center; padding-right:18px; } :root[data-skin="destijl"] .brand span{ color:var(--ds-red); } :root[data-skin="destijl"] .nav-links{ gap:0; align-self:stretch; } :root[data-skin="destijl"] .nav-links a{ font-family:var(--sans); font-weight:800; text-transform:uppercase; color:var(--ink); padding:0 16px; align-self:stretch; display:flex; align-items:center; border-right:7px solid var(--ink); } :root[data-skin="destijl"] .nav-links a:hover, :root[data-skin="destijl"] .nav-links a[aria-current="page"]{ background:var(--ds-yellow); } :root[data-skin="destijl"] .nav-links a::after{ display:none; } :root[data-skin="destijl"] .nav-right{ justify-content:end; align-self:stretch; gap:0; } :root[data-skin="destijl"] .cart-btn{ border:0; border-left:7px solid var(--ink); border-radius:0; align-self:stretch; background:var(--ds-blue); color:#fff; padding-inline:16px; } :root[data-skin="destijl"] .hero{ padding-block:clamp(54px,8vw,106px); } :root[data-skin="destijl"] .hero-grid{ grid-template-columns:repeat(12,1fr); gap:0; border:7px solid var(--ink); background:var(--ink); align-items:stretch; } :root[data-skin="destijl"] .hero-grid > :first-child{ grid-column:1 / 7; background:#fff; padding:clamp(18px,3vw,40px); } :root[data-skin="destijl"] .hero-art{ grid-column:7 / 13; } :root[data-skin="destijl"] .hero h1{ font-family:var(--sans); font-weight:800; text-transform:uppercase; line-height:.88; letter-spacing:-.05em; } :root[data-skin="destijl"] .hero .lead{ color:var(--ink); border-top:7px solid var(--ink); padding-top:16px; } :root[data-skin="destijl"] .hero .eyebrow, :root[data-skin="destijl"] .section-head .eyebrow{ background:var(--ds-red); color:#fff; padding:6px 10px; font-family:var(--mono); text-transform:uppercase; } :root[data-skin="destijl"] .hero-cta{ gap:0; } :root[data-skin="destijl"] .hero-art, :root[data-skin="destijl"] .card-media, :root[data-skin="destijl"] .about-portrait{ aspect-ratio:auto; overflow:visible; border:7px solid var(--ink); border-radius:0; background:#fff; padding:clamp(8px,1vw,16px); box-shadow:none; } :root[data-skin="destijl"] .hero-art img, :root[data-skin="destijl"] .card-media img, :root[data-skin="destijl"] .about-portrait img{ width:100%; height:auto; object-fit:contain; display:block; } :root[data-skin="destijl"] .card:hover .card-media img{ transform:none; } :root[data-skin="destijl"] .section{ padding-block:clamp(48px,7vw,92px); } :root[data-skin="destijl"] .section-head{ display:grid; grid-template-columns:3fr 9fr; gap:0; border:7px solid var(--ink); background:#fff; } :root[data-skin="destijl"] .section-head > *{ padding:clamp(12px,2vw,24px); } :root[data-skin="destijl"] .section-head h2{ font-family:var(--sans); font-weight:800; text-transform:uppercase; line-height:.9; letter-spacing:-.04em; border-left:7px solid var(--ink); } :root[data-skin="destijl"] .section--alt{ background:linear-gradient(90deg, #fff 0 35%, var(--ds-yellow) 35% 48%, #fff 48%); border-block:7px solid var(--ink); } :root[data-skin="destijl"] .section--showcase{ background:var(--bg); } :root[data-skin="destijl"] .btn, :root[data-skin="destijl"] input, :root[data-skin="destijl"] select, :root[data-skin="destijl"] textarea{ border-radius:0; border:7px solid var(--ink); font-family:var(--sans); font-weight:800; } :root[data-skin="destijl"] .btn-primary{ background:var(--ds-red); color:#fff; } :root[data-skin="destijl"] .btn-ghost{ background:var(--ds-yellow); color:var(--ink); } :root[data-skin="destijl"] .site-footer{ background:#fff; color:var(--ink); border-top:7px solid var(--ink); } :root[data-skin="destijl"] .site-footer a{ color:var(--ink); } :root[data-skin="destijl"] .site-footer h4{ color:var(--ds-blue); font-family:var(--mono); } /* ---- constructivist (agitational construction: red/black/white, diagonals, photomontage force and public sans voice). Uses 3 scaffold layers. ---- */ body[data-struct="constructivist"] .skin-structure-layer:nth-child(1){ inset:-20vh auto auto -16vw; width:70vw; height:70vh; background:rgba(196,43,28,.16); clip-path:polygon(0 0,100% 28%,82% 100%,0 70%); transform:rotate(-8deg); } body[data-struct="constructivist"] .skin-structure-layer:nth-child(2){ inset:12vh -12vw auto auto; width:46vw; height:80vh; background:rgba(20,18,16,.10); clip-path:polygon(42% 0,100% 0,58% 100%,0 100%); transform:rotate(10deg); } body[data-struct="constructivist"] .skin-structure-layer:nth-child(3){ background-image:repeating-linear-gradient(115deg, rgba(20,18,16,.08) 0 2px, transparent 2px 14px); opacity:.55; } :root[data-skin="constructivist"] .site-header{ background:var(--ink); border-bottom:6px solid var(--cv-red); box-shadow:0 18px 40px -30px rgba(0,0,0,.7); } :root[data-skin="constructivist"] .nav{ height:78px; } :root[data-skin="constructivist"] .brand{ font-family:var(--sans); font-weight:800; text-transform:uppercase; letter-spacing:-.05em; color:#fff; transform:skewX(-8deg); } :root[data-skin="constructivist"] .brand span{ color:var(--cv-red-deep); } :root[data-skin="constructivist"] .nav-links a{ font-family:var(--sans); font-weight:800; text-transform:uppercase; color:#fff; letter-spacing:.04em; padding:7px 10px; transform:skewX(-8deg); } :root[data-skin="constructivist"] .nav-links a:hover, :root[data-skin="constructivist"] .nav-links a[aria-current="page"]{ background:var(--cv-red); } :root[data-skin="constructivist"] .nav-links a::after{ height:5px; background:var(--cv-red-deep); bottom:-7px; } :root[data-skin="constructivist"] .nav-right{ gap:12px; } :root[data-skin="constructivist"] .cart-btn{ background:var(--cv-red); color:#fff; border:2px solid #fff; border-radius:0; font-weight:800; text-transform:uppercase; transform:skewX(-8deg); } :root[data-skin="constructivist"] .hero{ padding-block:clamp(58px,10vw,132px); background:linear-gradient(112deg, transparent 0 58%, rgba(20,18,16,.08) 58% 100%); } :root[data-skin="constructivist"] .hero-grid{ grid-template-columns:repeat(12,1fr); gap:clamp(18px,3vw,44px); align-items:center; } :root[data-skin="constructivist"] .hero-grid > :first-child{ grid-column:1 / 8; background:var(--ink); color:#fff; padding:clamp(18px,3vw,42px); transform:rotate(-1deg); } :root[data-skin="constructivist"] .hero-art{ grid-column:8 / 13; transform:rotate(2deg); } :root[data-skin="constructivist"] .hero h1{ font-family:var(--sans); font-weight:800; text-transform:uppercase; line-height:.82; letter-spacing:-.07em; } :root[data-skin="constructivist"] .hero .lead{ color:#fff; border-left:10px solid var(--cv-red); padding-left:16px; } :root[data-skin="constructivist"] .hero .eyebrow, :root[data-skin="constructivist"] .section-head .eyebrow{ display:inline-block; background:var(--cv-red); color:#fff; padding:6px 10px; font-family:var(--mono); text-transform:uppercase; letter-spacing:.18em; transform:skewX(-8deg); } :root[data-skin="constructivist"] .hero-cta{ gap:12px; } :root[data-skin="constructivist"] .hero-art, :root[data-skin="constructivist"] .card-media, :root[data-skin="constructivist"] .about-portrait{ aspect-ratio:auto; overflow:visible; border:0; border-radius:0; background:#111; padding:clamp(10px,1.5vw,18px); box-shadow:0 26px 54px -32px rgba(0,0,0,.65); } :root[data-skin="constructivist"] .hero-art img, :root[data-skin="constructivist"] .card-media img, :root[data-skin="constructivist"] .about-portrait img{ width:100%; height:auto; object-fit:contain; display:block; filter:grayscale(1) contrast(1.18); } :root[data-skin="constructivist"] .card:hover .card-media img{ transform:none; } :root[data-skin="constructivist"] .section{ padding-block:clamp(50px,8vw,104px); } :root[data-skin="constructivist"] .section-head{ align-items:center; background:var(--ink); color:#fff; padding:clamp(14px,2vw,28px); border-left:14px solid var(--cv-red); transform:skewY(-.8deg); } :root[data-skin="constructivist"] .section-head h2{ font-family:var(--sans); font-weight:800; text-transform:uppercase; line-height:.86; letter-spacing:-.06em; color:#fff; } :root[data-skin="constructivist"] .section--alt{ background:linear-gradient(112deg, var(--surface-2) 0 70%, rgba(196,43,28,.16) 70%); border-block:0; } :root[data-skin="constructivist"] .section--showcase{ background:var(--ink); } :root[data-skin="constructivist"] .btn, :root[data-skin="constructivist"] input, :root[data-skin="constructivist"] select, :root[data-skin="constructivist"] textarea{ border-radius:0; border:2px solid var(--ink); font-family:var(--sans); font-weight:800; text-transform:uppercase; } :root[data-skin="constructivist"] .btn-primary{ background:var(--cv-red); color:#fff; border-color:var(--cv-red); transform:skewX(-8deg); } :root[data-skin="constructivist"] .btn-ghost{ background:var(--ink); color:#fff; transform:skewX(8deg); } :root[data-skin="constructivist"] .site-footer{ background:var(--ink); color:#fff; border-top:8px solid var(--cv-red); clip-path:polygon(0 0,100% 8%,100% 100%,0 100%); } :root[data-skin="constructivist"] .site-footer a{ color:#fff; text-decoration:underline; text-decoration-color:var(--cv-red-deep); text-decoration-thickness:3px; } :root[data-skin="constructivist"] .site-footer h4{ color:var(--cv-red-deep); font-family:var(--mono); } @media (max-width: 820px){ :root[data-skin="riso"] .hero-grid, :root[data-skin="newwave"] .hero-grid, :root[data-skin="supergraphic"] .hero-grid{ grid-template-columns:1fr; } :root[data-skin="bauhaus"] .hero-grid, :root[data-skin="destijl"] .hero-grid, :root[data-skin="constructivist"] .hero-grid{ grid-template-columns:1fr; border-width:0; } :root[data-skin="bauhaus"] .hero-grid > :first-child, :root[data-skin="bauhaus"] .hero-art, :root[data-skin="destijl"] .hero-grid > :first-child, :root[data-skin="destijl"] .hero-art, :root[data-skin="constructivist"] .hero-grid > :first-child, :root[data-skin="constructivist"] .hero-art{ grid-column:auto; } :root[data-skin="bauhaus"] .section-head, :root[data-skin="destijl"] .section-head{ grid-template-columns:1fr; } :root[data-skin="destijl"] .section-head h2{ border-left:0; border-top:7px solid var(--ink); } } /* ===== p10-photographers.css ===== */ /* ---- tillmans (temporary magazine-wall: anti-hierarchy through unequal intervals and pinned factuality). Uses 1 scaffold layer. ---- */ body[data-struct="tillmans"] .skin-structure-layer:nth-child(1){ background-image:radial-gradient(circle at 12% 18%, rgba(23,21,15,.10) 0 1px, transparent 2px), radial-gradient(circle at 77% 31%, rgba(23,21,15,.08) 0 1px, transparent 2px), radial-gradient(circle at 42% 72%, rgba(23,21,15,.07) 0 1px, transparent 2px); background-size:320px 260px, 420px 310px, 360px 290px; opacity:.55; } :root[data-skin="tillmans"] .site-header{ position:relative; background:rgba(251,250,248,.92); border-bottom:1px solid var(--line); box-shadow:none; } :root[data-skin="tillmans"] .nav{ min-height:78px; align-items:flex-start; padding-block:clamp(16px,2vw,26px); } :root[data-skin="tillmans"] .brand{ font-family:var(--sans); font-weight:400; letter-spacing:.01em; transform:translateY(3px); } :root[data-skin="tillmans"] .nav-links{ align-items:flex-start; gap:clamp(18px,3.2vw,54px); } :root[data-skin="tillmans"] .nav-links a{ position:relative; color:var(--ink-soft); font-size:13px; font-weight:400; letter-spacing:.02em; padding:3px 0 10px; } :root[data-skin="tillmans"] .nav-links a::after{ height:1px; background:var(--ink); transform-origin:left; } :root[data-skin="tillmans"] .nav-links li:nth-child(even) a{ margin-top:14px; } :root[data-skin="tillmans"] .nav-right{ align-self:flex-start; padding-top:2px; } :root[data-skin="tillmans"] .cart-btn{ border:1px solid var(--line); background:transparent; box-shadow:none; } :root[data-skin="tillmans"] .hero{ padding-block:clamp(72px,11vw,170px) clamp(58px,8vw,120px); background:linear-gradient(90deg, transparent 0 9%, rgba(240,238,233,.58) 9% 9.5%, transparent 9.5% 100%); } :root[data-skin="tillmans"] .hero-grid{ grid-template-columns:minmax(220px,.76fr) minmax(280px,1.24fr); gap:clamp(26px,7vw,112px); align-items:start; } :root[data-skin="tillmans"] .hero .eyebrow, :root[data-skin="tillmans"] .eyebrow{ font-family:var(--sans); color:var(--ink-faint); font-weight:400; letter-spacing:.16em; text-transform:uppercase; } :root[data-skin="tillmans"] .hero h1{ max-width:11ch; font-family:var(--sans); font-weight:400; line-height:.96; letter-spacing:-.055em; } :root[data-skin="tillmans"] .hero .lead{ max-width:56ch; margin-top:clamp(28px,5vw,74px); color:var(--ink-soft); font-size:clamp(17px,1.45vw,21px); } :root[data-skin="tillmans"] .hero-cta{ align-items:center; gap:12px; margin-top:clamp(22px,4vw,58px); } :root[data-skin="tillmans"] .hero-art{ justify-self:end; width:min(100%,760px); padding:clamp(10px,1.5vw,18px); background:var(--surface); box-shadow:0 1px 0 var(--line), 0 26px 54px -46px rgba(23,21,15,.4); transform:translateY(clamp(10px,3vw,42px)); } :root[data-skin="tillmans"] .section{ padding-block:clamp(70px,10vw,150px); background:transparent; } :root[data-skin="tillmans"] .section--alt{ background:rgba(240,238,233,.46); border-block:0; } :root[data-skin="tillmans"] .section--showcase{ background:var(--bg); } :root[data-skin="tillmans"] .section-head{ max-width:none; display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(12px,2vw,28px); align-items:end; margin-bottom:clamp(38px,7vw,96px); } :root[data-skin="tillmans"] .section-head .eyebrow{ grid-column:1 / 4; } :root[data-skin="tillmans"] .section-head h2{ grid-column:5 / 12; font-family:var(--sans); font-weight:400; letter-spacing:-.035em; line-height:.98; } :root[data-skin="tillmans"] .btn{ border-radius:0; border:1px solid var(--line-strong); box-shadow:none; font-family:var(--sans); font-weight:400; } :root[data-skin="tillmans"] .btn-primary{ background:var(--ink); color:var(--bg); } :root[data-skin="tillmans"] .btn-ghost{ background:transparent; color:var(--ink); } :root[data-skin="tillmans"] input, :root[data-skin="tillmans"] select, :root[data-skin="tillmans"] textarea{ border-radius:0; background:var(--surface); border:1px solid var(--line); box-shadow:none; } :root[data-skin="tillmans"] .card-media, :root[data-skin="tillmans"] .about-portrait{ background:var(--surface-2); padding:clamp(8px,1.2vw,14px); border-radius:0; box-shadow:none; } :root[data-skin="tillmans"] .card:nth-child(even) .card-media{ margin-top:clamp(18px,3vw,44px); } :root[data-skin="tillmans"] .site-footer{ background:var(--surface); border-top:1px solid var(--line); color:var(--ink-soft); } :root[data-skin="tillmans"] .site-footer h4{ font-family:var(--sans); font-weight:400; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); } :root[data-skin="tillmans"] .site-footer a{ color:var(--ink-soft); text-decoration-thickness:1px; text-underline-offset:5px; } /* ---- moriyama (are-bure-boke street shock: dense black chrome, abrasive gutters, flash typography). Uses 2 scaffold layers. ---- */ body[data-struct="moriyama"] #skin-structure{ background:#050505; } body[data-struct="moriyama"] .skin-structure-layer:nth-child(1){ background-image:repeating-radial-gradient(circle at 20% 30%, rgba(255,255,255,.10) 0 1px, transparent 1px 3px); mix-blend-mode:screen; opacity:.18; } body[data-struct="moriyama"] .skin-structure-layer:nth-child(2){ background:linear-gradient(112deg, transparent 0 17%, rgba(255,255,255,.08) 17.4% 18%, transparent 18.4% 46%, rgba(255,255,255,.05) 46.2% 46.7%, transparent 47%); opacity:.7; } :root[data-skin="moriyama"] .site-header{ background:#050505; border-bottom:3px solid #fff; box-shadow:0 18px 0 #000; } :root[data-skin="moriyama"] .nav{ min-height:64px; gap:10px; } :root[data-skin="moriyama"] .brand{ font-family:var(--mono); font-weight:800; text-transform:uppercase; letter-spacing:-.03em; color:#fff; } :root[data-skin="moriyama"] .nav-links{ gap:4px; } :root[data-skin="moriyama"] .nav-links a{ position:relative; font-family:var(--mono); color:#fff; text-transform:uppercase; letter-spacing:.08em; font-weight:800; padding:10px 12px; background:#111; } :root[data-skin="moriyama"] .nav-links a::after{ height:3px; background:#fff; bottom:2px; } :root[data-skin="moriyama"] .nav-right{ gap:6px; } :root[data-skin="moriyama"] .cart-btn{ border:2px solid #fff; background:#000; color:#fff; border-radius:0; box-shadow:6px 6px 0 rgba(255,255,255,.16); } :root[data-skin="moriyama"] .hero{ padding-block:clamp(44px,8vw,112px); background:linear-gradient(180deg,#000 0%, var(--bg) 100%); border-bottom:4px solid #fff; } :root[data-skin="moriyama"] .hero-grid{ grid-template-columns:minmax(250px,.95fr) minmax(260px,1.05fr); gap:clamp(8px,2vw,28px); align-items:center; } :root[data-skin="moriyama"] .hero .eyebrow, :root[data-skin="moriyama"] .eyebrow{ font-family:var(--mono); color:#fff; background:#000; border:1px solid #fff; display:inline-block; padding:4px 7px; letter-spacing:.16em; text-transform:uppercase; } :root[data-skin="moriyama"] .hero h1{ font-family:var(--mono); font-weight:900; text-transform:uppercase; letter-spacing:-.08em; line-height:.78; color:#fff; text-shadow:3px 0 0 #000, -2px 0 0 #777; } :root[data-skin="moriyama"] .hero .lead{ max-width:42ch; color:var(--ink-soft); font-family:var(--mono); font-size:clamp(15px,1.35vw,19px); line-height:1.35; } :root[data-skin="moriyama"] .hero-cta{ gap:6px; } :root[data-skin="moriyama"] .hero-art{ background:#000; padding:4px; border:2px solid #fff; box-shadow:12px 12px 0 rgba(255,255,255,.12); } :root[data-skin="moriyama"] .section{ padding-block:clamp(44px,7vw,96px); background:#090909; } :root[data-skin="moriyama"] .section--alt{ background:#000; border-block:3px solid #fff; } :root[data-skin="moriyama"] .section--showcase{ background:#090909; } :root[data-skin="moriyama"] .section-head{ max-width:none; padding-bottom:10px; margin-bottom:clamp(16px,2vw,28px); border-bottom:3px solid #fff; } :root[data-skin="moriyama"] .section-head h2{ font-family:var(--mono); font-weight:900; text-transform:uppercase; letter-spacing:-.06em; line-height:.82; color:#fff; } :root[data-skin="moriyama"] .btn{ border-radius:0; border:2px solid #fff; font-family:var(--mono); font-weight:900; text-transform:uppercase; letter-spacing:.08em; box-shadow:5px 5px 0 rgba(255,255,255,.18); } :root[data-skin="moriyama"] .btn-primary{ background:#fff; color:#000; } :root[data-skin="moriyama"] .btn-ghost{ background:#000; color:#fff; } :root[data-skin="moriyama"] input, :root[data-skin="moriyama"] select, :root[data-skin="moriyama"] textarea{ border-radius:0; border:2px solid #fff; background:#000; color:#fff; font-family:var(--mono); box-shadow:none; } :root[data-skin="moriyama"] .card-media, :root[data-skin="moriyama"] .about-portrait{ background:#000; padding:4px; border:2px solid #fff; border-radius:0; box-shadow:8px 8px 0 rgba(255,255,255,.10); } :root[data-skin="moriyama"] .site-footer{ background:#000; color:#fff; border-top:4px solid #fff; } :root[data-skin="moriyama"] .site-footer h4{ font-family:var(--mono); text-transform:uppercase; letter-spacing:.16em; color:#fff; } :root[data-skin="moriyama"] .site-footer a{ color:#fff; text-decoration-thickness:2px; text-underline-offset:4px; } /* ---- sugimoto (time, horizon, absence: withdrawn chrome and monumental silence). Uses 1 scaffold layer. ---- */ body[data-struct="sugimoto"] .skin-structure-layer:nth-child(1){ background:linear-gradient(180deg, transparent 0 calc(50% - 1px), rgba(36,38,42,.16) calc(50% - 1px) 50%, rgba(246,246,244,.45) 50% calc(50% + 1px), transparent calc(50% + 1px)); opacity:.75; } :root[data-skin="sugimoto"] .site-header{ background:rgba(237,238,236,.82); border-bottom:1px solid rgba(36,38,42,.12); box-shadow:none; } :root[data-skin="sugimoto"] .nav{ min-height:92px; justify-content:center; } :root[data-skin="sugimoto"] .brand{ font-family:var(--serif); font-weight:400; letter-spacing:.08em; color:var(--ink-soft); } :root[data-skin="sugimoto"] .nav-links{ gap:clamp(30px,5vw,82px); } :root[data-skin="sugimoto"] .nav-links a{ position:relative; color:var(--ink-faint); font-size:12px; letter-spacing:.28em; text-transform:uppercase; padding-block:12px; } :root[data-skin="sugimoto"] .nav-links a::after{ height:1px; background:var(--ink-faint); } :root[data-skin="sugimoto"] .nav-right{ opacity:.72; } :root[data-skin="sugimoto"] .cart-btn{ border:1px solid var(--line); background:transparent; color:var(--ink-soft); box-shadow:none; } :root[data-skin="sugimoto"] .hero{ padding-block:clamp(110px,18vw,280px) clamp(95px,15vw,230px); background:linear-gradient(180deg, transparent 0 49.8%, var(--line) 49.8% 50%, transparent 50% 100%); } :root[data-skin="sugimoto"] .hero-grid{ grid-template-columns:1fr; max-width:980px; text-align:center; gap:clamp(66px,10vw,140px); justify-items:center; } :root[data-skin="sugimoto"] .hero .eyebrow, :root[data-skin="sugimoto"] .eyebrow{ font-family:var(--mono); color:var(--ink-faint); letter-spacing:.34em; text-transform:uppercase; font-size:10px; } :root[data-skin="sugimoto"] .hero h1{ max-width:14ch; font-family:var(--serif); font-weight:400; line-height:1.04; letter-spacing:-.025em; color:var(--ink); } :root[data-skin="sugimoto"] .hero .lead{ max-width:58ch; color:var(--ink-soft); margin-inline:auto; font-size:clamp(17px,1.35vw,20px); line-height:1.9; } :root[data-skin="sugimoto"] .hero-cta{ justify-content:center; gap:22px; margin-top:clamp(34px,6vw,88px); } :root[data-skin="sugimoto"] .hero-art{ max-width:1040px; padding:0; background:transparent; box-shadow:0 42px 80px -64px rgba(36,38,42,.58); } :root[data-skin="sugimoto"] .section{ padding-block:clamp(120px,18vw,270px); background:transparent; } :root[data-skin="sugimoto"] .section--alt{ background:rgba(246,246,244,.42); border-block:1px solid var(--line); } :root[data-skin="sugimoto"] .section--showcase{ background:var(--bg); } :root[data-skin="sugimoto"] .section-head{ margin-inline:auto; max-width:760px; text-align:center; margin-bottom:clamp(72px,12vw,170px); } :root[data-skin="sugimoto"] .section-head h2{ font-family:var(--serif); font-weight:400; letter-spacing:-.015em; line-height:1.08; color:var(--ink-soft); } :root[data-skin="sugimoto"] .btn{ border-radius:0; border:1px solid var(--line-strong); background:transparent; color:var(--ink-soft); box-shadow:none; letter-spacing:.18em; text-transform:uppercase; font-size:11px; } :root[data-skin="sugimoto"] .btn-primary{ background:var(--ink); color:var(--bg); border-color:var(--ink); } :root[data-skin="sugimoto"] .btn-ghost{ background:transparent; } :root[data-skin="sugimoto"] input, :root[data-skin="sugimoto"] select, :root[data-skin="sugimoto"] textarea{ border-radius:0; border:0; border-bottom:1px solid var(--line-strong); background:transparent; box-shadow:none; color:var(--ink); } :root[data-skin="sugimoto"] .card-media, :root[data-skin="sugimoto"] .about-portrait{ background:transparent; padding:0; border:0; box-shadow:0 38px 82px -62px rgba(36,38,42,.48); } :root[data-skin="sugimoto"] .site-footer{ background:transparent; color:var(--ink-faint); border-top:1px solid var(--line); padding-block:clamp(70px,10vw,130px); } :root[data-skin="sugimoto"] .site-footer h4{ font-family:var(--mono); font-size:10px; font-weight:400; letter-spacing:.32em; text-transform:uppercase; color:var(--ink-faint); } :root[data-skin="sugimoto"] .site-footer a{ color:var(--ink-soft); text-decoration-color:var(--line-strong); text-underline-offset:7px; } /* ---- eggleston (democratic colour: equal status, domestic warmth, ordinary red accents). Uses 2 scaffold layers. ---- */ body[data-struct="eggleston"] .skin-structure-layer:nth-child(1){ top:9vh; left:-8vw; width:38vw; height:48vh; background:#C1272D; opacity:.10; border-radius:44% 56% 48% 52%; } body[data-struct="eggleston"] .skin-structure-layer:nth-child(2){ right:-10vw; bottom:4vh; width:48vw; height:42vh; background:linear-gradient(135deg, rgba(193,39,45,.16), rgba(239,234,224,.12)); border-radius:52% 48% 44% 56%; } :root[data-skin="eggleston"] .site-header{ background:var(--surface); border-bottom:1px solid var(--line); box-shadow:0 14px 30px -30px rgba(28,26,21,.45); } :root[data-skin="eggleston"] .nav{ min-height:72px; } :root[data-skin="eggleston"] .brand{ font-family:var(--sans); font-weight:700; color:var(--ink); letter-spacing:-.02em; } :root[data-skin="eggleston"] .nav-links{ gap:clamp(16px,2.6vw,38px); } :root[data-skin="eggleston"] .nav-links a{ position:relative; color:var(--ink-soft); font-weight:600; padding:9px 0; } :root[data-skin="eggleston"] .nav-links a::after{ height:3px; background:var(--accent); } :root[data-skin="eggleston"] .cart-btn{ background:var(--surface); border:1px solid var(--line-strong); color:var(--ink); box-shadow:0 10px 24px -20px rgba(28,26,21,.6); } :root[data-skin="eggleston"] .hero{ padding-block:clamp(72px,10vw,150px); background:linear-gradient(90deg, rgba(193,39,45,.10) 0 22%, transparent 22% 100%); } :root[data-skin="eggleston"] .hero-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(34px,6vw,96px); align-items:center; } :root[data-skin="eggleston"] .hero .eyebrow, :root[data-skin="eggleston"] .eyebrow{ font-family:var(--sans); color:var(--accent); font-weight:700; letter-spacing:.14em; text-transform:uppercase; } :root[data-skin="eggleston"] .hero h1{ font-family:var(--sans); font-weight:700; letter-spacing:-.045em; line-height:.98; color:var(--ink); } :root[data-skin="eggleston"] .hero .lead{ max-width:52ch; color:var(--ink-soft); font-size:clamp(18px,1.45vw,22px); line-height:1.62; } :root[data-skin="eggleston"] .hero-cta{ gap:14px; } :root[data-skin="eggleston"] .hero-art{ background:var(--surface); padding:clamp(10px,1.4vw,18px); box-shadow:0 24px 54px -38px rgba(28,26,21,.52); } :root[data-skin="eggleston"] .section{ padding-block:clamp(76px,10vw,140px); } :root[data-skin="eggleston"] .section--alt{ background:var(--surface-2); border-block:1px solid var(--line); } :root[data-skin="eggleston"] .section--showcase{ background:var(--bg); } :root[data-skin="eggleston"] .section-head{ max-width:880px; display:flex; align-items:end; justify-content:space-between; gap:clamp(20px,4vw,54px); padding-bottom:18px; border-bottom:1px solid var(--line); } :root[data-skin="eggleston"] .section-head h2{ font-family:var(--sans); font-weight:700; letter-spacing:-.035em; line-height:1; color:var(--ink); } :root[data-skin="eggleston"] .btn{ border-radius:2px; border:1px solid var(--line-strong); box-shadow:none; font-family:var(--sans); font-weight:700; } :root[data-skin="eggleston"] .btn-primary{ background:var(--accent); color:#fff; border-color:var(--accent); } :root[data-skin="eggleston"] .btn-ghost{ background:var(--surface); color:var(--ink); } :root[data-skin="eggleston"] input, :root[data-skin="eggleston"] select, :root[data-skin="eggleston"] textarea{ border-radius:2px; background:var(--surface); border:1px solid var(--line-strong); box-shadow:inset 0 1px 0 rgba(255,255,255,.7); } :root[data-skin="eggleston"] .card-media, :root[data-skin="eggleston"] .about-portrait{ background:var(--surface); padding:clamp(8px,1vw,14px); border:1px solid var(--line); border-radius:2px; box-shadow:0 16px 36px -28px rgba(28,26,21,.55); } :root[data-skin="eggleston"] .site-footer{ background:var(--surface); border-top:6px solid var(--accent); color:var(--ink-soft); } :root[data-skin="eggleston"] .site-footer h4{ font-family:var(--sans); font-weight:700; color:var(--ink); } :root[data-skin="eggleston"] .site-footer a{ color:var(--ink); text-decoration-color:var(--accent); text-underline-offset:5px; } /* ---- leiter (muted urban weather: intimate paper objects seen through veil and reflection). Uses 2 scaffold layers. ---- */ body[data-struct="leiter"] .skin-structure-layer:nth-child(1){ background:radial-gradient(circle at 18% 24%, rgba(255,255,255,.34), transparent 22%), radial-gradient(circle at 88% 14%, rgba(158,90,76,.16), transparent 24%), radial-gradient(circle at 62% 86%, rgba(58,53,45,.13), transparent 30%); filter:blur(18px); opacity:.72; } body[data-struct="leiter"] .skin-structure-layer:nth-child(2){ background:linear-gradient(115deg, transparent 0 38%, rgba(255,255,255,.24) 39% 40%, transparent 42% 100%); opacity:.58; } :root[data-skin="leiter"] .site-header{ background:rgba(242,239,232,.86); border-bottom:1px solid rgba(58,53,45,.12); box-shadow:0 16px 36px -34px rgba(58,53,45,.58); backdrop-filter:blur(10px); } :root[data-skin="leiter"] .nav{ min-height:76px; } :root[data-skin="leiter"] .brand{ font-family:var(--serif); font-style:italic; font-weight:400; color:var(--ink); } :root[data-skin="leiter"] .nav-links{ gap:clamp(18px,3vw,46px); } :root[data-skin="leiter"] .nav-links a{ position:relative; color:var(--ink-soft); font-family:var(--serif); font-style:italic; font-size:16px; padding:8px 0; } :root[data-skin="leiter"] .nav-links a::after{ height:1px; background:var(--accent); opacity:.65; } :root[data-skin="leiter"] .cart-btn{ background:rgba(242,239,232,.68); border:1px solid var(--line); color:var(--ink-soft); box-shadow:0 14px 28px -24px rgba(58,53,45,.7); } :root[data-skin="leiter"] .hero{ padding-block:clamp(86px,12vw,178px); background:linear-gradient(135deg, rgba(255,255,255,.32), transparent 36%), linear-gradient(180deg, transparent, rgba(218,213,203,.42)); } :root[data-skin="leiter"] .hero-grid{ grid-template-columns:minmax(230px,.82fr) minmax(260px,1.18fr); gap:clamp(36px,7vw,106px); align-items:center; } :root[data-skin="leiter"] .hero .eyebrow, :root[data-skin="leiter"] .eyebrow{ font-family:var(--mono); color:var(--accent); letter-spacing:.18em; text-transform:uppercase; font-size:10px; } :root[data-skin="leiter"] .hero h1{ font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:-.035em; line-height:1.02; color:var(--ink); } :root[data-skin="leiter"] .hero .lead{ max-width:45ch; color:var(--ink-soft); font-size:clamp(18px,1.55vw,23px); line-height:1.74; } :root[data-skin="leiter"] .hero-art{ background:var(--surface); padding:clamp(10px,1.5vw,18px); box-shadow:0 30px 70px -46px rgba(58,53,45,.72); } :root[data-skin="leiter"] .section{ padding-block:clamp(82px,11vw,158px); } :root[data-skin="leiter"] .section--alt{ background:rgba(242,239,232,.54); border-block:1px solid rgba(58,53,45,.10); } :root[data-skin="leiter"] .section--showcase{ background:var(--bg); } :root[data-skin="leiter"] .section-head{ max-width:780px; margin-bottom:clamp(42px,7vw,98px); } :root[data-skin="leiter"] .section-head h2{ font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:-.025em; line-height:1.06; color:var(--ink); } :root[data-skin="leiter"] .btn{ border-radius:999px; border:1px solid var(--line-strong); background:rgba(242,239,232,.74); color:var(--ink); box-shadow:0 12px 28px -24px rgba(58,53,45,.7); font-family:var(--serif); font-style:italic; } :root[data-skin="leiter"] .btn-primary{ background:var(--accent); color:#fff; border-color:var(--accent); } :root[data-skin="leiter"] .btn-ghost{ background:rgba(242,239,232,.58); } :root[data-skin="leiter"] input, :root[data-skin="leiter"] select, :root[data-skin="leiter"] textarea{ border-radius:18px; background:rgba(242,239,232,.76); border:1px solid var(--line); box-shadow:inset 0 1px 6px rgba(58,53,45,.06); color:var(--ink); } :root[data-skin="leiter"] .card-media, :root[data-skin="leiter"] .about-portrait{ background:var(--surface); padding:clamp(10px,1.3vw,16px); border-radius:2px; box-shadow:0 22px 56px -38px rgba(58,53,45,.68); } :root[data-skin="leiter"] .site-footer{ background:rgba(58,53,45,.92); color:var(--surface); border-top:0; } :root[data-skin="leiter"] .site-footer h4{ font-family:var(--serif); font-style:italic; font-weight:400; color:var(--surface); } :root[data-skin="leiter"] .site-footer a{ color:var(--surface-2); text-decoration-color:rgba(242,239,232,.42); text-underline-offset:6px; } /* ---- cyanotype (Atkins blueprint process: sensitised Prussian paper, specimen order, exposed white trace). Uses 2 scaffold layers. ---- */ body[data-struct="cyanotype"] #skin-structure{ background:#0E2C4E; } body[data-struct="cyanotype"] .skin-structure-layer:nth-child(1){ background-image:repeating-linear-gradient(0deg, rgba(228,238,246,.055) 0 1px, transparent 1px 38px), repeating-linear-gradient(90deg, rgba(228,238,246,.045) 0 1px, transparent 1px 38px); } body[data-struct="cyanotype"] .skin-structure-layer:nth-child(2){ background:radial-gradient(ellipse at 18% 22%, rgba(228,238,246,.18) 0 5%, transparent 9%), radial-gradient(ellipse at 82% 68%, rgba(228,238,246,.13) 0 4%, transparent 8%), linear-gradient(145deg, transparent 0 58%, rgba(228,238,246,.06) 58% 59%, transparent 60%); opacity:.9; } :root[data-skin="cyanotype"] .site-header{ background:var(--surface); border-bottom:1px solid var(--line-strong); box-shadow:0 18px 36px -32px rgba(0,0,0,.8); } :root[data-skin="cyanotype"] .nav{ min-height:78px; } :root[data-skin="cyanotype"] .brand{ font-family:var(--serif); font-style:italic; font-weight:400; color:var(--ink); } :root[data-skin="cyanotype"] .nav-links{ gap:clamp(18px,2.8vw,42px); } :root[data-skin="cyanotype"] .nav-links a{ position:relative; color:var(--ink-soft); font-family:var(--serif); letter-spacing:.03em; padding:8px 0; } :root[data-skin="cyanotype"] .nav-links a::after{ height:1px; background:var(--ink); } :root[data-skin="cyanotype"] .cart-btn{ background:var(--surface-2); border:1px solid var(--line-strong); color:var(--ink); box-shadow:inset 0 0 0 1px rgba(228,238,246,.08); } :root[data-skin="cyanotype"] .hero{ padding-block:clamp(74px,11vw,164px); background:linear-gradient(180deg, rgba(18,52,87,.72), rgba(14,44,78,.22)); } :root[data-skin="cyanotype"] .hero-grid{ grid-template-columns:minmax(250px,.9fr) minmax(270px,1.1fr); gap:clamp(34px,6vw,92px); align-items:center; } :root[data-skin="cyanotype"] .hero .eyebrow, :root[data-skin="cyanotype"] .eyebrow{ font-family:var(--serif); font-style:italic; color:var(--ink-soft); letter-spacing:.08em; } :root[data-skin="cyanotype"] .hero h1{ font-family:var(--serif); font-style:italic; font-weight:400; color:var(--ink); line-height:1.02; letter-spacing:-.025em; } :root[data-skin="cyanotype"] .hero .lead{ max-width:50ch; color:var(--ink-soft); font-size:clamp(18px,1.45vw,22px); line-height:1.72; } :root[data-skin="cyanotype"] .hero-art{ background:var(--surface-2); padding:clamp(12px,1.8vw,22px); border:1px solid var(--line-strong); box-shadow:0 30px 64px -44px rgba(0,0,0,.85), inset 0 0 0 1px rgba(228,238,246,.10); } :root[data-skin="cyanotype"] .section{ padding-block:clamp(78px,10vw,150px); } :root[data-skin="cyanotype"] .section--alt{ background:rgba(18,52,87,.78); border-block:1px solid var(--line); } :root[data-skin="cyanotype"] .section--showcase{ background:var(--bg); } :root[data-skin="cyanotype"] .section-head{ max-width:920px; padding:clamp(16px,2.2vw,28px); border:1px solid var(--line); background:rgba(11,37,64,.52); box-shadow:inset 0 0 0 1px rgba(228,238,246,.06); } :root[data-skin="cyanotype"] .section-head h2{ font-family:var(--serif); font-style:italic; font-weight:400; color:var(--ink); line-height:1.08; } :root[data-skin="cyanotype"] .btn{ border-radius:0; border:1px solid var(--line-strong); font-family:var(--serif); font-style:italic; box-shadow:inset 0 0 0 1px rgba(228,238,246,.08); } :root[data-skin="cyanotype"] .btn-primary{ background:var(--ink); color:var(--bg); border-color:var(--ink); } :root[data-skin="cyanotype"] .btn-ghost{ background:var(--surface-2); color:var(--ink); } :root[data-skin="cyanotype"] input, :root[data-skin="cyanotype"] select, :root[data-skin="cyanotype"] textarea{ border-radius:0; background:var(--surface-2); border:1px solid var(--line-strong); color:var(--ink); box-shadow:inset 0 0 0 1px rgba(228,238,246,.06); } :root[data-skin="cyanotype"] .card-media, :root[data-skin="cyanotype"] .about-portrait{ background:var(--surface-2); padding:clamp(12px,1.5vw,18px); border:1px solid var(--line-strong); border-radius:0; box-shadow:0 20px 44px -30px rgba(0,0,0,.75); } :root[data-skin="cyanotype"] .site-footer{ background:var(--surface-2); color:var(--ink-soft); border-top:1px solid var(--line-strong); box-shadow:inset 0 1px 0 rgba(228,238,246,.10); } :root[data-skin="cyanotype"] .site-footer h4{ font-family:var(--serif); font-style:italic; font-weight:400; color:var(--ink); } :root[data-skin="cyanotype"] .site-footer a{ color:var(--ink); text-decoration-color:var(--ink-faint); text-underline-offset:6px; } @media (max-width: 820px){ :root[data-skin="tillmans"] .hero-grid, :root[data-skin="moriyama"] .hero-grid, :root[data-skin="eggleston"] .hero-grid, :root[data-skin="leiter"] .hero-grid, :root[data-skin="cyanotype"] .hero-grid{ grid-template-columns:1fr; } :root[data-skin="tillmans"] .section-head{ display:block; } :root[data-skin="tillmans"] .nav-links li:nth-child(even) a{ margin-top:0; } :root[data-skin="sugimoto"] .nav{ min-height:76px; } } /* ===== p11-british-ny.css ===== */ /* ---- brody (post-punk editorial anti-grid: type pressure breaks the magazine spread) — uses 2 scaffold layers. ---- */ body[data-struct="brody"] .skin-structure-layer:nth-child(1){ background:linear-gradient(90deg, transparent 0 8vw, rgba(22,19,15,.08) 8vw calc(8vw + 12px), transparent calc(8vw + 12px) 100%), linear-gradient(180deg, transparent 0 28vh, rgba(216,56,42,.13) 28vh calc(28vh + 18px), transparent calc(28vh + 18px) 100%); } body[data-struct="brody"] .skin-structure-layer:nth-child(2){ top:14vh; left:-8vw; width:56vw; height:18vh; background:#16130F; opacity:.055; transform:skewY(-7deg); } :root[data-skin="brody"] .site-header{ position:sticky; background:color-mix(in srgb, var(--bg) 92%, transparent); border-bottom:10px solid var(--ink); box-shadow:0 8px 0 var(--accent); } :root[data-skin="brody"] .nav{ height:76px; align-items:flex-end; padding-bottom:12px; } :root[data-skin="brody"] .brand{ font-family:var(--sans); font-weight:900; font-size:clamp(26px,3vw,42px); line-height:.78; letter-spacing:-.08em; text-transform:uppercase; } :root[data-skin="brody"] .brand span{ color:var(--accent); } :root[data-skin="brody"] .nav-links{ align-items:flex-end; gap:clamp(12px,2.8vw,38px); } :root[data-skin="brody"] .nav-links a{ color:var(--ink); font-weight:900; text-transform:uppercase; letter-spacing:-.02em; font-size:13px; padding:6px 3px 2px; } :root[data-skin="brody"] .nav-links a::after{ height:7px; bottom:-10px; background:var(--accent); } :root[data-skin="brody"] .nav-right{ align-items:flex-end; } :root[data-skin="brody"] .cart-btn{ background:var(--ink); color:var(--bg); border:0; padding:9px 12px; text-transform:uppercase; font-weight:900; letter-spacing:.03em; } :root[data-skin="brody"] .hero{ padding:clamp(58px,10vw,126px) 0 clamp(36px,6vw,68px); } :root[data-skin="brody"] .hero-grid{ grid-template-columns:1.45fr .82fr; align-items:end; gap:clamp(18px,4vw,58px); } :root[data-skin="brody"] .hero .eyebrow, :root[data-skin="brody"] .eyebrow{ display:inline-block; background:var(--accent); color:var(--bg); padding:4px 8px; font-weight:900; letter-spacing:.18em; } :root[data-skin="brody"] .hero h1{ font-family:var(--sans); font-size:clamp(54px,12vw,142px); font-weight:950; line-height:.74; letter-spacing:-.095em; text-transform:uppercase; max-width:8.5ch; margin:18px 0 24px; } :root[data-skin="brody"] .hero .lead{ max-width:34ch; margin-left:clamp(0px,13vw,170px); color:var(--ink); font-weight:700; border-left:12px solid var(--ink); padding-left:16px; } :root[data-skin="brody"] .hero-cta{ margin-left:clamp(0px,13vw,170px); } :root[data-skin="brody"] .hero-art, :root[data-skin="brody"] .card-media, :root[data-skin="brody"] .about-portrait{ aspect-ratio:auto; overflow:visible; background:var(--surface); border:0; border-top:14px solid var(--ink); border-bottom:4px solid var(--accent); padding:10px 0 0; border-radius:0; box-shadow:18px 18px 0 color-mix(in srgb, var(--ink) 9%, transparent); } :root[data-skin="brody"] .hero-art img, :root[data-skin="brody"] .card-media img, :root[data-skin="brody"] .about-portrait img{ width:100%; height:auto; object-fit:contain; } :root[data-skin="brody"] .section{ padding:clamp(48px,8vw,104px) 0; } :root[data-skin="brody"] .section--alt, :root[data-skin="brody"] .section--showcase{ background:linear-gradient(90deg, var(--surface) 0 68%, color-mix(in srgb, var(--accent) 12%, var(--surface)) 68% 100%); border-block:8px solid var(--ink); } :root[data-skin="brody"] .section-head{ align-items:flex-start; border-top:12px solid var(--ink); padding-top:14px; } :root[data-skin="brody"] .section-head h2{ font-family:var(--sans); font-weight:950; text-transform:uppercase; line-height:.82; letter-spacing:-.075em; max-width:10ch; } :root[data-skin="brody"] .btn, :root[data-skin="brody"] .btn-primary, :root[data-skin="brody"] .btn--accent{ border-radius:0; border:3px solid var(--ink); background:var(--ink); color:var(--bg); box-shadow:6px 6px 0 var(--accent); text-transform:uppercase; font-weight:900; } :root[data-skin="brody"] .btn-ghost, :root[data-skin="brody"] .btn--ghost{ background:var(--bg); color:var(--ink); box-shadow:6px 6px 0 var(--ink); } :root[data-skin="brody"] main input, :root[data-skin="brody"] main select, :root[data-skin="brody"] main textarea, :root[data-skin="brody"] .site-footer input{ border-radius:0; border:3px solid var(--ink); background:var(--surface); box-shadow:5px 5px 0 var(--accent); } :root[data-skin="brody"] .site-footer{ background:var(--ink); color:var(--bg); border-top:12px solid var(--accent); } :root[data-skin="brody"] .site-footer a{ color:var(--bg); text-decoration-thickness:3px; } :root[data-skin="brody"] .site-footer h4{ color:var(--accent); font-weight:900; letter-spacing:.24em; } /* ---- reid (punk collage: official order defaced by pasted paper, tape and xerox edges) — uses 2 scaffold layers. ---- */ body[data-struct="reid"] .skin-structure-layer:nth-child(1){ background:repeating-linear-gradient(-3deg, rgba(17,17,17,.045) 0 1px, transparent 1px 17px), repeating-linear-gradient(87deg, rgba(255,255,255,.18) 0 2px, transparent 2px 31px); } body[data-struct="reid"] .skin-structure-layer:nth-child(2){ top:18vh; left:-6vw; width:112vw; height:26px; background:linear-gradient(90deg, #FF2D95 0 30%, #FFE500 30% 56%, #111 56% 58%, transparent 58%); opacity:.32; transform:rotate(-3deg); } :root[data-skin="reid"] .site-header{ background:#EFE9D9; border-bottom:3px solid #111; box-shadow:6px 6px 0 #111; transform:rotate(-.25deg); transform-origin:top left; } :root[data-skin="reid"] .nav{ min-height:72px; height:auto; padding-block:10px; } :root[data-skin="reid"] .brand{ display:inline-block; font-family:var(--sans); font-weight:950; text-transform:uppercase; letter-spacing:-.04em; background:#111; color:#EFE9D9; padding:4px 10px; box-shadow:4px 4px 0 var(--accent); transform:rotate(-1.2deg); } :root[data-skin="reid"] .brand span{ color:#FFE500; } :root[data-skin="reid"] .nav-links{ gap:12px; flex-wrap:wrap; } :root[data-skin="reid"] .nav-links a{ display:inline-block; color:#111; background:#FFE500; border:2px solid #111; box-shadow:3px 3px 0 #111; padding:5px 9px; font-weight:900; text-transform:uppercase; letter-spacing:.02em; } :root[data-skin="reid"] .nav-links li:nth-child(2n) a{ background:var(--accent); transform:rotate(1.4deg); } :root[data-skin="reid"] .nav-links a::after{ display:none; } :root[data-skin="reid"] .nav-right{ gap:10px; } :root[data-skin="reid"] .cart-btn{ background:#EFE9D9; border:2px solid #111; box-shadow:3px 3px 0 #111; color:#111; font-weight:900; text-transform:uppercase; transform:rotate(-1deg); } :root[data-skin="reid"] .hero{ padding:clamp(54px,9vw,112px) 0 clamp(44px,7vw,86px); } :root[data-skin="reid"] .hero-grid{ grid-template-columns:.95fr 1.05fr; gap:clamp(26px,5vw,70px); align-items:center; } :root[data-skin="reid"] .hero .eyebrow, :root[data-skin="reid"] .eyebrow{ display:inline-block; background:#FFE500; color:#111; border:2px solid #111; padding:2px 7px; transform:rotate(-1deg); font-weight:900; } :root[data-skin="reid"] .hero h1{ font-family:var(--sans); font-weight:950; text-transform:uppercase; line-height:.88; letter-spacing:-.05em; background:linear-gradient(#EFE9D9 0 58%, var(--accent) 58% 84%, #EFE9D9 84%); padding:8px; border:3px solid #111; box-shadow:7px 7px 0 #111; transform:rotate(-1deg); } :root[data-skin="reid"] .hero .lead{ color:#111; background:#EFE9D9; border:2px solid #111; box-shadow:5px 5px 0 #111; padding:14px; transform:rotate(.7deg); } :root[data-skin="reid"] .hero-cta{ gap:12px; transform:rotate(-.4deg); } :root[data-skin="reid"] .hero-art, :root[data-skin="reid"] .card-media, :root[data-skin="reid"] .about-portrait{ aspect-ratio:auto; overflow:visible; background:#EFE9D9; border:3px solid #111; padding:10px; border-radius:0; box-shadow:7px 7px 0 #111; } :root[data-skin="reid"] .hero-art{ transform:rotate(1.7deg); } :root[data-skin="reid"] .hero-art img, :root[data-skin="reid"] .card-media img, :root[data-skin="reid"] .about-portrait img{ width:100%; height:auto; object-fit:contain; filter:grayscale(1) contrast(1.16); } :root[data-skin="reid"] .section{ padding:clamp(46px,8vw,96px) 0; } :root[data-skin="reid"] .section--alt, :root[data-skin="reid"] .section--showcase{ background:#EFE9D9; border-block:3px solid #111; box-shadow:0 8px 0 var(--accent); } :root[data-skin="reid"] .section-head{ align-items:center; background:color-mix(in srgb, #FFE500 45%, transparent); border:2px solid #111; padding:12px; box-shadow:5px 5px 0 #111; transform:rotate(.35deg); } :root[data-skin="reid"] .section-head h2{ display:inline; font-family:var(--sans); font-weight:950; text-transform:uppercase; letter-spacing:-.04em; line-height:.9; background:var(--accent); color:#111; padding:0 8px; box-decoration-break:clone; -webkit-box-decoration-break:clone; } :root[data-skin="reid"] .btn, :root[data-skin="reid"] .btn-primary, :root[data-skin="reid"] .btn--accent, :root[data-skin="reid"] .btn-ghost, :root[data-skin="reid"] .btn--ghost{ border-radius:0; border:2px solid #111; background:var(--accent); color:#111; box-shadow:4px 4px 0 #111; text-transform:uppercase; font-weight:900; } :root[data-skin="reid"] .btn-ghost, :root[data-skin="reid"] .btn--ghost{ background:#FFE500; } :root[data-skin="reid"] main input, :root[data-skin="reid"] main select, :root[data-skin="reid"] main textarea, :root[data-skin="reid"] .site-footer input{ border-radius:0; border:2px solid #111; background:#EFE9D9; box-shadow:3px 3px 0 #111; } :root[data-skin="reid"] .site-footer{ background:#111; color:#EFE9D9; border-top:8px solid var(--accent); box-shadow:0 -8px 0 #FFE500; } :root[data-skin="reid"] .site-footer a{ color:#FFE500; } :root[data-skin="reid"] .site-footer h4{ display:inline-block; background:var(--accent); color:#111; padding:2px 6px; } /* ---- tdr (pseudo-corporate digital overload: dense panels, warnings and mono data) — uses 2 scaffold layers. ---- */ body[data-struct="tdr"] .skin-structure-layer:nth-child(1){ background-image:repeating-linear-gradient(0deg, rgba(14,14,18,.06) 0 1px, transparent 1px 12px), repeating-linear-gradient(90deg, rgba(14,14,18,.06) 0 1px, transparent 1px 12px); } body[data-struct="tdr"] .skin-structure-layer:nth-child(2){ background:linear-gradient(135deg, transparent 0 16%, rgba(255,0,152,.16) 16% 18%, transparent 18% 62%, rgba(255,229,0,.22) 62% 64%, transparent 64%), repeating-linear-gradient(45deg, transparent 0 18px, rgba(14,14,18,.1) 18px 20px, transparent 20px 38px); } :root[data-skin="tdr"] .site-header{ background:#fff; border-bottom:4px solid #0E0E12; box-shadow:0 8px 0 var(--accent); } :root[data-skin="tdr"] .nav{ height:60px; } :root[data-skin="tdr"] .brand{ font-family:var(--mono); font-size:18px; font-weight:900; text-transform:uppercase; letter-spacing:-.04em; background:#0E0E12; color:#fff; padding:8px 10px; } :root[data-skin="tdr"] .brand span{ color:var(--accent); } :root[data-skin="tdr"] .nav-links{ gap:6px; } :root[data-skin="tdr"] .nav-links a{ font-family:var(--mono); font-size:11px; color:#0E0E12; border:2px solid #0E0E12; background:#fff; padding:6px 8px; text-transform:uppercase; letter-spacing:.09em; font-weight:800; } :root[data-skin="tdr"] .nav-links a::after{ left:-2px; right:-2px; width:auto; height:4px; bottom:-6px; background:repeating-linear-gradient(45deg,#0E0E12 0 6px,#FFE500 6px 12px); opacity:0; } :root[data-skin="tdr"] .nav-links a:hover::after, :root[data-skin="tdr"] .nav-links a[aria-current="page"]::after{ opacity:1; } :root[data-skin="tdr"] .cart-btn{ font-family:var(--mono); border:2px solid #0E0E12; background:#FFE500; color:#0E0E12; padding:6px 9px; text-transform:uppercase; } :root[data-skin="tdr"] .hero{ padding:clamp(42px,7vw,86px) 0; } :root[data-skin="tdr"] .hero-grid{ grid-template-columns:1.12fr .88fr; gap:12px; align-items:stretch; } :root[data-skin="tdr"] .hero .eyebrow, :root[data-skin="tdr"] .eyebrow{ font-family:var(--mono); background:#0E0E12; color:var(--accent); border-top:5px solid #FFE500; padding:5px 7px; letter-spacing:.16em; } :root[data-skin="tdr"] .hero h1{ font-family:var(--mono); font-size:clamp(38px,8.5vw,100px); font-weight:900; line-height:.84; letter-spacing:-.08em; text-transform:uppercase; border:3px solid #0E0E12; background:#fff; padding:10px; box-shadow:8px 8px 0 var(--accent); } :root[data-skin="tdr"] .hero .lead{ max-width:none; font-family:var(--mono); font-size:13px; color:#0E0E12; background:#fff; border:2px solid #0E0E12; border-left:18px solid var(--accent); padding:12px; } :root[data-skin="tdr"] .hero-cta{ gap:8px; } :root[data-skin="tdr"] .hero-art, :root[data-skin="tdr"] .card-media, :root[data-skin="tdr"] .about-portrait{ aspect-ratio:auto; overflow:visible; border:2px solid #0E0E12; border-top:10px solid #0E0E12; background:#fff; padding:6px; border-radius:0; box-shadow:5px 5px 0 #FFE500; } :root[data-skin="tdr"] .hero-art img, :root[data-skin="tdr"] .card-media img, :root[data-skin="tdr"] .about-portrait img{ width:100%; height:auto; object-fit:contain; filter:saturate(1.15) contrast(1.08); } :root[data-skin="tdr"] .section{ padding:clamp(34px,6vw,76px) 0; } :root[data-skin="tdr"] .section--alt, :root[data-skin="tdr"] .section--showcase{ background:#fff; border-block:4px solid #0E0E12; background-image:repeating-linear-gradient(45deg, transparent 0 12px, rgba(255,0,152,.08) 12px 14px); } :root[data-skin="tdr"] .section-head{ align-items:stretch; border:3px solid #0E0E12; background:#fff; padding:8px; gap:8px; } :root[data-skin="tdr"] .section-head h2{ font-family:var(--mono); font-weight:900; text-transform:uppercase; letter-spacing:-.06em; line-height:.86; color:#0E0E12; } :root[data-skin="tdr"] .btn, :root[data-skin="tdr"] .btn-primary, :root[data-skin="tdr"] .btn--accent{ border-radius:0; border:2px solid #0E0E12; background:var(--accent); color:#fff; font-family:var(--mono); text-transform:uppercase; box-shadow:4px 4px 0 #0E0E12; } :root[data-skin="tdr"] .btn-ghost, :root[data-skin="tdr"] .btn--ghost{ background:#fff; color:#0E0E12; } :root[data-skin="tdr"] main input, :root[data-skin="tdr"] main select, :root[data-skin="tdr"] main textarea, :root[data-skin="tdr"] .site-footer input{ border-radius:0; border:2px solid #0E0E12; background:#fff; font-family:var(--mono); box-shadow:3px 3px 0 var(--accent); } :root[data-skin="tdr"] .site-footer{ background:#0E0E12; color:#fff; border-top:10px solid var(--accent); } :root[data-skin="tdr"] .site-footer a{ color:#FFE500; font-family:var(--mono); } :root[data-skin="tdr"] .site-footer h4{ color:var(--accent); font-family:var(--mono); } /* ---- rand (playful modernist logic: clear grid animated by one memorable mark) — uses 3 scaffold layers. ---- */ body[data-struct="rand"] .skin-structure-layer:nth-child(1){ top:11vh; right:8vw; width:18vw; height:18vw; border-radius:50%; background:#E4231B; opacity:.12; } body[data-struct="rand"] .skin-structure-layer:nth-child(2){ top:48vh; left:4vw; width:24vw; height:14vw; background:#154BA0; opacity:.1; transform:rotate(-8deg); } body[data-struct="rand"] .skin-structure-layer:nth-child(3){ right:14vw; bottom:8vh; width:20vw; height:20vw; background:#F2B417; opacity:.16; clip-path:polygon(50% 0,100% 100%,0 100%); } :root[data-skin="rand"] .site-header{ background:color-mix(in srgb, var(--bg) 94%, transparent); border-bottom:0; box-shadow:inset 0 -8px 0 var(--accent); } :root[data-skin="rand"] .nav{ height:72px; } :root[data-skin="rand"] .brand{ font-family:var(--sans); font-weight:800; letter-spacing:-.04em; } :root[data-skin="rand"] .brand span{ display:inline-block; color:#154BA0; transform:translateY(-2px); } :root[data-skin="rand"] .nav-links{ gap:22px; } :root[data-skin="rand"] .nav-links a{ color:var(--ink); font-weight:700; padding:8px 10px; border-radius:999px; } :root[data-skin="rand"] .nav-links a::after{ height:8px; bottom:0; background:#F2B417; border-radius:999px; z-index:-1; } :root[data-skin="rand"] .cart-btn{ background:#fff; border:2px solid var(--ink); border-left:10px solid var(--accent); padding:8px 10px; font-weight:800; } :root[data-skin="rand"] .hero{ padding:clamp(60px,10vw,118px) 0 clamp(42px,7vw,82px); } :root[data-skin="rand"] .hero-grid{ grid-template-columns:1fr 1fr; gap:clamp(30px,6vw,78px); } :root[data-skin="rand"] .hero .eyebrow, :root[data-skin="rand"] .eyebrow{ color:var(--accent); font-weight:800; letter-spacing:.18em; } :root[data-skin="rand"] .hero h1{ font-family:var(--sans); font-weight:850; letter-spacing:-.065em; line-height:.9; max-width:9ch; position:relative; } :root[data-skin="rand"] .hero h1::after{ content:""; display:block; width:1.2em; height:.22em; margin-top:.12em; background:#154BA0; border-radius:999px; } :root[data-skin="rand"] .hero .lead{ border-left:12px solid #F2B417; padding-left:18px; color:var(--ink-soft); } :root[data-skin="rand"] .hero-art, :root[data-skin="rand"] .card-media, :root[data-skin="rand"] .about-portrait{ aspect-ratio:auto; overflow:visible; background:#fff; border:0; border-left:14px solid var(--accent); padding:10px; border-radius:0 24px 24px 0; box-shadow:0 18px 38px -28px rgba(0,0,0,.38); } :root[data-skin="rand"] .hero-art img, :root[data-skin="rand"] .card-media img, :root[data-skin="rand"] .about-portrait img{ width:100%; height:auto; object-fit:contain; } :root[data-skin="rand"] .section--alt, :root[data-skin="rand"] .section--showcase{ background:linear-gradient(90deg, var(--surface) 0 calc(100% - 18px), var(--accent) calc(100% - 18px) 100%); border-block:0; } :root[data-skin="rand"] .section-head{ border-left:14px solid var(--accent); padding-left:18px; } :root[data-skin="rand"] .section-head h2{ font-family:var(--sans); font-weight:850; letter-spacing:-.045em; } :root[data-skin="rand"] .btn, :root[data-skin="rand"] .btn-primary, :root[data-skin="rand"] .btn--accent{ border-radius:999px; border:2px solid var(--ink); background:var(--accent); color:#fff; font-weight:800; box-shadow:inset -10px 0 0 #154BA0; } :root[data-skin="rand"] .btn-ghost, :root[data-skin="rand"] .btn--ghost{ background:#fff; color:var(--ink); box-shadow:inset -10px 0 0 #F2B417; } :root[data-skin="rand"] main input, :root[data-skin="rand"] main select, :root[data-skin="rand"] main textarea, :root[data-skin="rand"] .site-footer input{ border:2px solid var(--ink); border-left:10px solid var(--accent); border-radius:0 16px 16px 0; background:#fff; } :root[data-skin="rand"] .site-footer{ background:#fff; color:var(--ink); border-top:14px solid var(--accent); box-shadow:inset 0 14px 0 #154BA0; } :root[data-skin="rand"] .site-footer a{ color:var(--ink); text-decoration-color:#F2B417; text-decoration-thickness:3px; } :root[data-skin="rand"] .site-footer h4{ color:#154BA0; font-weight:800; } /* ---- lubalin (expressive typographic ligatures: letters become the architecture) — uses 1 scaffold layer. ---- */ body[data-struct="lubalin"] .skin-structure-layer:nth-child(1){ background:linear-gradient(90deg, transparent 0 9vw, rgba(23,23,23,.08) 9vw calc(9vw + 9px), transparent calc(9vw + 9px)), linear-gradient(180deg, transparent 0 70vh, rgba(23,23,23,.09) 70vh calc(70vh + 16px), transparent calc(70vh + 16px)); } :root[data-skin="lubalin"] .site-header{ background:var(--bg); border-bottom:5px solid var(--ink); } :root[data-skin="lubalin"] .nav{ height:70px; align-items:flex-end; padding-bottom:10px; } :root[data-skin="lubalin"] .brand{ font-family:var(--sans); font-size:clamp(28px,3.4vw,46px); font-weight:950; line-height:.78; letter-spacing:-.1em; text-transform:uppercase; } :root[data-skin="lubalin"] .brand span{ color:var(--ink); } :root[data-skin="lubalin"] .nav-links{ gap:18px; } :root[data-skin="lubalin"] .nav-links a{ color:var(--ink); font-weight:900; text-transform:uppercase; letter-spacing:-.045em; font-size:15px; } :root[data-skin="lubalin"] .nav-links a::after{ height:5px; bottom:-4px; background:var(--ink); } :root[data-skin="lubalin"] .cart-btn{ border-bottom:5px solid var(--ink); padding:5px 2px; font-weight:900; letter-spacing:-.03em; text-transform:uppercase; } :root[data-skin="lubalin"] .hero{ padding:clamp(52px,9vw,112px) 0 clamp(38px,6vw,72px); } :root[data-skin="lubalin"] .hero-grid{ grid-template-columns:1.18fr .82fr; gap:clamp(18px,4vw,50px); align-items:end; } :root[data-skin="lubalin"] .hero .eyebrow, :root[data-skin="lubalin"] .eyebrow{ color:var(--ink); font-weight:900; letter-spacing:-.01em; text-transform:uppercase; border-bottom:4px solid var(--ink); } :root[data-skin="lubalin"] .hero h1{ font-family:var(--sans); font-size:clamp(56px,12vw,148px); font-weight:950; line-height:.72; letter-spacing:-.12em; text-transform:uppercase; margin-bottom:28px; } :root[data-skin="lubalin"] .hero .lead{ color:var(--ink); max-width:38ch; border-top:6px solid var(--ink); padding-top:12px; font-weight:650; } :root[data-skin="lubalin"] .hero-cta{ border-top:2px solid var(--ink); padding-top:14px; } :root[data-skin="lubalin"] .hero-art, :root[data-skin="lubalin"] .card-media, :root[data-skin="lubalin"] .about-portrait{ aspect-ratio:auto; overflow:visible; background:var(--surface); border:0; border-bottom:8px solid var(--ink); padding:0 0 12px; border-radius:0; box-shadow:none; } :root[data-skin="lubalin"] .hero-art img, :root[data-skin="lubalin"] .card-media img, :root[data-skin="lubalin"] .about-portrait img{ width:100%; height:auto; object-fit:contain; } :root[data-skin="lubalin"] .section{ padding:clamp(46px,8vw,98px) 0; } :root[data-skin="lubalin"] .section--alt, :root[data-skin="lubalin"] .section--showcase{ background:var(--surface); border-block:6px solid var(--ink); } :root[data-skin="lubalin"] .section-head{ display:grid; grid-template-columns:minmax(120px,.35fr) 1fr; align-items:end; border-bottom:8px solid var(--ink); padding-bottom:10px; } :root[data-skin="lubalin"] .section-head h2{ font-family:var(--sans); font-weight:950; text-transform:uppercase; letter-spacing:-.095em; line-height:.76; } :root[data-skin="lubalin"] .btn, :root[data-skin="lubalin"] .btn-primary, :root[data-skin="lubalin"] .btn--accent{ border-radius:0; border:0; border-bottom:7px solid var(--ink); background:var(--surface); color:var(--ink); font-weight:950; text-transform:uppercase; letter-spacing:-.045em; padding-inline:6px; } :root[data-skin="lubalin"] .btn-ghost, :root[data-skin="lubalin"] .btn--ghost{ border-bottom-width:3px; } :root[data-skin="lubalin"] main input, :root[data-skin="lubalin"] main select, :root[data-skin="lubalin"] main textarea, :root[data-skin="lubalin"] .site-footer input{ border-radius:0; border:0; border-bottom:5px solid var(--ink); background:var(--surface); font-weight:700; } :root[data-skin="lubalin"] .site-footer{ background:var(--surface); color:var(--ink); border-top:10px solid var(--ink); } :root[data-skin="lubalin"] .site-footer a{ color:var(--ink); text-decoration-thickness:4px; text-decoration-color:var(--ink); } :root[data-skin="lubalin"] .site-footer h4{ color:var(--ink); font-weight:950; letter-spacing:-.02em; } /* ---- glaser (humanist eclectic wit: warm poster curves and one unforgettable colour memory) — uses 2 scaffold layers. ---- */ body[data-struct="glaser"] .skin-structure-layer:nth-child(1){ top:-24vh; right:-18vw; width:62vw; height:62vw; border-radius:50%; background:conic-gradient(from 210deg, rgba(226,59,109,.18), rgba(242,180,23,.18), rgba(47,163,107,.16), rgba(46,123,214,.16), rgba(122,63,176,.16), rgba(226,59,109,.18)); } body[data-struct="glaser"] .skin-structure-layer:nth-child(2){ left:-8vw; bottom:12vh; width:42vw; height:22vw; border:14px solid rgba(36,28,16,.08); border-radius:55% 45% 52% 48%; } :root[data-skin="glaser"] .site-header{ background:color-mix(in srgb, var(--surface) 94%, transparent); border-bottom:3px solid var(--ink); border-radius:0 0 28px 28px; } :root[data-skin="glaser"] .nav{ height:74px; } :root[data-skin="glaser"] .brand{ font-family:var(--serif); font-weight:800; letter-spacing:-.02em; } :root[data-skin="glaser"] .brand span{ color:var(--accent); } :root[data-skin="glaser"] .nav-links{ gap:24px; } :root[data-skin="glaser"] .nav-links a{ color:var(--ink); font-weight:700; border-radius:22px 22px 4px 22px; padding:6px 10px; } :root[data-skin="glaser"] .nav-links a::after{ height:6px; bottom:0; background:linear-gradient(90deg,#E23B6D,#F2B417,#2FA36B,#2E7BD6,#7A3FB0); border-radius:999px; } :root[data-skin="glaser"] .cart-btn{ border:2px solid var(--ink); border-radius:22px 22px 4px 22px; background:var(--surface); color:var(--ink); padding:8px 12px; } :root[data-skin="glaser"] .hero{ padding:clamp(58px,10vw,122px) 0 clamp(42px,7vw,84px); } :root[data-skin="glaser"] .hero-grid{ grid-template-columns:1fr .92fr; gap:clamp(30px,6vw,78px); } :root[data-skin="glaser"] .hero .eyebrow, :root[data-skin="glaser"] .eyebrow{ color:var(--accent); font-weight:800; letter-spacing:.16em; } :root[data-skin="glaser"] .hero h1{ font-family:var(--serif); font-weight:800; line-height:.92; letter-spacing:-.04em; text-shadow:.045em .045em 0 #F2B417; } :root[data-skin="glaser"] .hero .lead{ max-width:40ch; background:var(--surface); border:2px solid var(--ink); border-radius:28px 28px 6px 28px; padding:18px 20px; } :root[data-skin="glaser"] .hero-art, :root[data-skin="glaser"] .card-media, :root[data-skin="glaser"] .about-portrait{ aspect-ratio:auto; overflow:visible; background:var(--surface); border:3px solid var(--ink); border-radius:34px 34px 6px 34px; padding:10px; box-shadow:0 10px 0 #F2B417; } :root[data-skin="glaser"] .hero-art img, :root[data-skin="glaser"] .card-media img, :root[data-skin="glaser"] .about-portrait img{ width:100%; height:auto; object-fit:contain; } :root[data-skin="glaser"] .section--alt, :root[data-skin="glaser"] .section--showcase{ background:var(--surface); border-block:0; border-radius:42px 42px 0 0; box-shadow:inset 0 8px 0 var(--accent); } :root[data-skin="glaser"] .section-head{ align-items:center; } :root[data-skin="glaser"] .section-head h2{ font-family:var(--serif); font-weight:800; letter-spacing:-.025em; } :root[data-skin="glaser"] .section-head h2::after{ content:""; display:block; height:8px; width:150px; max-width:45%; margin-top:10px; border-radius:999px; background:linear-gradient(90deg,#E23B6D,#F2B417,#2FA36B,#2E7BD6,#7A3FB0); } :root[data-skin="glaser"] .btn, :root[data-skin="glaser"] .btn-primary, :root[data-skin="glaser"] .btn--accent{ border-radius:999px 999px 8px 999px; border:2px solid var(--ink); background:var(--accent); color:#fff; font-weight:800; box-shadow:0 5px 0 #F2B417; } :root[data-skin="glaser"] .btn-ghost, :root[data-skin="glaser"] .btn--ghost{ background:var(--surface); color:var(--ink); } :root[data-skin="glaser"] main input, :root[data-skin="glaser"] main select, :root[data-skin="glaser"] main textarea, :root[data-skin="glaser"] .site-footer input{ border:2px solid var(--ink); border-radius:20px 20px 4px 20px; background:var(--surface); } :root[data-skin="glaser"] .site-footer{ background:var(--surface); color:var(--ink); border-top:0; box-shadow:inset 0 10px 0 var(--accent); border-radius:42px 42px 0 0; } :root[data-skin="glaser"] .site-footer a{ color:var(--accent); font-weight:700; } :root[data-skin="glaser"] .site-footer h4{ color:var(--ink); font-weight:800; } /* ---- baron (fashion editorial subtraction: space, alignment and restraint become luxury) — uses 0 scaffold layers. ---- */ :root[data-skin="baron"] .site-header{ background:rgba(255,255,255,.96); border-bottom:1px solid #ECECEC; } :root[data-skin="baron"] .nav{ height:92px; align-items:center; } :root[data-skin="baron"] .brand{ font-family:var(--serif); font-weight:400; font-size:clamp(28px,3vw,40px); letter-spacing:.08em; text-transform:uppercase; } :root[data-skin="baron"] .brand span{ color:var(--ink); } :root[data-skin="baron"] .nav-links{ gap:clamp(26px,4vw,56px); } :root[data-skin="baron"] .nav-links a{ color:var(--ink); font-size:12px; font-weight:500; letter-spacing:.24em; text-transform:uppercase; } :root[data-skin="baron"] .nav-links a::after{ height:1px; bottom:-8px; background:var(--ink); } :root[data-skin="baron"] .nav-right{ gap:28px; } :root[data-skin="baron"] .cart-btn{ padding:0; color:var(--ink); font-weight:400; letter-spacing:.18em; text-transform:uppercase; } :root[data-skin="baron"] .hero{ padding:clamp(88px,14vw,180px) 0 clamp(70px,11vw,140px); } :root[data-skin="baron"] .hero-grid{ grid-template-columns:.72fr 1.28fr; gap:clamp(56px,10vw,150px); align-items:center; } :root[data-skin="baron"] .hero .eyebrow, :root[data-skin="baron"] .eyebrow{ color:var(--ink-faint); letter-spacing:.36em; font-size:10px; } :root[data-skin="baron"] .hero h1{ font-family:var(--serif); font-weight:400; font-size:clamp(48px,8vw,118px); line-height:1; letter-spacing:.015em; margin:26px 0 32px; } :root[data-skin="baron"] .hero .lead{ max-width:30ch; color:var(--ink-soft); font-family:var(--serif); font-size:clamp(18px,2vw,24px); line-height:1.55; } :root[data-skin="baron"] .hero-cta{ gap:22px; margin-top:38px; } :root[data-skin="baron"] .hero-art, :root[data-skin="baron"] .card-media, :root[data-skin="baron"] .about-portrait{ aspect-ratio:auto; overflow:visible; background:transparent; border:0; border-radius:0; padding:0; box-shadow:none; } :root[data-skin="baron"] .hero-art img, :root[data-skin="baron"] .card-media img, :root[data-skin="baron"] .about-portrait img{ width:100%; height:auto; object-fit:contain; } :root[data-skin="baron"] .section{ padding:clamp(82px,13vw,168px) 0; } :root[data-skin="baron"] .section--alt, :root[data-skin="baron"] .section--showcase{ background:#fff; border-block:1px solid #F2F2F2; } :root[data-skin="baron"] .section-head{ display:block; text-align:center; max-width:720px; margin-inline:auto; margin-bottom:clamp(54px,8vw,110px); } :root[data-skin="baron"] .section-head h2{ font-family:var(--serif); font-weight:400; font-size:clamp(36px,5vw,72px); letter-spacing:.04em; margin-top:18px; } :root[data-skin="baron"] .btn, :root[data-skin="baron"] .btn-primary, :root[data-skin="baron"] .btn--accent{ border-radius:0; border:1px solid var(--ink); background:var(--ink); color:#fff; font-weight:400; letter-spacing:.22em; text-transform:uppercase; padding:15px 32px; } :root[data-skin="baron"] .btn-ghost, :root[data-skin="baron"] .btn--ghost{ background:#fff; color:var(--ink); } :root[data-skin="baron"] main input, :root[data-skin="baron"] main select, :root[data-skin="baron"] main textarea, :root[data-skin="baron"] .site-footer input{ border-radius:0; border:0; border-bottom:1px solid var(--ink); background:#fff; padding-inline:0; } :root[data-skin="baron"] .site-footer{ background:#fff; color:var(--ink); border-top:1px solid #ECECEC; margin-top:clamp(80px,12vw,150px); } :root[data-skin="baron"] .site-footer a{ color:var(--ink-soft); text-decoration:none; } :root[data-skin="baron"] .site-footer h4{ color:var(--ink-faint); font-weight:400; letter-spacing:.34em; } @media (max-width: 820px){ :root[data-skin="brody"] .hero-grid, :root[data-skin="reid"] .hero-grid, :root[data-skin="tdr"] .hero-grid, :root[data-skin="rand"] .hero-grid, :root[data-skin="lubalin"] .hero-grid, :root[data-skin="glaser"] .hero-grid, :root[data-skin="baron"] .hero-grid{ grid-template-columns:1fr; } :root[data-skin="brody"] .hero .lead, :root[data-skin="brody"] .hero-cta{ margin-left:0; } :root[data-skin="tdr"] .nav, :root[data-skin="baron"] .nav{ height:68px; } :root[data-skin="lubalin"] .section-head{ grid-template-columns:1fr; } } /* ===== p12-architecture.css ===== */ /* ---- corbusier (Modulor machine: pilotis, ribbon datums, regulated polychromy) — Uses 3 scaffold layers. ---- */ body[data-struct="corbusier"] .skin-structure-layer:nth-child(1){ background-image:linear-gradient(90deg, rgba(26,62,136,.08) 0 1px, transparent 1px 13vw), linear-gradient(0deg, rgba(30,28,24,.055) 0 1px, transparent 1px 42px); } body[data-struct="corbusier"] .skin-structure-layer:nth-child(2){ top:18vh; left:0; right:0; height:clamp(30px,5vw,64px); background:rgba(26,62,136,.10); box-shadow:0 38vh 0 rgba(200,144,32,.10); } body[data-struct="corbusier"] .skin-structure-layer:nth-child(3){ inset:auto auto 8vh 7vw; width:min(18vw,180px); height:min(18vw,180px); border:2px solid rgba(26,62,136,.20); background:rgba(251,248,241,.36); } :root[data-skin="corbusier"] .site-header{ background:color-mix(in srgb, var(--surface) 94%, transparent); border-bottom:3px solid var(--ink); box-shadow:0 12px 0 rgba(26,62,136,.08); } :root[data-skin="corbusier"] .nav{ height:76px; align-items:stretch; } :root[data-skin="corbusier"] .brand{ align-self:center; font-family:var(--sans); text-transform:uppercase; letter-spacing:.14em; font-weight:800; } :root[data-skin="corbusier"] .brand span{ color:var(--accent-deep); } :root[data-skin="corbusier"] .nav-links{ align-self:stretch; gap:0; border-inline:1px solid var(--line); } :root[data-skin="corbusier"] .nav-links a{ height:100%; display:flex; align-items:center; padding-inline:clamp(12px,2vw,24px); border-right:1px solid var(--line); font-family:var(--mono); text-transform:uppercase; letter-spacing:.12em; font-size:12px; color:var(--ink); } :root[data-skin="corbusier"] .nav-links a::after{ bottom:0; height:4px; background:var(--accent-deep); } :root[data-skin="corbusier"] .nav-right{ align-self:center; gap:13px; } :root[data-skin="corbusier"] .cart-btn{ border-left:2px solid var(--accent); padding-left:13px; font-family:var(--mono); color:var(--ink); } :root[data-skin="corbusier"] .hero{ padding-block:clamp(72px,10vw,144px) clamp(52px,8vw,100px); } :root[data-skin="corbusier"] .hero-grid{ grid-template-columns:minmax(0,1.618fr) minmax(280px,1fr); gap:clamp(34px,6vw,89px); align-items:end; } :root[data-skin="corbusier"] .hero h1{ font-family:var(--sans); font-weight:800; letter-spacing:-.035em; text-transform:uppercase; line-height:.88; max-width:10ch; border-top:8px solid var(--ink); padding-top:21px; } :root[data-skin="corbusier"] .hero .lead{ max-width:38ch; border-left:13px solid var(--accent-deep); padding-left:21px; color:var(--ink-soft); } :root[data-skin="corbusier"] .hero .eyebrow, :root[data-skin="corbusier"] .eyebrow{ font-family:var(--mono); color:var(--accent-deep); letter-spacing:.18em; } :root[data-skin="corbusier"] .hero-cta{ gap:13px; align-items:center; } :root[data-skin="corbusier"] .hero-art, :root[data-skin="corbusier"] .card-media, :root[data-skin="corbusier"] .about-portrait{ background:var(--surface); padding:17px; border:1px solid var(--line-strong); border-top:5px solid var(--ink); border-radius:0; box-shadow:inset 0 0 0 8px rgba(200,144,32,.09), 18px 18px 0 rgba(26,62,136,.10); overflow:visible; } :root[data-skin="corbusier"] .hero-art img, :root[data-skin="corbusier"] .card-media img, :root[data-skin="corbusier"] .about-portrait img{ width:100%; height:auto; object-fit:contain; } :root[data-skin="corbusier"] .section{ padding-block:clamp(56px,8vw,104px); } :root[data-skin="corbusier"] .section--alt{ background:linear-gradient(90deg, transparent 0 8%, var(--surface) 8% 100%); border-block:2px solid var(--ink); } :root[data-skin="corbusier"] .section--showcase{ background:linear-gradient(180deg, rgba(26,62,136,.08), transparent 42%); } :root[data-skin="corbusier"] .section-head{ align-items:flex-start; border-top:2px solid var(--ink); padding-top:13px; } :root[data-skin="corbusier"] .section-head h2{ font-family:var(--sans); font-weight:800; text-transform:uppercase; letter-spacing:-.02em; max-width:14ch; } :root[data-skin="corbusier"] .btn, :root[data-skin="corbusier"] input, :root[data-skin="corbusier"] select, :root[data-skin="corbusier"] textarea{ border-radius:0; border-width:2px; font-family:var(--mono); letter-spacing:.08em; } :root[data-skin="corbusier"] .btn-primary, :root[data-skin="corbusier"] .btn--accent{ background:var(--accent-deep); border-color:var(--accent-deep); color:#fff; } :root[data-skin="corbusier"] .btn-ghost, :root[data-skin="corbusier"] .btn--ghost{ background:var(--surface); color:var(--ink); border-color:var(--ink); } :root[data-skin="corbusier"] .site-footer{ background:var(--surface); border-top:8px solid var(--ink); box-shadow:inset 0 13px 0 rgba(200,144,32,.16); } :root[data-skin="corbusier"] .site-footer a, :root[data-skin="corbusier"] .site-footer h4{ color:var(--ink); font-family:var(--mono); text-transform:uppercase; letter-spacing:.12em; } /* ---- mies (almost nothing: universal bay, freestanding planes, perfect joints) — Uses 2 scaffold layers. ---- */ body[data-struct="mies"] .skin-structure-layer:nth-child(1){ background-image:linear-gradient(90deg, rgba(28,30,32,.06) 0 1px, transparent 1px 24vw), linear-gradient(0deg, rgba(28,30,32,.045) 0 1px, transparent 1px 24vw); } body[data-struct="mies"] .skin-structure-layer:nth-child(2){ inset:12vh 9vw auto auto; width:32vw; height:64vh; border-left:1px solid rgba(28,30,32,.18); border-right:1px solid rgba(28,30,32,.08); background:linear-gradient(90deg, rgba(192,144,80,.10), transparent 58%); } :root[data-skin="mies"] .site-header{ background:color-mix(in srgb, var(--bg) 82%, transparent); border-bottom:1px solid var(--line-strong); box-shadow:none; } :root[data-skin="mies"] .nav{ height:72px; } :root[data-skin="mies"] .brand{ font-family:var(--sans); font-weight:300; letter-spacing:.18em; text-transform:uppercase; } :root[data-skin="mies"] .brand span{ color:var(--accent); } :root[data-skin="mies"] .nav-links{ gap:clamp(24px,4vw,56px); } :root[data-skin="mies"] .nav-links a{ font-weight:300; letter-spacing:.08em; color:var(--ink-soft); } :root[data-skin="mies"] .nav-links a::after{ height:1px; bottom:-8px; background:var(--ink); } :root[data-skin="mies"] .nav-right{ gap:26px; } :root[data-skin="mies"] .cart-btn{ border:1px solid var(--line-strong); padding:8px 13px; color:var(--ink); } :root[data-skin="mies"] .hero{ padding-block:clamp(84px,12vw,168px); } :root[data-skin="mies"] .hero-grid{ grid-template-columns:1fr 1fr; gap:clamp(26px,4vw,52px); align-items:center; } :root[data-skin="mies"] .hero h1{ font-family:var(--sans); font-weight:300; letter-spacing:-.025em; line-height:1; max-width:12ch; } :root[data-skin="mies"] .hero .lead{ max-width:42ch; color:var(--ink-soft); } :root[data-skin="mies"] .hero .eyebrow, :root[data-skin="mies"] .eyebrow{ font-family:var(--mono); color:var(--ink-faint); letter-spacing:.12em; } :root[data-skin="mies"] .hero-cta{ gap:26px; } :root[data-skin="mies"] .hero-art, :root[data-skin="mies"] .card-media, :root[data-skin="mies"] .about-portrait{ background:#D4C0A0; padding:15px; border:1px solid var(--line-strong); border-radius:0; box-shadow:none; overflow:visible; position:relative; } :root[data-skin="mies"] .hero-art::before, :root[data-skin="mies"] .card-media::before, :root[data-skin="mies"] .about-portrait::before{ content:""; position:absolute; top:-10px; left:50%; width:1px; height:20px; background:var(--ink-faint); } :root[data-skin="mies"] .hero-art::after, :root[data-skin="mies"] .card-media::after, :root[data-skin="mies"] .about-portrait::after{ content:""; position:absolute; top:-1px; left:calc(50% - 10px); width:20px; height:1px; background:var(--ink-faint); } :root[data-skin="mies"] .hero-art img, :root[data-skin="mies"] .card-media img, :root[data-skin="mies"] .about-portrait img{ width:100%; height:auto; object-fit:contain; } :root[data-skin="mies"] .section{ padding-block:clamp(64px,9vw,116px); } :root[data-skin="mies"] .section--alt, :root[data-skin="mies"] .section--showcase{ background:transparent; border-block:1px solid var(--line); } :root[data-skin="mies"] .section-head{ border-bottom:1px solid var(--line-strong); padding-bottom:26px; } :root[data-skin="mies"] .section-head h2{ font-family:var(--sans); font-weight:300; letter-spacing:-.01em; } :root[data-skin="mies"] .btn, :root[data-skin="mies"] input, :root[data-skin="mies"] select, :root[data-skin="mies"] textarea{ border-radius:0; border:1px solid var(--line-strong); background:color-mix(in srgb, var(--surface) 70%, transparent); } :root[data-skin="mies"] .btn-primary, :root[data-skin="mies"] .btn--accent{ background:var(--ink); border-color:var(--ink); color:var(--bg); } :root[data-skin="mies"] .btn-ghost, :root[data-skin="mies"] .btn--ghost{ background:transparent; color:var(--ink); } :root[data-skin="mies"] .site-footer{ background:transparent; border-top:1px solid var(--line-strong); } :root[data-skin="mies"] .site-footer a, :root[data-skin="mies"] .site-footer h4{ color:var(--ink-soft); font-weight:300; letter-spacing:.06em; } /* ---- wright (organic prairie: low sheltering horizontals grown from earth) — Uses 3 scaffold layers. ---- */ body[data-struct="wright"] .skin-structure-layer:nth-child(1){ background-image:repeating-linear-gradient(0deg, rgba(138,40,24,.08) 0 2px, transparent 2px 18px); } body[data-struct="wright"] .skin-structure-layer:nth-child(2){ top:26vh; left:-8vw; right:-8vw; height:clamp(72px,11vw,140px); background:linear-gradient(90deg, transparent, rgba(106,138,88,.13) 18% 82%, transparent); box-shadow:0 34vh 0 rgba(138,40,24,.07); } body[data-struct="wright"] .skin-structure-layer:nth-child(3){ inset:auto 0 0 0; height:28vh; background:linear-gradient(0deg, rgba(90,56,32,.12), transparent); } :root[data-skin="wright"] .site-header{ background:color-mix(in srgb, var(--surface) 92%, transparent); border-bottom:6px solid var(--accent); box-shadow:0 18px 0 rgba(196,168,120,.22); } :root[data-skin="wright"] .nav{ height:64px; } :root[data-skin="wright"] .brand{ font-family:var(--serif); font-weight:700; letter-spacing:.04em; color:var(--ink); } :root[data-skin="wright"] .brand span{ color:var(--accent); } :root[data-skin="wright"] .nav-links{ gap:18px; } :root[data-skin="wright"] .nav-links a{ padding:10px 14px 8px; border-top:2px solid transparent; border-bottom:2px solid var(--line); color:var(--ink-soft); font-weight:600; } :root[data-skin="wright"] .nav-links a::after{ bottom:-2px; height:2px; background:var(--accent); } :root[data-skin="wright"] .nav-right{ gap:18px; } :root[data-skin="wright"] .cart-btn{ border-bottom:4px solid var(--accent); color:var(--ink); } :root[data-skin="wright"] .hero{ padding-block:clamp(52px,8vw,96px); } :root[data-skin="wright"] .hero-grid{ grid-template-columns:1.2fr .8fr; gap:clamp(24px,4vw,48px); align-items:end; } :root[data-skin="wright"] .hero h1{ font-family:var(--serif); font-weight:700; line-height:.94; max-width:13ch; border-bottom:10px solid var(--accent); padding-bottom:18px; } :root[data-skin="wright"] .hero .lead{ max-width:48ch; color:var(--ink-soft); background:rgba(247,241,226,.62); border-left:4px solid var(--accent); padding:16px 18px; } :root[data-skin="wright"] .hero .eyebrow, :root[data-skin="wright"] .eyebrow{ color:var(--accent); font-family:var(--mono); letter-spacing:.12em; } :root[data-skin="wright"] .hero-cta{ gap:12px; } :root[data-skin="wright"] .hero-art, :root[data-skin="wright"] .card-media, :root[data-skin="wright"] .about-portrait{ background:#C4A878; padding:14px; border:none; border-left:8px solid var(--accent); border-bottom:4px solid var(--line-strong); border-radius:2px; box-shadow:18px 18px 0 rgba(106,138,88,.10); overflow:visible; } :root[data-skin="wright"] .hero-art img, :root[data-skin="wright"] .card-media img, :root[data-skin="wright"] .about-portrait img{ width:100%; height:auto; object-fit:contain; } :root[data-skin="wright"] .section{ padding-block:clamp(46px,7vw,86px); } :root[data-skin="wright"] .section--alt{ background:linear-gradient(0deg, rgba(196,168,120,.30), rgba(247,241,226,.72)); border-block:6px solid var(--accent); } :root[data-skin="wright"] .section--showcase{ background:linear-gradient(90deg, rgba(106,138,88,.14), transparent 36% 64%, rgba(138,40,24,.10)); } :root[data-skin="wright"] .section-head{ align-items:flex-end; border-bottom:4px solid var(--accent); padding-bottom:14px; } :root[data-skin="wright"] .section-head h2{ font-family:var(--serif); font-weight:700; max-width:16ch; } :root[data-skin="wright"] .btn, :root[data-skin="wright"] input, :root[data-skin="wright"] select, :root[data-skin="wright"] textarea{ border-radius:2px; border:2px solid var(--line-strong); background:var(--surface); } :root[data-skin="wright"] .btn-primary, :root[data-skin="wright"] .btn--accent{ background:var(--accent); border-color:var(--accent); color:#fff; } :root[data-skin="wright"] .btn-ghost, :root[data-skin="wright"] .btn--ghost{ background:transparent; color:var(--ink); border-color:var(--accent); } :root[data-skin="wright"] .site-footer{ background:var(--surface-2); border-top:10px solid var(--accent); } :root[data-skin="wright"] .site-footer a, :root[data-skin="wright"] .site-footer h4{ color:var(--ink-soft); font-family:var(--serif); } /* ---- ando (concrete silence: charged voids, form-tie discipline, light cuts) — Uses 3 scaffold layers. ---- */ body[data-struct="ando"] #skin-structure{ background:#B4AEA8; } body[data-struct="ando"] .skin-structure-layer:nth-child(1){ background-image:radial-gradient(circle at 14px 14px, rgba(30,28,24,.16) 0 2px, transparent 2.5px); background-size:72px 72px; } body[data-struct="ando"] .skin-structure-layer:nth-child(2){ left:58vw; width:clamp(80px,10vw,150px); background:linear-gradient(180deg, transparent, rgba(255,255,255,.34) 30% 62%, transparent); filter:blur(1px); } body[data-struct="ando"] .skin-structure-layer:nth-child(3){ inset:18vh 12vw auto auto; width:32vw; height:52vh; border:1px solid rgba(30,28,24,.18); background:rgba(196,190,184,.25); } :root[data-skin="ando"] .site-header{ background:color-mix(in srgb, var(--surface) 88%, transparent); border-bottom:1px solid var(--line-strong); box-shadow:none; } :root[data-skin="ando"] .nav{ height:84px; } :root[data-skin="ando"] .brand{ font-family:var(--sans); font-weight:300; letter-spacing:.12em; text-transform:lowercase; } :root[data-skin="ando"] .brand span{ color:var(--accent-deep); } :root[data-skin="ando"] .nav-links{ gap:clamp(28px,5vw,72px); } :root[data-skin="ando"] .nav-links a{ color:var(--ink-soft); font-weight:300; letter-spacing:.08em; text-transform:lowercase; } :root[data-skin="ando"] .nav-links a::after{ bottom:-12px; height:2px; background:var(--accent-deep); } :root[data-skin="ando"] .nav-right{ gap:24px; } :root[data-skin="ando"] .cart-btn{ color:var(--ink-soft); border-top:2px dotted var(--ink-faint); padding-top:10px; } :root[data-skin="ando"] .hero{ padding-block:clamp(96px,14vw,190px); } :root[data-skin="ando"] .hero-grid{ grid-template-columns:.82fr 1.18fr; gap:clamp(60px,9vw,128px); align-items:center; } :root[data-skin="ando"] .hero h1{ font-family:var(--sans); font-weight:300; letter-spacing:.02em; text-transform:lowercase; line-height:1.08; max-width:11ch; } :root[data-skin="ando"] .hero .lead{ max-width:34ch; color:var(--ink-soft); } :root[data-skin="ando"] .hero .eyebrow, :root[data-skin="ando"] .eyebrow{ color:var(--ink-faint); font-family:var(--mono); letter-spacing:.2em; } :root[data-skin="ando"] .hero-cta{ gap:18px; margin-top:36px; } :root[data-skin="ando"] .hero-art, :root[data-skin="ando"] .card-media, :root[data-skin="ando"] .about-portrait{ background:var(--surface); padding:30px; border:1px solid rgba(30,28,24,.14); border-top:2px dotted var(--ink-faint); border-radius:0; box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); overflow:visible; } :root[data-skin="ando"] .hero-art img, :root[data-skin="ando"] .card-media img, :root[data-skin="ando"] .about-portrait img{ width:100%; height:auto; object-fit:contain; } :root[data-skin="ando"] .section{ padding-block:clamp(88px,12vw,168px); } :root[data-skin="ando"] .section--alt, :root[data-skin="ando"] .section--showcase{ background:transparent; border-block:1px solid var(--line-strong); } :root[data-skin="ando"] .section-head{ display:grid; grid-template-columns:1fr 1fr; align-items:start; gap:clamp(42px,7vw,96px); } :root[data-skin="ando"] .section-head h2{ font-family:var(--sans); font-weight:300; text-transform:lowercase; letter-spacing:.02em; } :root[data-skin="ando"] .btn, :root[data-skin="ando"] input, :root[data-skin="ando"] select, :root[data-skin="ando"] textarea{ border-radius:0; border:1px solid var(--line-strong); background:transparent; color:var(--ink); } :root[data-skin="ando"] .btn-primary, :root[data-skin="ando"] .btn--accent{ background:var(--accent); border-color:var(--accent); color:var(--bg); } :root[data-skin="ando"] .btn-ghost, :root[data-skin="ando"] .btn--ghost{ background:transparent; color:var(--ink); } :root[data-skin="ando"] .site-footer{ background:transparent; border-top:1px solid var(--line-strong); margin-top:clamp(90px,14vw,180px); } :root[data-skin="ando"] .site-footer a, :root[data-skin="ando"] .site-footer h4{ color:var(--ink-soft); font-weight:300; letter-spacing:.08em; } /* ---- barragan (emotional refuge: thick pigment walls, still courtyards, mystery) — Uses 4 scaffold layers. ---- */ body[data-struct="barragan"] .skin-structure-layer:nth-child(1){ inset:10vh auto auto 0; width:28vw; height:58vh; background:rgba(214,53,104,.18); } body[data-struct="barragan"] .skin-structure-layer:nth-child(2){ inset:26vh 0 auto auto; width:34vw; height:44vh; background:rgba(212,160,32,.18); } body[data-struct="barragan"] .skin-structure-layer:nth-child(3){ inset:auto auto 8vh 18vw; width:30vw; height:36vh; background:rgba(120,56,120,.16); } body[data-struct="barragan"] .skin-structure-layer:nth-child(4){ inset:0 0 auto auto; width:16vw; height:100vh; background:rgba(184,40,24,.12); } :root[data-skin="barragan"] .site-header{ background:var(--surface); border-bottom:none; box-shadow:inset 0 -18px 0 var(--accent); } :root[data-skin="barragan"] .nav{ height:86px; } :root[data-skin="barragan"] .brand{ font-family:var(--serif); font-weight:400; color:var(--ink); } :root[data-skin="barragan"] .brand span{ color:var(--accent); } :root[data-skin="barragan"] .nav-links{ gap:10px; } :root[data-skin="barragan"] .nav-links a{ background:var(--accent-soft); padding:10px 16px; color:var(--ink-soft); font-family:var(--serif); font-weight:400; letter-spacing:.02em; } :root[data-skin="barragan"] .nav-links a:nth-child(2n){ background:rgba(214,53,104,.14); } :root[data-skin="barragan"] .nav-links a::after{ bottom:0; height:5px; background:var(--accent); } :root[data-skin="barragan"] .nav-right{ gap:16px; } :root[data-skin="barragan"] .cart-btn{ background:var(--accent-deep); color:#fff; padding:10px 14px; } :root[data-skin="barragan"] .hero{ padding-block:clamp(72px,11vw,146px); } :root[data-skin="barragan"] .hero-grid{ grid-template-columns:.95fr 1.05fr; gap:clamp(34px,6vw,82px); align-items:center; } :root[data-skin="barragan"] .hero h1{ font-family:var(--serif); font-weight:400; line-height:.98; max-width:11ch; background:linear-gradient(90deg, rgba(214,53,104,.18), transparent); padding:22px 24px; } :root[data-skin="barragan"] .hero .lead{ max-width:38ch; color:var(--ink-soft); background:rgba(246,240,230,.76); padding:20px 22px; border-left:18px solid var(--accent); } :root[data-skin="barragan"] .hero .eyebrow, :root[data-skin="barragan"] .eyebrow{ color:var(--accent-deep); font-family:var(--mono); letter-spacing:.16em; } :root[data-skin="barragan"] .hero-cta{ gap:16px; } :root[data-skin="barragan"] .hero-art, :root[data-skin="barragan"] .card-media, :root[data-skin="barragan"] .about-portrait{ background:#EFE8DC; padding:22px; border:18px solid var(--accent); border-radius:0; box-shadow:24px 24px 0 rgba(120,56,120,.18); overflow:visible; } :root[data-skin="barragan"] .hero-art img, :root[data-skin="barragan"] .card-media img, :root[data-skin="barragan"] .about-portrait img{ width:100%; height:auto; object-fit:contain; } :root[data-skin="barragan"] .section{ padding-block:clamp(62px,9vw,116px); } :root[data-skin="barragan"] .section--alt{ background:linear-gradient(90deg, rgba(214,53,104,.18) 0 25%, var(--surface) 25% 100%); border-block:none; } :root[data-skin="barragan"] .section--showcase{ background:linear-gradient(90deg, rgba(120,56,120,.20), rgba(212,160,32,.18)); } :root[data-skin="barragan"] .section-head{ background:var(--surface); padding:22px 26px; border-left:26px solid var(--accent); } :root[data-skin="barragan"] .section-head h2{ font-family:var(--serif); font-weight:400; } :root[data-skin="barragan"] .btn, :root[data-skin="barragan"] input, :root[data-skin="barragan"] select, :root[data-skin="barragan"] textarea{ border-radius:0; border:2px solid transparent; background:var(--surface); } :root[data-skin="barragan"] .btn-primary, :root[data-skin="barragan"] .btn--accent{ background:var(--accent); border-color:var(--accent); color:#fff; } :root[data-skin="barragan"] .btn-ghost, :root[data-skin="barragan"] .btn--ghost{ background:var(--surface); color:var(--accent-deep); border-color:var(--accent-deep); } :root[data-skin="barragan"] .site-footer{ background:var(--accent-deep); color:#fff; border-top:28px solid var(--accent); } :root[data-skin="barragan"] .site-footer a, :root[data-skin="barragan"] .site-footer h4{ color:#fff; font-family:var(--serif); font-weight:400; } /* ---- kahn (served and servant: monumental rooms, brick piers, silence and light) — Uses 3 scaffold layers. ---- */ body[data-struct="kahn"] .skin-structure-layer:nth-child(1){ background-image:repeating-linear-gradient(0deg, rgba(138,62,40,.08) 0 12px, transparent 12px 16px), repeating-linear-gradient(90deg, rgba(42,32,26,.045) 0 1px, transparent 1px 18vw); } body[data-struct="kahn"] .skin-structure-layer:nth-child(2){ inset:0 auto 0 6vw; width:clamp(34px,5vw,78px); background:rgba(138,62,40,.18); box-shadow:78vw 0 0 rgba(138,62,40,.10); } body[data-struct="kahn"] .skin-structure-layer:nth-child(3){ top:20vh; left:0; right:0; height:4px; background:linear-gradient(90deg, transparent, rgba(255,255,255,.56), transparent); box-shadow:0 38vh 0 rgba(255,255,255,.30); } :root[data-skin="kahn"] .site-header{ background:var(--surface); border-bottom:12px solid var(--accent); box-shadow:inset 0 -2px 0 rgba(255,255,255,.45); } :root[data-skin="kahn"] .nav{ height:82px; } :root[data-skin="kahn"] .brand{ font-family:var(--serif); font-weight:700; letter-spacing:.03em; } :root[data-skin="kahn"] .brand span{ color:var(--accent); } :root[data-skin="kahn"] .nav-links{ gap:0; border-left:1px solid var(--line-strong); } :root[data-skin="kahn"] .nav-links a{ padding:12px 20px; border-right:1px solid var(--line-strong); color:var(--ink-soft); font-family:var(--serif); font-weight:600; } :root[data-skin="kahn"] .nav-links a::after{ bottom:0; height:3px; background:var(--accent); } :root[data-skin="kahn"] .nav-right{ gap:20px; } :root[data-skin="kahn"] .cart-btn{ border-left:12px solid var(--accent); background:var(--surface-2); padding:10px 14px; color:var(--ink); } :root[data-skin="kahn"] .hero{ padding-block:clamp(78px,11vw,150px); } :root[data-skin="kahn"] .hero-grid{ grid-template-columns:.9fr 1.1fr; gap:clamp(38px,6vw,90px); align-items:stretch; } :root[data-skin="kahn"] .hero h1{ font-family:var(--serif); font-weight:700; line-height:.96; max-width:12ch; border-left:18px solid var(--accent); padding-left:24px; } :root[data-skin="kahn"] .hero .lead{ max-width:40ch; color:var(--ink-soft); border-top:2px solid var(--line-strong); padding-top:18px; } :root[data-skin="kahn"] .hero .eyebrow, :root[data-skin="kahn"] .eyebrow{ color:var(--accent); font-family:var(--mono); letter-spacing:.14em; } :root[data-skin="kahn"] .hero-cta{ gap:14px; } :root[data-skin="kahn"] .hero-art, :root[data-skin="kahn"] .card-media, :root[data-skin="kahn"] .about-portrait{ background:#C8B898; padding:16px; border:none; border-left:18px solid var(--accent); border-radius:0; box-shadow:inset 0 3px 0 rgba(255,255,255,.54), 20px 20px 0 rgba(106,72,40,.12); overflow:visible; position:relative; } :root[data-skin="kahn"] .hero-art::before, :root[data-skin="kahn"] .card-media::before, :root[data-skin="kahn"] .about-portrait::before{ content:""; position:absolute; top:7px; left:16px; right:16px; height:3px; background:rgba(255,255,255,.58); } :root[data-skin="kahn"] .hero-art img, :root[data-skin="kahn"] .card-media img, :root[data-skin="kahn"] .about-portrait img{ width:100%; height:auto; object-fit:contain; } :root[data-skin="kahn"] .section{ padding-block:clamp(60px,8vw,112px); } :root[data-skin="kahn"] .section--alt{ background:var(--surface); border-block:12px solid var(--accent); } :root[data-skin="kahn"] .section--showcase{ background:linear-gradient(90deg, rgba(138,62,40,.10), transparent 18% 82%, rgba(106,72,40,.10)); } :root[data-skin="kahn"] .section-head{ border-left:18px solid var(--accent); padding-left:24px; align-items:flex-start; } :root[data-skin="kahn"] .section-head h2{ font-family:var(--serif); font-weight:700; max-width:15ch; } :root[data-skin="kahn"] .btn, :root[data-skin="kahn"] input, :root[data-skin="kahn"] select, :root[data-skin="kahn"] textarea{ border-radius:0; border:2px solid var(--line-strong); background:var(--surface); } :root[data-skin="kahn"] .btn-primary, :root[data-skin="kahn"] .btn--accent{ background:var(--accent); border-color:var(--accent); color:#fff; } :root[data-skin="kahn"] .btn-ghost, :root[data-skin="kahn"] .btn--ghost{ background:transparent; color:var(--ink); border-color:var(--accent-deep); } :root[data-skin="kahn"] .site-footer{ background:var(--surface-2); border-top:18px solid var(--accent); } :root[data-skin="kahn"] .site-footer a, :root[data-skin="kahn"] .site-footer h4{ color:var(--ink-soft); font-family:var(--serif); font-weight:700; } /* ---- aalto (humane modernism: birch warmth, waves, standardisation with variation) — Uses 3 scaffold layers. ---- */ body[data-struct="aalto"] .skin-structure-layer:nth-child(1){ background:radial-gradient(70% 45% at 18% 18%, rgba(160,60,40,.10), transparent 62%), radial-gradient(60% 42% at 86% 70%, rgba(106,144,112,.12), transparent 64%); } body[data-struct="aalto"] .skin-structure-layer:nth-child(2){ top:18vh; left:-10vw; width:120vw; height:28vh; background:radial-gradient(80% 100% at 50% 100%, rgba(208,174,104,.18) 0 48%, transparent 50%); } body[data-struct="aalto"] .skin-structure-layer:nth-child(3){ inset:auto 8vw 10vh auto; width:min(28vw,340px); height:min(18vw,220px); border-radius:55% 45% 60% 40%; background:rgba(106,144,112,.12); } :root[data-skin="aalto"] .site-header{ background:color-mix(in srgb, var(--surface) 92%, transparent); border-bottom:1px solid var(--line); box-shadow:0 12px 30px rgba(90,74,48,.08); } :root[data-skin="aalto"] .nav{ min-height:74px; height:auto; padding-block:8px; } :root[data-skin="aalto"] .brand{ font-family:var(--serif); font-weight:700; letter-spacing:.01em; } :root[data-skin="aalto"] .brand span{ color:var(--accent-deep); } :root[data-skin="aalto"] .nav-links{ gap:14px; flex-wrap:wrap; } :root[data-skin="aalto"] .nav-links a{ padding:8px 12px; border:1px solid transparent; border-radius:18px 10px 20px 12px; color:var(--ink-soft); } :root[data-skin="aalto"] .nav-links a::after{ bottom:3px; left:12px; height:2px; background:var(--accent-deep); } :root[data-skin="aalto"] .nav-right{ gap:16px; } :root[data-skin="aalto"] .cart-btn{ border:1px solid var(--accent-deep); border-radius:18px 10px 18px 10px; padding:8px 12px; color:var(--ink); } :root[data-skin="aalto"] .hero{ padding-block:clamp(62px,9vw,120px); } :root[data-skin="aalto"] .hero-grid{ grid-template-columns:1.08fr .92fr; gap:clamp(28px,5vw,68px); align-items:center; } :root[data-skin="aalto"] .hero h1{ font-family:var(--serif); font-weight:700; line-height:1; max-width:13ch; } :root[data-skin="aalto"] .hero .lead{ max-width:45ch; color:var(--ink-soft); background:rgba(250,245,234,.70); border-radius:28px 10px 32px 12px; padding:18px 22px; } :root[data-skin="aalto"] .hero .eyebrow, :root[data-skin="aalto"] .eyebrow{ color:var(--accent-deep); font-family:var(--mono); letter-spacing:.12em; } :root[data-skin="aalto"] .hero-cta{ gap:12px; } :root[data-skin="aalto"] .hero-art, :root[data-skin="aalto"] .card-media, :root[data-skin="aalto"] .about-portrait{ background:#D0AE68; padding:15px; border:1px solid var(--accent-deep); border-radius:18px 10px 24px 12px; box-shadow:16px 18px 0 rgba(106,144,112,.12); overflow:visible; } :root[data-skin="aalto"] .hero-art img, :root[data-skin="aalto"] .card-media img, :root[data-skin="aalto"] .about-portrait img{ width:100%; height:auto; object-fit:contain; border-radius:8px 5px 12px 6px; } :root[data-skin="aalto"] .section{ padding-block:clamp(54px,8vw,102px); } :root[data-skin="aalto"] .section--alt{ background:linear-gradient(120deg, rgba(208,174,104,.22), rgba(250,245,234,.82)); border-block:none; border-radius:42px 16px 48px 20px; } :root[data-skin="aalto"] .section--showcase{ background:radial-gradient(80% 70% at 20% 0, rgba(106,144,112,.16), transparent 66%); } :root[data-skin="aalto"] .section-head{ align-items:center; gap:clamp(20px,4vw,54px); } :root[data-skin="aalto"] .section-head h2{ font-family:var(--serif); font-weight:700; max-width:16ch; } :root[data-skin="aalto"] .btn, :root[data-skin="aalto"] input, :root[data-skin="aalto"] select, :root[data-skin="aalto"] textarea{ border-radius:18px 10px 20px 12px; border:1px solid var(--line-strong); background:var(--surface); } :root[data-skin="aalto"] .btn-primary, :root[data-skin="aalto"] .btn--accent{ background:var(--accent); border-color:var(--accent); color:#fff; } :root[data-skin="aalto"] .btn-ghost, :root[data-skin="aalto"] .btn--ghost{ background:transparent; color:var(--ink); border-color:var(--accent-deep); } :root[data-skin="aalto"] .site-footer{ background:var(--surface); border-top:1px solid var(--line); border-radius:48px 18px 0 0; } :root[data-skin="aalto"] .site-footer a, :root[data-skin="aalto"] .site-footer h4{ color:var(--ink-soft); font-family:var(--serif); } /* ===== p13-painters.css ===== */ /* ---- malevich (Suprematist zero-form: black/red planes float in white infinity). Uses 3 scaffold layers. ---- */ body[data-struct="malevich"] .skin-structure-layer:nth-child(1){ top:10vh; left:6vw; width:72px; height:72px; background:#1A1818; transform:rotate(4deg); } body[data-struct="malevich"] .skin-structure-layer:nth-child(2){ top:42vh; right:8vw; width:22vw; height:7vw; background:rgba(204,43,29,.18); transform:rotate(-12deg); } body[data-struct="malevich"] .skin-structure-layer:nth-child(3){ bottom:12vh; left:18vw; width:28vw; height:11vw; background:rgba(27,58,115,.10); transform:rotate(9deg); } :root[data-skin="malevich"] .site-header{ position:relative; background:rgba(251,248,241,.94); border-bottom:1px solid var(--line-strong); box-shadow:14px 14px 0 rgba(204,43,29,.10); } :root[data-skin="malevich"] .site-header::after{ content:""; position:absolute; right:8vw; bottom:-18px; width:64px; height:18px; background:var(--accent); transform:skewX(-18deg); } :root[data-skin="malevich"] .nav{ align-items:flex-start; padding-block:22px; } :root[data-skin="malevich"] .brand{ font-family:var(--sans); font-weight:800; text-transform:uppercase; letter-spacing:.16em; color:var(--ink); } :root[data-skin="malevich"] .nav-links a{ color:var(--ink); font-family:var(--mono); text-transform:uppercase; letter-spacing:.1em; } :root[data-skin="malevich"] .nav-links a::after{ height:6px; background:var(--accent); transform:skewX(-24deg); } :root[data-skin="malevich"] .nav-right{ align-self:center; } :root[data-skin="malevich"] .cart-btn{ border:1px solid var(--ink); background:#fff; box-shadow:6px 6px 0 var(--accent); border-radius:0; } :root[data-skin="malevich"] .hero{ position:relative; padding-block:14vh 12vh; overflow:hidden; } :root[data-skin="malevich"] .hero::before{ content:""; position:absolute; top:8vh; left:10vw; width:9vw; height:9vw; min-width:70px; min-height:70px; background:var(--ink); transform:rotate(4deg); } :root[data-skin="malevich"] .hero::after{ content:""; position:absolute; right:9vw; bottom:10vh; width:26vw; height:7vw; background:var(--accent); transform:rotate(-10deg); opacity:.86; } :root[data-skin="malevich"] .hero-grid{ align-items:center; gap:9vw; } :root[data-skin="malevich"] .hero h1{ font-family:var(--sans); font-weight:900; text-transform:uppercase; letter-spacing:.06em; max-width:10ch; } :root[data-skin="malevich"] .hero .lead{ max-width:48ch; color:var(--ink-soft); } :root[data-skin="malevich"] .eyebrow{ font-family:var(--mono); color:var(--accent); text-transform:uppercase; letter-spacing:.18em; } :root[data-skin="malevich"] .hero-cta{ align-items:center; gap:18px; } :root[data-skin="malevich"] .hero-art, :root[data-skin="malevich"] .card-media, :root[data-skin="malevich"] .about-portrait{ background:#fff; padding:16px 16px 22px; border-radius:0; box-shadow:inset 0 0 0 1px var(--line-strong), 18px 18px 0 rgba(26,24,24,.08); } :root[data-skin="malevich"] .section{ position:relative; padding-block:12vh; } :root[data-skin="malevich"] .section--alt{ background:var(--surface); border-block:1px solid var(--line); } :root[data-skin="malevich"] .section--showcase{ background:linear-gradient(135deg, transparent 0 78%, rgba(204,43,29,.12) 78% 100%); } :root[data-skin="malevich"] .section-head{ align-items:flex-end; border-top:8px solid var(--ink); padding-top:24px; } :root[data-skin="malevich"] .section-head h2{ font-family:var(--sans); font-weight:900; text-transform:uppercase; letter-spacing:.05em; } :root[data-skin="malevich"] .btn{ border-radius:0; font-family:var(--mono); text-transform:uppercase; letter-spacing:.08em; } :root[data-skin="malevich"] .btn-primary{ background:var(--ink); color:#fff; border-color:var(--ink); box-shadow:8px 8px 0 var(--accent); } :root[data-skin="malevich"] .btn-ghost{ background:#fff; color:var(--ink); border-color:var(--ink); } :root[data-skin="malevich"] input, :root[data-skin="malevich"] select, :root[data-skin="malevich"] textarea{ border-radius:0; border:1px solid var(--ink); background:#fff; } :root[data-skin="malevich"] .site-footer{ position:relative; background:var(--ink); color:#fff; border-top:16px solid var(--accent); } :root[data-skin="malevich"] .site-footer a{ color:#fff; text-transform:uppercase; letter-spacing:.08em; } :root[data-skin="malevich"] .site-footer h4{ color:#fff; font-family:var(--sans); text-transform:uppercase; letter-spacing:.12em; } /* ---- kandinsky (inner necessity: points, lines, planes and color-chords animate the page). Uses 4 scaffold layers. ---- */ body[data-struct="kandinsky"] .skin-structure-layer:nth-child(1){ top:12vh; left:8vw; width:110px; height:110px; border-radius:50%; background:rgba(27,58,140,.16); } body[data-struct="kandinsky"] .skin-structure-layer:nth-child(2){ top:30vh; right:10vw; width:0; height:0; border-left:80px solid transparent; border-right:80px solid transparent; border-bottom:140px solid rgba(224,165,0,.18); } body[data-struct="kandinsky"] .skin-structure-layer:nth-child(3){ bottom:18vh; left:14vw; width:34vw; height:3px; background:rgba(200,40,28,.32); transform:rotate(-24deg); } body[data-struct="kandinsky"] .skin-structure-layer:nth-child(4){ bottom:6vh; right:18vw; width:22vw; height:22vw; border:3px solid rgba(27,58,140,.18); border-radius:50%; } :root[data-skin="kandinsky"] .site-header{ background:rgba(253,249,237,.94); border-bottom:1px solid var(--line-strong); } :root[data-skin="kandinsky"] .nav{ gap:34px; } :root[data-skin="kandinsky"] .brand{ font-family:var(--sans); font-weight:700; letter-spacing:.04em; color:var(--accent-deep); } :root[data-skin="kandinsky"] .nav-links a{ color:var(--ink); letter-spacing:.03em; } :root[data-skin="kandinsky"] .nav-links a::after{ height:3px; background:linear-gradient(90deg, var(--accent), #E0A500, var(--accent-deep)); border-radius:999px; } :root[data-skin="kandinsky"] .nav-right{ gap:16px; } :root[data-skin="kandinsky"] .cart-btn{ border-color:var(--accent-deep); background:var(--surface); border-radius:999px; box-shadow:0 0 0 6px rgba(27,58,140,.08); } :root[data-skin="kandinsky"] .hero{ position:relative; padding-block:12vh; background:radial-gradient(circle at 82% 24%, rgba(27,58,140,.11), transparent 22%), linear-gradient(145deg, rgba(224,165,0,.10), transparent 42%); } :root[data-skin="kandinsky"] .hero-grid{ gap:7vw; align-items:center; } :root[data-skin="kandinsky"] .hero h1{ font-family:var(--sans); font-weight:700; line-height:.95; color:var(--ink); text-shadow:10px 0 0 rgba(224,165,0,.12); } :root[data-skin="kandinsky"] .hero .lead{ color:var(--ink-soft); border-left:4px solid var(--accent); padding-left:22px; } :root[data-skin="kandinsky"] .hero .eyebrow, :root[data-skin="kandinsky"] .eyebrow{ font-family:var(--mono); color:var(--accent-deep); text-transform:uppercase; letter-spacing:.14em; } :root[data-skin="kandinsky"] .hero-cta{ gap:14px; } :root[data-skin="kandinsky"] .hero-art, :root[data-skin="kandinsky"] .card-media, :root[data-skin="kandinsky"] .about-portrait{ background:var(--surface); padding:16px; border:1px solid var(--line-strong); border-radius:28px 4px 28px 4px; box-shadow:14px 14px 0 rgba(27,58,140,.10), -10px -10px 0 rgba(224,165,0,.12); } :root[data-skin="kandinsky"] .section{ position:relative; padding-block:11vh; } :root[data-skin="kandinsky"] .section::before{ content:""; position:absolute; top:32px; left:8vw; width:22px; height:22px; border-radius:50%; background:var(--accent); opacity:.8; } :root[data-skin="kandinsky"] .section--alt{ background:linear-gradient(120deg, var(--surface) 0 62%, rgba(224,165,0,.14) 62% 100%); border-block:1px solid var(--line); } :root[data-skin="kandinsky"] .section--showcase{ background:radial-gradient(circle at 12% 18%, rgba(27,58,140,.10), transparent 18%); } :root[data-skin="kandinsky"] .section-head{ gap:18px; } :root[data-skin="kandinsky"] .section-head h2{ font-family:var(--sans); font-weight:700; color:var(--accent-deep); } :root[data-skin="kandinsky"] .btn{ border-radius:999px; font-weight:700; } :root[data-skin="kandinsky"] .btn-primary{ background:var(--accent); color:#fff; border-color:var(--accent); box-shadow:0 0 0 6px rgba(200,40,28,.12); } :root[data-skin="kandinsky"] .btn-ghost{ background:var(--surface); color:var(--accent-deep); border-color:var(--accent-deep); } :root[data-skin="kandinsky"] input, :root[data-skin="kandinsky"] select, :root[data-skin="kandinsky"] textarea{ border-radius:18px; border:1px solid var(--line-strong); background:var(--surface); } :root[data-skin="kandinsky"] .site-footer{ background:var(--ink); color:#fff; border-top:6px solid var(--accent-deep); } :root[data-skin="kandinsky"] .site-footer a{ color:#F8F3E3; } :root[data-skin="kandinsky"] .site-footer h4{ color:#E0A500; font-family:var(--sans); } /* ---- albers (interaction of colour: disciplined nested squares make perception relative). Uses 2 scaffold layers. ---- */ body[data-struct="albers"] .skin-structure-layer:nth-child(1){ top:14vh; left:7vw; width:30vw; height:30vw; background:#D4A820; box-shadow:inset 0 0 0 5vw #C47318, inset 0 0 0 10vw #A03818; opacity:.16; } body[data-struct="albers"] .skin-structure-layer:nth-child(2){ bottom:8vh; right:8vw; width:24vw; height:24vw; background:#EFE1BC; box-shadow:inset 0 0 0 4vw #D4A820, inset 0 0 0 8vw #C47318; opacity:.28; } :root[data-skin="albers"] .site-header{ background:var(--surface); border-bottom:12px solid #D4A820; box-shadow:inset 0 -24px 0 #C47318, inset 0 -36px 0 var(--accent); } :root[data-skin="albers"] .nav{ padding-block:30px 18px; align-items:flex-end; } :root[data-skin="albers"] .brand{ font-family:var(--sans); text-transform:uppercase; letter-spacing:.14em; font-weight:400; color:var(--accent); } :root[data-skin="albers"] .nav-links a{ color:var(--ink); font-family:var(--sans); text-transform:uppercase; letter-spacing:.12em; font-size:.82rem; } :root[data-skin="albers"] .nav-links a::after{ height:10px; background:#D4A820; } :root[data-skin="albers"] .nav-right{ align-items:flex-end; } :root[data-skin="albers"] .cart-btn{ border-radius:0; background:#D4A820; color:var(--ink); border:0; box-shadow:inset 0 0 0 8px #C47318, inset 0 0 0 16px var(--accent); } :root[data-skin="albers"] .hero{ padding-block:12vh 14vh; background:linear-gradient(90deg, transparent 0 50%, rgba(212,168,32,.18) 50% 100%); } :root[data-skin="albers"] .hero-grid{ grid-template-columns:minmax(0,.9fr) minmax(280px,.7fr); gap:6vw; align-items:end; } :root[data-skin="albers"] .hero h1{ font-family:var(--sans); text-transform:uppercase; letter-spacing:.08em; font-weight:400; max-width:12ch; } :root[data-skin="albers"] .hero .lead{ max-width:42ch; color:var(--ink-soft); } :root[data-skin="albers"] .hero .eyebrow, :root[data-skin="albers"] .eyebrow{ font-family:var(--mono); color:var(--accent); text-transform:uppercase; letter-spacing:.18em; } :root[data-skin="albers"] .hero-cta{ gap:12px; } :root[data-skin="albers"] .hero-art, :root[data-skin="albers"] .card-media, :root[data-skin="albers"] .about-portrait{ background:#D4A820; padding:46px 34px 30px; border-radius:0; box-shadow:inset 0 0 0 28px #C47318, inset 0 0 0 56px var(--accent); } :root[data-skin="albers"] .section{ padding-block:10vh; } :root[data-skin="albers"] .section--alt{ background:var(--surface); box-shadow:inset 0 28px 0 #D4A820, inset 0 56px 0 #C47318; border-block:none; } :root[data-skin="albers"] .section--showcase{ background:linear-gradient(180deg, rgba(160,56,24,.10), transparent 38%); } :root[data-skin="albers"] .section-head{ max-width:720px; margin-inline:auto; text-align:center; } :root[data-skin="albers"] .section-head h2{ font-family:var(--sans); text-transform:uppercase; letter-spacing:.13em; font-weight:400; } :root[data-skin="albers"] .btn{ border-radius:0; font-family:var(--sans); text-transform:uppercase; letter-spacing:.12em; font-weight:400; } :root[data-skin="albers"] .btn-primary{ background:var(--accent); color:#fff; border-color:var(--accent); box-shadow:inset 0 0 0 8px #C47318; } :root[data-skin="albers"] .btn-ghost{ background:#D4A820; color:var(--ink); border-color:#D4A820; } :root[data-skin="albers"] input, :root[data-skin="albers"] select, :root[data-skin="albers"] textarea{ border-radius:0; border:2px solid var(--line-strong); background:var(--surface); } :root[data-skin="albers"] .site-footer{ background:var(--accent); color:#fff; border-top:28px solid #D4A820; box-shadow:inset 0 28px 0 #C47318; } :root[data-skin="albers"] .site-footer a{ color:#fff; } :root[data-skin="albers"] .site-footer h4{ color:#F5EDD0; font-family:var(--sans); text-transform:uppercase; letter-spacing:.12em; } /* ---- agnes-martin (innocent grid: silence, faint washes and pencil-like restraint). Uses 1 scaffold layer. ---- */ body[data-struct="agnes-martin"] .skin-structure-layer:nth-child(1){ background-image:repeating-linear-gradient(0deg, rgba(74,68,64,.055) 0 1px, transparent 1px 72px), repeating-linear-gradient(90deg, rgba(74,68,64,.045) 0 1px, transparent 1px 72px); } :root[data-skin="agnes-martin"] .site-header{ background:rgba(250,247,239,.88); border-bottom:1px solid var(--line); box-shadow:none; } :root[data-skin="agnes-martin"] .nav{ padding-block:26px; } :root[data-skin="agnes-martin"] .brand{ font-family:var(--sans); font-weight:200; letter-spacing:.22em; text-transform:lowercase; color:var(--ink-soft); } :root[data-skin="agnes-martin"] .nav-links a{ color:var(--ink-soft); font-weight:300; letter-spacing:.16em; text-transform:lowercase; } :root[data-skin="agnes-martin"] .nav-links a::after{ height:1px; background:var(--line-strong); } :root[data-skin="agnes-martin"] .nav-right{ opacity:.82; } :root[data-skin="agnes-martin"] .cart-btn{ border:1px solid var(--line-strong); background:transparent; color:var(--ink-soft); border-radius:0; box-shadow:none; } :root[data-skin="agnes-martin"] .hero{ padding-block:16vh; background:linear-gradient(180deg, transparent, rgba(237,229,200,.20)); } :root[data-skin="agnes-martin"] .hero-grid{ gap:8vw; align-items:center; } :root[data-skin="agnes-martin"] .hero h1{ font-family:var(--sans); font-weight:200; letter-spacing:.08em; text-transform:lowercase; color:var(--ink); } :root[data-skin="agnes-martin"] .hero .lead{ max-width:44ch; color:var(--ink-soft); line-height:2; } :root[data-skin="agnes-martin"] .hero .eyebrow, :root[data-skin="agnes-martin"] .eyebrow{ font-family:var(--mono); font-weight:300; color:var(--ink-faint); letter-spacing:.22em; text-transform:lowercase; } :root[data-skin="agnes-martin"] .hero-cta{ gap:18px; } :root[data-skin="agnes-martin"] .hero-art, :root[data-skin="agnes-martin"] .card-media, :root[data-skin="agnes-martin"] .about-portrait{ background:transparent; padding:34px; border-radius:0; border-top:1px solid var(--line-strong); border-bottom:1px solid var(--line-strong); box-shadow:none; } :root[data-skin="agnes-martin"] .section{ padding-block:14vh; border-top:1px solid rgba(184,176,160,.55); } :root[data-skin="agnes-martin"] .section--alt{ background:rgba(237,229,200,.28); border-block:1px solid rgba(184,176,160,.55); } :root[data-skin="agnes-martin"] .section--showcase{ background:linear-gradient(90deg, rgba(216,228,236,.22), transparent 40%, rgba(239,224,216,.18)); } :root[data-skin="agnes-martin"] .section-head{ max-width:760px; padding-bottom:28px; border-bottom:1px solid var(--line); } :root[data-skin="agnes-martin"] .section-head h2{ font-family:var(--sans); font-weight:200; letter-spacing:.16em; text-transform:lowercase; color:var(--ink); } :root[data-skin="agnes-martin"] .btn{ border-radius:0; font-weight:300; letter-spacing:.12em; text-transform:lowercase; } :root[data-skin="agnes-martin"] .btn-primary{ background:var(--ink); color:var(--bg); border-color:var(--ink); } :root[data-skin="agnes-martin"] .btn-ghost{ background:transparent; color:var(--ink-soft); border-color:var(--line-strong); } :root[data-skin="agnes-martin"] input, :root[data-skin="agnes-martin"] select, :root[data-skin="agnes-martin"] textarea{ border-radius:0; border:1px solid var(--line-strong); background:rgba(250,247,239,.72); color:var(--ink); } :root[data-skin="agnes-martin"] .site-footer{ background:var(--surface); color:var(--ink-soft); border-top:1px solid var(--line-strong); } :root[data-skin="agnes-martin"] .site-footer a{ color:var(--ink-soft); } :root[data-skin="agnes-martin"] .site-footer h4{ color:var(--ink); font-family:var(--sans); font-weight:200; letter-spacing:.18em; text-transform:lowercase; } /* ---- klein (IKB void: the monochrome ground is the immaterial artwork). Uses 2 scaffold layers. ---- */ body[data-struct="klein"] #skin-structure{ background:#002FA7; } body[data-struct="klein"] .skin-structure-layer:nth-child(1){ inset:-20vh -10vw auto auto; width:56vw; height:56vw; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.12), transparent 62%); } body[data-struct="klein"] .skin-structure-layer:nth-child(2){ bottom:6vh; left:8vw; width:36vw; height:1px; background:linear-gradient(90deg, transparent, rgba(240,124,158,.9), transparent); } :root[data-skin="klein"] .site-header{ background:rgba(0,47,167,.94); border-bottom:1px solid rgba(255,255,255,.20); box-shadow:0 24px 80px rgba(0,0,0,.18); } :root[data-skin="klein"] .nav{ padding-block:32px; } :root[data-skin="klein"] .brand{ font-family:var(--sans); font-weight:300; letter-spacing:.34em; text-transform:uppercase; color:#fff; } :root[data-skin="klein"] .nav-links a{ color:#fff; font-weight:300; text-transform:uppercase; letter-spacing:.24em; } :root[data-skin="klein"] .nav-links a::after{ height:1px; background:var(--accent); } :root[data-skin="klein"] .nav-right{ opacity:.9; } :root[data-skin="klein"] .cart-btn{ background:transparent; color:#fff; border:1px solid var(--accent); border-radius:999px; } :root[data-skin="klein"] .hero{ padding-block:18vh 16vh; background:#002FA7; } :root[data-skin="klein"] .hero-grid{ gap:10vw; align-items:center; } :root[data-skin="klein"] .hero h1{ font-family:var(--sans); font-weight:300; text-transform:uppercase; letter-spacing:.2em; color:#fff; max-width:11ch; } :root[data-skin="klein"] .hero .lead{ max-width:38ch; color:var(--ink-soft); line-height:2; } :root[data-skin="klein"] .hero .eyebrow, :root[data-skin="klein"] .eyebrow{ font-family:var(--mono); color:var(--ink-soft); text-transform:uppercase; letter-spacing:.28em; } :root[data-skin="klein"] .hero-cta{ gap:18px; } :root[data-skin="klein"] .hero-art, :root[data-skin="klein"] .card-media, :root[data-skin="klein"] .about-portrait{ background:#002FA7; padding:8vh 3vw; border-radius:0; border-top:1px solid var(--accent); box-shadow:0 0 80px rgba(255,255,255,.10); } :root[data-skin="klein"] .section{ padding-block:16vh; background:#002FA7; } :root[data-skin="klein"] .section--alt{ background:#002FA7; border-block:1px solid rgba(255,255,255,.16); } :root[data-skin="klein"] .section--showcase{ background:radial-gradient(circle at 50% 12%, rgba(255,255,255,.10), transparent 34%), #002FA7; } :root[data-skin="klein"] .section-head{ justify-content:center; text-align:center; } :root[data-skin="klein"] .section-head h2{ font-family:var(--sans); font-weight:300; text-transform:uppercase; letter-spacing:.22em; color:#fff; } :root[data-skin="klein"] .btn{ border-radius:999px; font-weight:300; text-transform:uppercase; letter-spacing:.2em; } :root[data-skin="klein"] .btn-primary{ background:#fff; color:#002FA7; border-color:#fff; } :root[data-skin="klein"] .btn-ghost{ background:transparent; color:#fff; border-color:var(--accent); } :root[data-skin="klein"] input, :root[data-skin="klein"] select, :root[data-skin="klein"] textarea{ border-radius:0; border:1px solid rgba(255,255,255,.38); background:rgba(255,255,255,.08); color:#fff; } :root[data-skin="klein"] .site-footer{ background:#002FA7; color:#fff; border-top:1px solid var(--accent); } :root[data-skin="klein"] .site-footer a{ color:#fff; } :root[data-skin="klein"] .site-footer h4{ color:var(--ink-soft); font-family:var(--sans); font-weight:300; text-transform:uppercase; letter-spacing:.24em; } /* ---- kelly (hard-edge object-colour: flat shapes replace gesture and hierarchy). Uses 3 scaffold layers. ---- */ body[data-struct="kelly"] .skin-structure-layer:nth-child(1){ top:0; left:0; width:28vw; height:48vh; background:#FFB300; } body[data-struct="kelly"] .skin-structure-layer:nth-child(2){ top:18vh; right:0; width:24vw; height:64vh; background:#4354B6; } body[data-struct="kelly"] .skin-structure-layer:nth-child(3){ bottom:0; left:34vw; width:32vw; height:24vh; background:#39B54A; } :root[data-skin="kelly"] .site-header{ background:#fff; border-bottom:0; box-shadow:inset 0 -18px 0 #FF3B30; } :root[data-skin="kelly"] .nav{ padding-block:28px 22px; } :root[data-skin="kelly"] .brand{ font-family:var(--sans); font-weight:400; letter-spacing:.03em; color:#111; } :root[data-skin="kelly"] .nav-links a{ color:#111; font-family:var(--sans); letter-spacing:.02em; } :root[data-skin="kelly"] .nav-links a::after{ height:8px; background:#009CA6; } :root[data-skin="kelly"] .nav-right{ gap:0; } :root[data-skin="kelly"] .cart-btn{ border:0; border-radius:0; background:#FFB300; color:#111; } :root[data-skin="kelly"] .hero{ padding-block:0; background:#fff; } :root[data-skin="kelly"] .hero-grid{ min-height:72vh; gap:0; align-items:stretch; } :root[data-skin="kelly"] .hero-grid > *:first-child{ padding:8vw; background:#F8F8F8; } :root[data-skin="kelly"] .hero h1{ font-family:var(--sans); font-weight:400; letter-spacing:.01em; color:#111; max-width:9ch; } :root[data-skin="kelly"] .hero .lead{ color:#111; max-width:36ch; } :root[data-skin="kelly"] .hero .eyebrow, :root[data-skin="kelly"] .eyebrow{ font-family:var(--sans); color:#111; letter-spacing:.08em; } :root[data-skin="kelly"] .hero-cta{ gap:0; } :root[data-skin="kelly"] .hero-art, :root[data-skin="kelly"] .card-media, :root[data-skin="kelly"] .about-portrait{ background:#FFB300; padding:26px; border-radius:0; box-shadow:none; } :root[data-skin="kelly"] .section{ padding-block:0; background:#fff; } :root[data-skin="kelly"] .section--alt{ background:#009CA6; border-block:0; color:#111; } :root[data-skin="kelly"] .section--showcase{ background:#39B54A; color:#111; } :root[data-skin="kelly"] .section-head{ padding:6vw; background:#FF3B30; color:#111; } :root[data-skin="kelly"] .section-head h2{ font-family:var(--sans); font-weight:400; letter-spacing:.02em; color:#111; } :root[data-skin="kelly"] .btn{ border-radius:0; font-family:var(--sans); font-weight:400; } :root[data-skin="kelly"] .btn-primary{ background:#111; color:#fff; border-color:#111; } :root[data-skin="kelly"] .btn-ghost{ background:#fff; color:#111; border-color:#111; } :root[data-skin="kelly"] input, :root[data-skin="kelly"] select, :root[data-skin="kelly"] textarea{ border-radius:0; border:0; background:#fff; color:#111; } :root[data-skin="kelly"] .site-footer{ background:#111; color:#fff; border-top:0; box-shadow:inset 0 28px 0 #4354B6; } :root[data-skin="kelly"] .site-footer a{ color:#fff; } :root[data-skin="kelly"] .site-footer h4{ color:#FFB300; font-family:var(--sans); font-weight:400; } /* ---- judd (specific objects: serial stacks, factual intervals and machined edges). Uses 2 scaffold layers. ---- */ body[data-struct="judd"] .skin-structure-layer:nth-child(1){ top:12vh; right:8vw; width:12vw; height:64vh; background:repeating-linear-gradient(180deg, rgba(200,202,204,.42) 0 56px, transparent 56px 112px); border-left:1px solid rgba(26,26,26,.18); border-right:1px solid rgba(26,26,26,.18); } body[data-struct="judd"] .skin-structure-layer:nth-child(2){ bottom:10vh; left:7vw; width:32vw; height:1px; background:rgba(26,26,26,.24); box-shadow:0 -18vh 0 rgba(26,26,26,.18), 0 -36vh 0 rgba(26,26,26,.12); } :root[data-skin="judd"] .site-header{ background:var(--surface); border-bottom:1px solid var(--line-strong); box-shadow:none; } :root[data-skin="judd"] .nav{ padding-block:24px; align-items:center; } :root[data-skin="judd"] .brand{ font-family:var(--sans); font-weight:400; text-transform:uppercase; letter-spacing:.08em; color:var(--ink); } :root[data-skin="judd"] .nav-links a{ color:var(--ink); font-family:var(--sans); text-transform:uppercase; letter-spacing:.06em; font-size:.86rem; } :root[data-skin="judd"] .nav-links a::after{ height:1px; background:var(--ink); } :root[data-skin="judd"] .nav-right{ gap:12px; } :root[data-skin="judd"] .cart-btn{ border-radius:0; background:#C8CACC; border:1px solid var(--line-strong); box-shadow:inset 0 0 0 4px var(--accent); } :root[data-skin="judd"] .hero{ padding-block:14vh; border-bottom:1px solid var(--line-strong); } :root[data-skin="judd"] .hero-grid{ grid-template-columns:minmax(0,1fr) minmax(280px,420px); gap:60vh; align-items:start; } :root[data-skin="judd"] .hero h1{ font-family:var(--sans); font-weight:400; text-transform:uppercase; letter-spacing:.04em; max-width:12ch; } :root[data-skin="judd"] .hero .lead{ max-width:42ch; color:var(--ink-soft); } :root[data-skin="judd"] .hero .eyebrow, :root[data-skin="judd"] .eyebrow{ font-family:var(--mono); color:var(--ink-faint); text-transform:uppercase; letter-spacing:.12em; } :root[data-skin="judd"] .hero-cta{ gap:20px; } :root[data-skin="judd"] .hero-art, :root[data-skin="judd"] .card-media, :root[data-skin="judd"] .about-portrait{ background:#C8CACC; padding:20px; border-radius:0; box-shadow:inset 0 0 0 4px var(--accent); } :root[data-skin="judd"] .section{ padding-block:18vh; border-bottom:1px solid var(--line-strong); } :root[data-skin="judd"] .section--alt{ background:var(--surface); border-block:1px solid var(--line-strong); } :root[data-skin="judd"] .section--showcase{ background:linear-gradient(90deg, transparent 0 72%, rgba(200,202,204,.55) 72% 100%); } :root[data-skin="judd"] .section-head{ border-top:1px solid var(--line-strong); border-bottom:1px solid var(--line-strong); padding-block:20px; } :root[data-skin="judd"] .section-head h2{ font-family:var(--sans); font-weight:400; text-transform:uppercase; letter-spacing:.06em; } :root[data-skin="judd"] .btn{ border-radius:0; font-family:var(--sans); text-transform:uppercase; letter-spacing:.06em; font-weight:400; } :root[data-skin="judd"] .btn-primary{ background:#C8CACC; color:var(--ink); border-color:var(--line-strong); box-shadow:inset 0 0 0 4px var(--accent); } :root[data-skin="judd"] .btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line-strong); } :root[data-skin="judd"] input, :root[data-skin="judd"] select, :root[data-skin="judd"] textarea{ border-radius:0; border:1px solid var(--line-strong); background:#C8CACC; color:var(--ink); } :root[data-skin="judd"] .site-footer{ background:var(--surface-2); color:var(--ink); border-top:1px solid var(--line-strong); } :root[data-skin="judd"] .site-footer a{ color:var(--ink); } :root[data-skin="judd"] .site-footer h4{ color:var(--ink); font-family:var(--sans); text-transform:uppercase; letter-spacing:.06em; font-weight:400; } /* ---- matisse (cut-outs: joyful painted-paper shapes pinned to a white studio wall). Uses 4 scaffold layers. ---- */ body[data-struct="matisse"] .skin-structure-layer:nth-child(1){ top:10vh; left:4vw; width:18vw; height:28vw; background:#007BA7; border-radius:58% 42% 64% 36% / 48% 60% 40% 52%; transform:rotate(-10deg); } body[data-struct="matisse"] .skin-structure-layer:nth-child(2){ top:16vh; right:6vw; width:22vw; height:16vw; background:#F5C400; border-radius:46% 54% 38% 62% / 60% 42% 58% 40%; transform:rotate(12deg); } body[data-struct="matisse"] .skin-structure-layer:nth-child(3){ bottom:10vh; left:18vw; width:20vw; height:18vw; background:#E83070; clip-path:polygon(50% 0, 62% 34%, 100% 28%, 70% 52%, 86% 88%, 50% 66%, 14% 88%, 30% 52%, 0 28%, 38% 34%); } body[data-struct="matisse"] .skin-structure-layer:nth-child(4){ bottom:8vh; right:16vw; width:26vw; height:12vw; background:#00A86B; border-radius:70% 30% 60% 40% / 45% 60% 40% 55%; transform:rotate(-6deg); } :root[data-skin="matisse"] .site-header{ background:#F8F8F5; border-bottom:0; box-shadow:inset 0 -16px 0 #007BA7; } :root[data-skin="matisse"] .nav{ padding-block:24px 34px; } :root[data-skin="matisse"] .brand{ font-family:var(--sans); font-weight:800; color:#CC2020; letter-spacing:.02em; } :root[data-skin="matisse"] .nav-links a{ color:#111; font-weight:700; } :root[data-skin="matisse"] .nav-links a::after{ height:10px; background:#F5C400; border-radius:999px 40% 999px 50%; } :root[data-skin="matisse"] .nav-right{ gap:16px; } :root[data-skin="matisse"] .cart-btn{ border:0; background:#00A86B; color:#fff; border-radius:999px 45% 999px 55%; box-shadow:8px 8px 0 #1A2E8C; } :root[data-skin="matisse"] .hero{ position:relative; padding-block:10vh 12vh; background:#F8F8F5; overflow:hidden; } :root[data-skin="matisse"] .hero::before{ content:""; position:absolute; top:8vh; left:48vw; width:16vw; height:12vw; background:#F5C400; border-radius:45% 55% 48% 52%; transform:rotate(18deg); } :root[data-skin="matisse"] .hero-grid{ gap:5vw; align-items:center; } :root[data-skin="matisse"] .hero h1{ font-family:var(--sans); font-weight:900; color:#111; line-height:.92; max-width:10ch; } :root[data-skin="matisse"] .hero .lead{ max-width:44ch; color:var(--ink-soft); font-weight:700; } :root[data-skin="matisse"] .hero .eyebrow, :root[data-skin="matisse"] .eyebrow{ font-family:var(--mono); color:#007BA7; text-transform:uppercase; letter-spacing:.16em; } :root[data-skin="matisse"] .hero-cta{ gap:18px; } :root[data-skin="matisse"] .hero-art, :root[data-skin="matisse"] .card-media, :root[data-skin="matisse"] .about-portrait{ background:#F8F8F5; padding:12px; border-radius:18px 42px 16px 36px; box-shadow:16px 16px 0 #007BA7, -12px 14px 0 #CC2020; } :root[data-skin="matisse"] .section{ padding-block:10vh; } :root[data-skin="matisse"] .section--alt{ background:#007BA7; color:#F8F8F5; border-block:0; } :root[data-skin="matisse"] .section--showcase{ background:linear-gradient(135deg, #F8F8F5 0 58%, #F5C400 58% 100%); } :root[data-skin="matisse"] .section-head{ padding:26px; background:#CC2020; color:#F8F8F5; border-radius:36px 12px 42px 18px; } :root[data-skin="matisse"] .section-head h2{ font-family:var(--sans); font-weight:900; color:#F8F8F5; } :root[data-skin="matisse"] .btn{ border-radius:999px 44% 999px 56%; font-family:var(--sans); font-weight:800; } :root[data-skin="matisse"] .btn-primary{ background:#CC2020; color:#F8F8F5; border-color:#CC2020; box-shadow:7px 7px 0 #F5C400; } :root[data-skin="matisse"] .btn-ghost{ background:#007BA7; color:#F8F8F5; border-color:#007BA7; } :root[data-skin="matisse"] input, :root[data-skin="matisse"] select, :root[data-skin="matisse"] textarea{ border-radius:24px 10px 28px 12px; border:2px solid #111; background:#F8F8F5; } :root[data-skin="matisse"] .site-footer{ background:#1A2E8C; color:#F8F8F5; border-top:0; box-shadow:inset 0 18px 0 #E83070; } :root[data-skin="matisse"] .site-footer a{ color:#F8F8F5; font-weight:700; } :root[data-skin="matisse"] .site-footer h4{ color:#F5C400; font-family:var(--sans); font-weight:900; } /* ===== p14-design-photo.css ===== */ /* ============================================================================ STRUCTURAL SKINS — PART 14 (Design & Photography). Whole-site structural layers for eames, bass, noguchi, ansel-adams, cartier-bresson, and penn. Every rule is scoped; photos are matted, never cropped. ============================================================================ */ /* ---- eames (playful democratic problem-solving; multimedia hospitality) ---- */ body[data-struct="eames"] .skin-structure-layer:nth-child(1){ background-image: linear-gradient(90deg, rgba(26,26,26,.055) 0 1px, transparent 1px), linear-gradient(0deg, rgba(26,26,26,.045) 0 1px, transparent 1px); background-size:clamp(86px,10vw,136px) clamp(86px,10vw,136px); } body[data-struct="eames"] .skin-structure-layer:nth-child(2){ top:10vh; left:5vw; width:min(52vw,680px); height:min(38vh,360px); background: linear-gradient(90deg,#C82B1A 0 30%,#F0C12C 30% 43%,#1B558A 43% 56%,rgba(250,246,238,.78) 56% 100%); opacity:.14; border:2px solid rgba(26,26,26,.18); transform:translateZ(0); } :root[data-skin="eames"] .site-header{ background:color-mix(in srgb,var(--surface) 94%,transparent); border-bottom:2px solid var(--ink); box-shadow:0 8px 0 var(--accent-soft); } :root[data-skin="eames"] .nav{ height:74px; gap:clamp(18px,3vw,36px); } :root[data-skin="eames"] .brand{ font-family:var(--sans); font-weight:800; letter-spacing:.01em; padding:.35em .5em; background:var(--surface); border:2px solid var(--ink); box-shadow:6px 6px 0 #F0C12C; } :root[data-skin="eames"] .brand span{ color:#1B558A; } :root[data-skin="eames"] .nav-links{ gap:12px; } :root[data-skin="eames"] .nav-links a{ color:var(--ink); font-weight:700; padding:8px 10px; border:1px solid transparent; } :root[data-skin="eames"] .nav-links a::after{ left:10px; right:10px; bottom:4px; width:auto; height:4px; background:linear-gradient(90deg,#C82B1A,#F0C12C,#1B558A); transform:scaleX(0); transform-origin:left; transition:transform .25s var(--ease); } :root[data-skin="eames"] .nav-links a:hover::after, :root[data-skin="eames"] .nav-links a[aria-current="page"]::after{ width:auto; transform:scaleX(1); } :root[data-skin="eames"] .nav-right{ gap:14px; } :root[data-skin="eames"] .cart-btn{ border:2px solid var(--ink); background:var(--surface); padding:8px 11px; font-weight:800; box-shadow:4px 4px 0 #1B558A; } :root[data-skin="eames"] .hero{ padding-block:clamp(54px,8vw,108px); } :root[data-skin="eames"] .hero-grid{ grid-template-columns:minmax(0,1fr) minmax(280px,.82fr); gap:clamp(24px,4vw,52px); align-items:end; } :root[data-skin="eames"] .hero .eyebrow, :root[data-skin="eames"] .eyebrow{ color:var(--accent); font-weight:800; letter-spacing:.18em; } :root[data-skin="eames"] .hero h1{ font-family:var(--sans); font-weight:900; letter-spacing:-.045em; line-height:.94; max-width:10ch; } :root[data-skin="eames"] .hero .lead{ max-width:50ch; color:var(--ink-soft); border-left:12px solid #F0C12C; padding-left:18px; } :root[data-skin="eames"] .hero-cta{ align-items:center; gap:12px; } :root[data-skin="eames"] .hero-art, :root[data-skin="eames"] .card-media, :root[data-skin="eames"] .about-portrait{ aspect-ratio:auto; overflow:visible; background:#FAF6EE; padding:clamp(12px,2vw,20px); border:2px solid var(--ink); box-shadow:10px 10px 0 var(--accent-soft); } :root[data-skin="eames"] .hero-art img, :root[data-skin="eames"] .card-media img, :root[data-skin="eames"] .about-portrait img{ width:100%; height:auto; object-fit:contain; } :root[data-skin="eames"] .section{ padding-block:clamp(52px,7vw,94px); } :root[data-skin="eames"] .section--alt{ background:var(--surface); border-block:2px solid var(--ink); } :root[data-skin="eames"] .section--showcase{ background:linear-gradient(135deg,var(--surface) 0 55%,var(--accent-soft) 55%); } :root[data-skin="eames"] .section--showcase .section-head h2, :root[data-skin="eames"] .section--showcase .link-arrow{ color:var(--ink); } :root[data-skin="eames"] .section-head{ align-items:start; border-top:12px solid transparent; border-image:linear-gradient(90deg,#1A1A1A 0 24%,#C82B1A 24% 42%,#F0C12C 42% 52%,#1B558A 52% 62%,#C8B89A 62% 100%) 1; padding-top:18px; } :root[data-skin="eames"] .section-head h2{ font-family:var(--sans); font-weight:900; letter-spacing:-.03em; } :root[data-skin="eames"] .btn, :root[data-skin="eames"] .btn-primary, :root[data-skin="eames"] .btn--accent{ border:2px solid var(--ink); background:var(--accent); color:#fff; border-radius:0; box-shadow:5px 5px 0 #F0C12C; font-weight:800; } :root[data-skin="eames"] .btn-ghost, :root[data-skin="eames"] .btn--ghost{ background:var(--surface); color:var(--ink); box-shadow:5px 5px 0 #1B558A; } :root[data-skin="eames"] input, :root[data-skin="eames"] select, :root[data-skin="eames"] textarea{ border:2px solid var(--ink); background:var(--surface); border-radius:0; } :root[data-skin="eames"] .site-footer{ background:var(--surface); border-top:2px solid var(--ink); box-shadow:inset 0 12px 0 var(--accent-soft); } :root[data-skin="eames"] .site-footer h4{ font-family:var(--sans); text-transform:uppercase; letter-spacing:.12em; color:#1B558A; } :root[data-skin="eames"] .site-footer a{ font-weight:700; text-decoration-thickness:3px; text-decoration-color:#F0C12C; } /* ---- bass (pars-pro-toto: the whole idea compressed into one bold mark) ---- */ body[data-struct="bass"] #skin-structure{ background:#0D0D0D; } body[data-struct="bass"] .skin-structure-layer:nth-child(1){ top:8vh; left:-8vw; width:44vw; height:54vh; background:#E8291C; clip-path:polygon(8% 0,100% 18%,82% 88%,18% 100%,0 38%); opacity:.20; } body[data-struct="bass"] .skin-structure-layer:nth-child(2){ right:-10vw; bottom:6vh; width:48vw; height:28vh; background:#FFAE20; clip-path:polygon(0 18%,100% 0,86% 100%,12% 82%); opacity:.12; } :root[data-skin="bass"] .site-header{ background:#0D0D0D; border-bottom:0; box-shadow:inset 0 -10px 0 var(--accent); } :root[data-skin="bass"] .nav{ height:78px; } :root[data-skin="bass"] .brand{ font-family:var(--sans); color:var(--ink); font-weight:900; text-transform:uppercase; letter-spacing:-.05em; line-height:.85; } :root[data-skin="bass"] .brand span{ color:var(--accent); } :root[data-skin="bass"] .nav-links{ gap:10px; } :root[data-skin="bass"] .nav-links a{ color:var(--ink); text-transform:uppercase; font-weight:900; letter-spacing:-.01em; padding:9px 12px; } :root[data-skin="bass"] .nav-links a::after{ height:100%; bottom:0; z-index:-1; background:var(--accent); clip-path:polygon(0 12%,100% 0,88% 100%,10% 82%); } :root[data-skin="bass"] .nav-links a:hover, :root[data-skin="bass"] .nav-links a[aria-current="page"]{ color:#0D0D0D; } :root[data-skin="bass"] .nav-right{ gap:12px; } :root[data-skin="bass"] .cart-btn{ color:var(--ink); background:var(--accent); padding:9px 13px; text-transform:uppercase; font-weight:900; clip-path:polygon(0 0,100% 8%,94% 100%,6% 88%); } :root[data-skin="bass"] .hero{ padding-block:clamp(64px,10vw,136px); } :root[data-skin="bass"] .hero-grid{ grid-template-columns:.8fr 1fr; gap:clamp(26px,5vw,70px); align-items:center; } :root[data-skin="bass"] .hero .eyebrow, :root[data-skin="bass"] .eyebrow{ color:var(--accent); font-weight:900; letter-spacing:.14em; } :root[data-skin="bass"] .hero h1{ font-family:var(--sans); font-weight:900; text-transform:uppercase; letter-spacing:-.075em; line-height:.78; max-width:9ch; } :root[data-skin="bass"] .hero .lead{ color:var(--ink-soft); max-width:38ch; font-weight:700; } :root[data-skin="bass"] .hero-cta{ gap:10px; } :root[data-skin="bass"] .hero-art, :root[data-skin="bass"] .card-media, :root[data-skin="bass"] .about-portrait{ aspect-ratio:auto; overflow:visible; background:#F5F0E8; padding:clamp(14px,2vw,24px); border:0; box-shadow:16px 16px 0 rgba(232,41,28,.75); } :root[data-skin="bass"] .hero-art{ clip-path:polygon(0 0,100% 4%,96% 100%,4% 92%); } :root[data-skin="bass"] .hero-art img, :root[data-skin="bass"] .card-media img, :root[data-skin="bass"] .about-portrait img{ width:100%; height:auto; object-fit:contain; filter:saturate(.9) contrast(1.08); } :root[data-skin="bass"] .section{ padding-block:clamp(56px,8vw,108px); } :root[data-skin="bass"] .section--alt{ background:#161412; border-block:0; box-shadow:inset 0 10px 0 var(--accent); } :root[data-skin="bass"] .section--showcase{ background:#0D0D0D; } :root[data-skin="bass"] .section-head{ align-items:center; } :root[data-skin="bass"] .section-head::before{ content:""; width:54px; height:36px; background:var(--accent); clip-path:polygon(0 0,100% 20%,84% 100%,12% 78%); flex:0 0 auto; } :root[data-skin="bass"] .section-head h2{ font-family:var(--sans); font-weight:900; text-transform:uppercase; letter-spacing:-.055em; line-height:.85; color:var(--ink); } :root[data-skin="bass"] .section--showcase .section-head h2, :root[data-skin="bass"] .section--showcase .link-arrow{ color:var(--ink); } :root[data-skin="bass"] .btn, :root[data-skin="bass"] .btn-primary, :root[data-skin="bass"] .btn--accent{ background:var(--accent); color:#0D0D0D; border:0; border-radius:0; text-transform:uppercase; font-weight:900; letter-spacing:.02em; clip-path:polygon(0 0,100% 7%,95% 100%,4% 88%); } :root[data-skin="bass"] .btn-ghost, :root[data-skin="bass"] .btn--ghost{ background:#F5F0E8; color:#0D0D0D; } :root[data-skin="bass"] input, :root[data-skin="bass"] select, :root[data-skin="bass"] textarea{ background:#F5F0E8; color:#0D0D0D; border:0; border-radius:0; box-shadow:6px 6px 0 var(--accent); } :root[data-skin="bass"] .site-footer{ background:#0D0D0D; color:var(--ink); border-top:10px solid var(--accent); } :root[data-skin="bass"] .site-footer h4{ color:var(--accent); font-family:var(--sans); text-transform:uppercase; font-weight:900; letter-spacing:-.01em; } :root[data-skin="bass"] .site-footer a{ color:var(--ink); font-weight:900; text-transform:uppercase; } /* ---- noguchi (sculpture defines space; light and void are materials) ---- */ body[data-struct="noguchi"] #skin-structure{ background:#1E1C19; } body[data-struct="noguchi"] .skin-structure-layer:nth-child(1){ top:8vh; right:12vw; width:26vw; height:36vw; max-height:520px; border-radius:50%; background:radial-gradient(ellipse at center, rgba(232,200,128,.28), rgba(196,169,107,.10) 42%, transparent 70%); filter:blur(6px); } body[data-struct="noguchi"] .skin-structure-layer:nth-child(2){ left:8vw; bottom:10vh; width:34vw; height:18vw; border-radius:50%; background:radial-gradient(ellipse at center, rgba(242,236,224,.10), transparent 68%); filter:blur(18px); } body[data-struct="noguchi"] .skin-structure-layer:nth-child(3){ inset:0; background:radial-gradient(circle at 50% 38%, transparent 0 28%, rgba(0,0,0,.22) 82%); } :root[data-skin="noguchi"] .site-header{ background:color-mix(in srgb,var(--bg) 76%,transparent); border-bottom:1px solid rgba(232,200,128,.18); backdrop-filter:blur(18px); } :root[data-skin="noguchi"] .nav{ height:86px; } :root[data-skin="noguchi"] .brand{ font-family:var(--sans); font-weight:300; letter-spacing:.18em; color:var(--ink); } :root[data-skin="noguchi"] .brand span{ color:var(--accent); } :root[data-skin="noguchi"] .nav-links{ gap:clamp(22px,4vw,52px); } :root[data-skin="noguchi"] .nav-links a{ color:var(--ink-soft); font-weight:300; letter-spacing:.16em; } :root[data-skin="noguchi"] .nav-links a::after{ left:50%; bottom:-8px; width:6px; height:6px; border-radius:50%; background:var(--accent); transform:translateX(-50%) scale(0); transition:transform .28s var(--ease); } :root[data-skin="noguchi"] .nav-links a:hover::after, :root[data-skin="noguchi"] .nav-links a[aria-current="page"]::after{ width:6px; transform:translateX(-50%) scale(1); } :root[data-skin="noguchi"] .nav-right{ gap:22px; } :root[data-skin="noguchi"] .cart-btn{ color:var(--ink-soft); border:1px solid rgba(232,200,128,.28); border-radius:999px; padding:8px 14px; font-weight:300; } :root[data-skin="noguchi"] .hero{ padding-block:clamp(86px,14vw,180px); } :root[data-skin="noguchi"] .hero-grid{ grid-template-columns:.9fr 1fr; gap:clamp(42px,8vw,120px); align-items:center; } :root[data-skin="noguchi"] .hero .eyebrow, :root[data-skin="noguchi"] .eyebrow{ color:var(--accent); font-weight:300; letter-spacing:.22em; } :root[data-skin="noguchi"] .hero h1{ font-family:var(--sans); font-weight:200; letter-spacing:.08em; line-height:1.12; max-width:12ch; } :root[data-skin="noguchi"] .hero .lead{ max-width:42ch; color:var(--ink-soft); font-weight:300; } :root[data-skin="noguchi"] .hero-cta{ gap:18px; } :root[data-skin="noguchi"] .hero-art, :root[data-skin="noguchi"] .card-media, :root[data-skin="noguchi"] .about-portrait{ aspect-ratio:auto; overflow:visible; background:#26231F; padding:clamp(22px,4vw,52px); border:0; border-radius:46% 54% 48% 52% / 52% 43% 57% 48%; box-shadow:0 0 62px 10px rgba(232,200,128,.17); } :root[data-skin="noguchi"] .hero-art img, :root[data-skin="noguchi"] .card-media img, :root[data-skin="noguchi"] .about-portrait img{ width:100%; height:auto; object-fit:contain; } :root[data-skin="noguchi"] .section{ padding-block:clamp(84px,13vw,170px); } :root[data-skin="noguchi"] .section--alt, :root[data-skin="noguchi"] .section--showcase{ background:transparent; border-block:1px solid rgba(232,200,128,.10); } :root[data-skin="noguchi"] .section--showcase .section-head h2, :root[data-skin="noguchi"] .section--showcase .link-arrow{ color:var(--ink); } :root[data-skin="noguchi"] .section-head{ justify-content:center; text-align:center; gap:28px; } :root[data-skin="noguchi"] .section-head h2{ font-family:var(--sans); font-weight:200; letter-spacing:.12em; } :root[data-skin="noguchi"] .btn, :root[data-skin="noguchi"] .btn-primary, :root[data-skin="noguchi"] .btn--accent{ background:transparent; color:var(--accent); border:1px solid rgba(232,200,128,.55); border-radius:999px; box-shadow:0 0 28px rgba(232,200,128,.12); font-weight:300; letter-spacing:.12em; } :root[data-skin="noguchi"] .btn-ghost, :root[data-skin="noguchi"] .btn--ghost{ color:var(--ink-soft); border-color:rgba(242,236,224,.22); } :root[data-skin="noguchi"] input, :root[data-skin="noguchi"] select, :root[data-skin="noguchi"] textarea{ background:#26231F; color:var(--ink); border:1px solid rgba(232,200,128,.22); border-radius:999px; } :root[data-skin="noguchi"] textarea{ border-radius:28px; } :root[data-skin="noguchi"] .site-footer{ background:transparent; color:var(--ink-soft); border-top:1px solid rgba(232,200,128,.14); margin-top:clamp(70px,12vw,150px); } :root[data-skin="noguchi"] .site-footer h4{ color:var(--accent); font-family:var(--sans); font-weight:300; letter-spacing:.18em; } :root[data-skin="noguchi"] .site-footer a{ color:var(--ink-soft); text-decoration-color:rgba(232,200,128,.45); } /* ---- ansel-adams (previsualized tonal command; the Zone System as structure) ---- */ body[data-struct="ansel-adams"] .skin-structure-layer:nth-child(1){ background: linear-gradient(90deg, rgba(0,0,0,.06), transparent 18%, transparent 82%, rgba(255,255,255,.34)), repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0 calc(100% / 11), transparent calc(100% / 11) calc(200% / 11)); } :root[data-skin="ansel-adams"] .site-header{ background:linear-gradient(90deg,#141414,#393939 28%,#E8E8E8 72%,#FFF); border-bottom:1px solid #737373; } :root[data-skin="ansel-adams"] .nav{ height:76px; } :root[data-skin="ansel-adams"] .brand{ font-family:var(--serif); color:#fff; font-weight:400; letter-spacing:.05em; text-shadow:0 1px 1px #000; } :root[data-skin="ansel-adams"] .brand span{ color:#D0D0D0; } :root[data-skin="ansel-adams"] .nav-links a{ color:#141414; font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; background:rgba(255,255,255,.36); padding:6px 8px; } :root[data-skin="ansel-adams"] .nav-links a::after{ background:linear-gradient(90deg,#000,#737373,#fff); height:3px; } :root[data-skin="ansel-adams"] .nav-right{ gap:16px; } :root[data-skin="ansel-adams"] .cart-btn{ color:#141414; background:#F2F2F2; border:1px solid #737373; padding:7px 11px; font-family:var(--mono); } :root[data-skin="ansel-adams"] .hero{ padding-block:clamp(68px,10vw,132px); } :root[data-skin="ansel-adams"] .hero-grid{ grid-template-columns:1fr .95fr; gap:clamp(30px,5vw,70px); align-items:center; } :root[data-skin="ansel-adams"] .hero .eyebrow, :root[data-skin="ansel-adams"] .eyebrow{ color:var(--ink-soft); font-family:var(--mono); letter-spacing:.18em; } :root[data-skin="ansel-adams"] .hero h1{ font-family:var(--serif); font-weight:400; letter-spacing:.015em; line-height:1.02; text-shadow:0 1px 0 #fff; } :root[data-skin="ansel-adams"] .hero .lead{ color:#393939; max-width:48ch; padding-top:14px; border-top:11px solid transparent; border-image:linear-gradient(90deg,#000 0 9.09%,#141414 9.09% 18.18%,#272727 18.18% 27.27%,#393939 27.27% 36.36%,#525252 36.36% 45.45%,#737373 45.45% 54.54%,#919191 54.54% 63.63%,#B4B4B4 63.63% 72.72%,#D0D0D0 72.72% 81.81%,#E8E8E8 81.81% 90.9%,#FFF 90.9% 100%) 1; } :root[data-skin="ansel-adams"] .hero-art, :root[data-skin="ansel-adams"] .card-media, :root[data-skin="ansel-adams"] .about-portrait{ aspect-ratio:auto; overflow:visible; background:#F2F2F2; padding:clamp(16px,2.5vw,30px); border:1px solid #919191; box-shadow:0 18px 44px -22px rgba(0,0,0,.45); } :root[data-skin="ansel-adams"] .hero-art img, :root[data-skin="ansel-adams"] .card-media img, :root[data-skin="ansel-adams"] .about-portrait img{ width:100%; height:auto; object-fit:contain; filter:grayscale(1) contrast(1.08); } :root[data-skin="ansel-adams"] .section{ padding-block:clamp(58px,8vw,110px); } :root[data-skin="ansel-adams"] .section--alt{ background:#F2F2F2; border-block:1px solid #919191; } :root[data-skin="ansel-adams"] .section--showcase{ background:#141414; } :root[data-skin="ansel-adams"] .section--showcase .section-head h2{ color:#F2F2F2; } :root[data-skin="ansel-adams"] .section--showcase .eyebrow, :root[data-skin="ansel-adams"] .section--showcase .link-arrow{ color:#D0D0D0; } :root[data-skin="ansel-adams"] .section-head{ border-bottom:1px solid #919191; padding-bottom:18px; } :root[data-skin="ansel-adams"] .section-head h2{ font-family:var(--serif); font-weight:400; letter-spacing:.02em; } :root[data-skin="ansel-adams"] .btn, :root[data-skin="ansel-adams"] .btn-primary, :root[data-skin="ansel-adams"] .btn--accent{ background:#141414; color:#F2F2F2; border:1px solid #000; border-radius:1px; font-family:var(--mono); text-transform:uppercase; letter-spacing:.08em; } :root[data-skin="ansel-adams"] .btn-ghost, :root[data-skin="ansel-adams"] .btn--ghost{ background:#F2F2F2; color:#141414; border-color:#737373; } :root[data-skin="ansel-adams"] input, :root[data-skin="ansel-adams"] select, :root[data-skin="ansel-adams"] textarea{ background:#F2F2F2; color:#141414; border:1px solid #737373; border-radius:1px; } :root[data-skin="ansel-adams"] .site-footer{ background:#141414; color:#E8E8E8; border-top:16px solid transparent; border-image:linear-gradient(90deg,#000 0 9.09%,#141414 9.09% 18.18%,#272727 18.18% 27.27%,#393939 27.27% 36.36%,#525252 36.36% 45.45%,#737373 45.45% 54.54%,#919191 54.54% 63.63%,#B4B4B4 63.63% 72.72%,#D0D0D0 72.72% 81.81%,#E8E8E8 81.81% 90.9%,#FFF 90.9% 100%) 1; } :root[data-skin="ansel-adams"] .site-footer h4{ color:#fff; font-family:var(--serif); font-weight:400; } :root[data-skin="ansel-adams"] .site-footer a{ color:#E8E8E8; } /* ---- cartier-bresson (decisive moment: humane geometry fixed in-camera) ---- */ body[data-struct="cartier-bresson"] .skin-structure-layer:nth-child(1){ background-image: linear-gradient(115deg, transparent 0 48%, rgba(42,39,32,.12) 48% 48.35%, transparent 48.35%), linear-gradient(68deg, transparent 0 58%, rgba(42,39,32,.09) 58% 58.3%, transparent 58.3%), repeating-linear-gradient(90deg, rgba(42,39,32,.045) 0 1px, transparent 1px 33.333%); } :root[data-skin="cartier-bresson"] .site-header{ background:color-mix(in srgb,var(--bg) 92%,transparent); border-bottom:3px solid #2A2720; } :root[data-skin="cartier-bresson"] .nav{ height:72px; } :root[data-skin="cartier-bresson"] .brand{ font-family:var(--serif); font-weight:400; letter-spacing:.02em; color:var(--ink); } :root[data-skin="cartier-bresson"] .brand span{ color:var(--accent); } :root[data-skin="cartier-bresson"] .nav-links{ gap:26px; } :root[data-skin="cartier-bresson"] .nav-links a{ color:var(--ink-soft); font-family:var(--serif); font-size:15px; font-weight:400; } :root[data-skin="cartier-bresson"] .nav-links a::after{ height:3px; background:#2A2720; } :root[data-skin="cartier-bresson"] .nav-right{ gap:18px; } :root[data-skin="cartier-bresson"] .cart-btn{ color:var(--ink); border:3px solid #2A2720; background:var(--bg); padding:7px 10px; font-family:var(--serif); } :root[data-skin="cartier-bresson"] .hero{ padding-block:clamp(60px,9vw,120px); } :root[data-skin="cartier-bresson"] .hero-grid{ grid-template-columns:.88fr 1.12fr; gap:clamp(28px,5vw,64px); align-items:center; position:relative; } :root[data-skin="cartier-bresson"] .hero-grid::before{ content:""; position:absolute; inset:8% 6% auto auto; width:34%; height:1px; background:#2A2720; transform:rotate(-12deg); transform-origin:right; opacity:.35; } :root[data-skin="cartier-bresson"] .hero .eyebrow, :root[data-skin="cartier-bresson"] .eyebrow{ color:var(--accent); font-family:var(--serif); font-style:italic; text-transform:none; letter-spacing:.04em; } :root[data-skin="cartier-bresson"] .hero h1{ font-family:var(--serif); font-weight:400; letter-spacing:.005em; line-height:1.03; max-width:12ch; } :root[data-skin="cartier-bresson"] .hero .lead{ color:var(--ink-soft); max-width:44ch; font-family:var(--serif); font-size:clamp(18px,1.8vw,22px); } :root[data-skin="cartier-bresson"] .hero-art, :root[data-skin="cartier-bresson"] .card-media, :root[data-skin="cartier-bresson"] .about-portrait{ aspect-ratio:auto; overflow:visible; background:#F5F1EA; padding:clamp(18px,3vw,34px); border:0; box-shadow:inset 0 0 0 3px #2A2720, 0 16px 32px -24px rgba(42,39,32,.5); } :root[data-skin="cartier-bresson"] .hero-art img, :root[data-skin="cartier-bresson"] .card-media img, :root[data-skin="cartier-bresson"] .about-portrait img{ width:100%; height:auto; object-fit:contain; } :root[data-skin="cartier-bresson"] .section{ padding-block:clamp(54px,8vw,98px); } :root[data-skin="cartier-bresson"] .section--alt{ background:var(--surface); border-block:3px solid #2A2720; } :root[data-skin="cartier-bresson"] .section--showcase{ background:var(--bg); } :root[data-skin="cartier-bresson"] .section--showcase .section-head h2, :root[data-skin="cartier-bresson"] .section--showcase .link-arrow{ color:var(--ink); } :root[data-skin="cartier-bresson"] .section-head{ align-items:flex-start; border-left:3px solid #2A2720; padding-left:18px; } :root[data-skin="cartier-bresson"] .section-head h2{ font-family:var(--serif); font-weight:400; letter-spacing:.01em; } :root[data-skin="cartier-bresson"] .btn, :root[data-skin="cartier-bresson"] .btn-primary, :root[data-skin="cartier-bresson"] .btn--accent{ background:#2A2720; color:#F5F1EA; border:3px solid #2A2720; border-radius:0; font-family:var(--serif); font-weight:400; } :root[data-skin="cartier-bresson"] .btn-ghost, :root[data-skin="cartier-bresson"] .btn--ghost{ background:transparent; color:#2A2720; } :root[data-skin="cartier-bresson"] input, :root[data-skin="cartier-bresson"] select, :root[data-skin="cartier-bresson"] textarea{ background:var(--surface); color:var(--ink); border:3px solid #2A2720; border-radius:0; font-family:var(--serif); } :root[data-skin="cartier-bresson"] .site-footer{ background:var(--bg); color:var(--ink); border-top:3px solid #2A2720; } :root[data-skin="cartier-bresson"] .site-footer h4{ font-family:var(--serif); font-style:italic; font-weight:400; } :root[data-skin="cartier-bresson"] .site-footer a{ color:var(--ink); text-decoration-color:#2A2720; } /* ---- penn (elegance through exclusion: subject, light, and truth isolated) ---- */ body[data-struct="penn"] .skin-structure-layer:nth-child(1){ background: radial-gradient(ellipse at 50% 10%, rgba(255,255,255,.74), transparent 48%), linear-gradient(115deg, transparent 0 58%, rgba(42,35,32,.045) 58% 58.25%, transparent 58.25%); } :root[data-skin="penn"] .site-header{ background:color-mix(in srgb,var(--bg) 96%,transparent); border-bottom:1px solid var(--line); } :root[data-skin="penn"] .nav{ height:82px; max-width:1040px; } :root[data-skin="penn"] .brand{ font-family:var(--serif); font-weight:400; letter-spacing:.14em; color:var(--ink); } :root[data-skin="penn"] .brand span{ color:var(--ink-faint); } :root[data-skin="penn"] .nav-links{ gap:clamp(28px,5vw,64px); } :root[data-skin="penn"] .nav-links a{ color:var(--ink-soft); font-family:var(--serif); letter-spacing:.08em; font-weight:400; } :root[data-skin="penn"] .nav-links a::after{ background:var(--ink); height:1px; } :root[data-skin="penn"] .nav-right{ gap:24px; } :root[data-skin="penn"] .cart-btn{ color:var(--ink); background:transparent; border:1px solid var(--line-strong); padding:8px 12px; font-family:var(--serif); font-weight:400; } :root[data-skin="penn"] .hero{ padding-block:clamp(82px,13vw,176px); } :root[data-skin="penn"] .hero-grid{ grid-template-columns:minmax(0,.72fr) minmax(280px,1fr); gap:clamp(56px,9vw,132px); align-items:center; max-width:1040px; } :root[data-skin="penn"] .hero .eyebrow, :root[data-skin="penn"] .eyebrow{ color:var(--ink-faint); font-family:var(--serif); font-style:italic; text-transform:none; letter-spacing:.06em; } :root[data-skin="penn"] .hero h1{ font-family:var(--serif); font-weight:400; letter-spacing:.075em; line-height:1.12; max-width:11ch; } :root[data-skin="penn"] .hero .lead{ color:var(--ink-soft); max-width:34ch; font-family:var(--serif); font-size:clamp(17px,1.7vw,21px); } :root[data-skin="penn"] .hero-cta{ gap:18px; } :root[data-skin="penn"] .hero-art, :root[data-skin="penn"] .card-media, :root[data-skin="penn"] .about-portrait{ aspect-ratio:auto; overflow:visible; background:#EDE8E2; padding:clamp(32px,6vw,74px); border:0; box-shadow:0 34px 70px -50px rgba(42,35,32,.52); position:relative; } :root[data-skin="penn"] .hero-art::before, :root[data-skin="penn"] .card-media::before, :root[data-skin="penn"] .about-portrait::before{ content:""; position:absolute; top:0; left:0; width:40px; height:40px; border-top:1.5px solid #2A2320; border-left:1.5px solid #2A2320; transform:skewX(-12deg); transform-origin:top left; } :root[data-skin="penn"] .hero-art img, :root[data-skin="penn"] .card-media img, :root[data-skin="penn"] .about-portrait img{ width:100%; height:auto; object-fit:contain; } :root[data-skin="penn"] .section{ padding-block:clamp(84px,13vw,170px); } :root[data-skin="penn"] .section--alt, :root[data-skin="penn"] .section--showcase{ background:transparent; border-block:1px solid var(--line); } :root[data-skin="penn"] .section--showcase .section-head h2, :root[data-skin="penn"] .section--showcase .link-arrow{ color:var(--ink); } :root[data-skin="penn"] .section-head{ max-width:1040px; margin-inline:auto; align-items:flex-end; } :root[data-skin="penn"] .section-head h2{ font-family:var(--serif); font-weight:400; letter-spacing:.07em; } :root[data-skin="penn"] .btn, :root[data-skin="penn"] .btn-primary, :root[data-skin="penn"] .btn--accent{ background:var(--ink); color:var(--bg); border:1px solid var(--ink); border-radius:0; font-family:var(--serif); font-weight:400; letter-spacing:.08em; } :root[data-skin="penn"] .btn-ghost, :root[data-skin="penn"] .btn--ghost{ background:transparent; color:var(--ink); } :root[data-skin="penn"] input, :root[data-skin="penn"] select, :root[data-skin="penn"] textarea{ background:var(--surface); color:var(--ink); border:1px solid var(--line-strong); border-radius:0; font-family:var(--serif); } :root[data-skin="penn"] .site-footer{ background:transparent; color:var(--ink-soft); border-top:1px solid var(--line); margin-top:clamp(80px,12vw,160px); } :root[data-skin="penn"] .site-footer h4{ font-family:var(--serif); font-weight:400; letter-spacing:.12em; color:var(--ink); } :root[data-skin="penn"] .site-footer a{ color:var(--ink-soft); } @media (max-width:820px){ :root[data-skin="eames"] .hero-grid, :root[data-skin="bass"] .hero-grid, :root[data-skin="noguchi"] .hero-grid, :root[data-skin="ansel-adams"] .hero-grid, :root[data-skin="cartier-bresson"] .hero-grid, :root[data-skin="penn"] .hero-grid{ grid-template-columns:1fr; } :root[data-skin="eames"] .nav, :root[data-skin="bass"] .nav, :root[data-skin="noguchi"] .nav, :root[data-skin="ansel-adams"] .nav, :root[data-skin="cartier-bresson"] .nav, :root[data-skin="penn"] .nav{ height:68px; } :root[data-skin="eames"] .nav-links, :root[data-skin="bass"] .nav-links, :root[data-skin="noguchi"] .nav-links, :root[data-skin="ansel-adams"] .nav-links, :root[data-skin="cartier-bresson"] .nav-links, :root[data-skin="penn"] .nav-links{ gap:0; } }