/* ============================================================
   layouts2.css — ten more designs

   Loaded after theme.css and layouts.css. Two of these change
   the layout heavily (fullbleed, pricegrid); the rest are strong
   palettes with smaller structural touches.

   Still CSS only — no template is touched.
   ============================================================ */


/* ============================================================
   FULLBLEED — one project per screen.
   Each item fills the viewport, title centred over the photo.
   Scrolling becomes a slideshow.
   ============================================================ */
[data-theme="fullbleed"]{
    --bg:#0b0b0c; --bg-alt:#131315; --panel:#1a1a1d;
    --ink:#ffffff; --ink-2:#f0f0f2; --text:#d8d8dc; --muted:#8e8e96;
    --line:rgba(255,255,255,.14);
    --brand:#ffffff; --brand-2:#d8d8dc; --spruce:#26262b; --accent:#ff5f45;
    --slat-dark:rgba(0,0,0,.95);
    --font-display:'Bebas Neue', 'Arial Narrow', sans-serif;
    --font-body:'Inter', -apple-system, sans-serif;
    --radius:0px; --radius-sm:0px; --shadow:none; --shadow-sm:none;
}
[data-theme="fullbleed"] body{ background:var(--bg); color:var(--text); }
[data-theme="fullbleed"] h1,[data-theme="fullbleed"] h2,[data-theme="fullbleed"] h3{ color:var(--ink); letter-spacing:.02em; }
[data-theme="fullbleed"] .site-header{ position:absolute; background:transparent; backdrop-filter:none; border-bottom:0; }
[data-theme="fullbleed"] .logo{ color:#fff; }
[data-theme="fullbleed"] .nav a{ color:rgba(255,255,255,.8); }
[data-theme="fullbleed"] .hero{ min-height:100vh; }
[data-theme="fullbleed"] .hero h1{ font-size:clamp(3rem,10vw,8rem); line-height:.92; }
[data-theme="fullbleed"] .section{ padding-block:0; }
[data-theme="fullbleed"] .container{ width:100%; }

/* every project is its own screen */
[data-theme="fullbleed"] .works{ grid-template-columns:1fr; grid-auto-rows:90vh; gap:0; }
[data-theme="fullbleed"] .works .pcard{ height:90vh; }
[data-theme="fullbleed"] .works .pcard img,[data-theme="fullbleed"] .pcard img{ height:100%; aspect-ratio:auto; }
[data-theme="fullbleed"] .works .tall,[data-theme="fullbleed"] .works .wide{ grid-row:span 1; grid-column:span 1; }
[data-theme="fullbleed"] .pcard-info{
    inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; padding:0 20px;
    background:linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.55));
}
[data-theme="fullbleed"] .pcard-info h3{ font-family:var(--font-display); font-size:clamp(2rem,6vw,4.5rem); line-height:1; }
[data-theme="fullbleed"] .pcard-meta{ justify-content:center; font-size:1rem; margin-top:10px; }
[data-theme="fullbleed"] .pcard-price{ top:auto; bottom:40px; right:auto; left:50%; transform:translateX(-50%);
    background:var(--accent); color:#fff; font-size:1.1rem; padding:10px 22px; }


/* ============================================================
   PRICEGRID — a shop window.
   Tight grid, price always visible and large, short titles.
   Built for browsing by price.
   ============================================================ */
[data-theme="pricegrid"]{
    --bg:#f7f7f8; --bg-alt:#ededf0; --panel:#fff;
    --ink:#16161a; --ink-2:#222228; --text:#2c2c33; --muted:#77777f;
    --line:rgba(22,22,26,.14);
    --brand:#e8443a; --brand-2:#f05a50; --spruce:#ffe8e6; --accent:#e8443a;
    --slat-dark:rgba(22,22,26,.92);
    --font-display:'Archivo', -apple-system, sans-serif;
    --font-body:'Archivo', -apple-system, sans-serif;
    --radius:8px; --radius-sm:6px;
    --shadow:0 3px 14px rgba(22,22,26,.10); --shadow-sm:0 1px 6px rgba(22,22,26,.08);
}
[data-theme="pricegrid"] .hero{ min-height:min(42vh,380px); }
[data-theme="pricegrid"] .section{ padding-block:clamp(28px,4vw,52px); }
[data-theme="pricegrid"] h2{ font-weight:800; letter-spacing:-.02em; }
[data-theme="pricegrid"] .works{ grid-template-columns:repeat(4,1fr); grid-auto-rows:auto; gap:14px; }
[data-theme="pricegrid"] .works .pcard{ height:auto; background:var(--panel); border:1px solid var(--line); }
[data-theme="pricegrid"] .pcard img,[data-theme="pricegrid"] .works .pcard img{ aspect-ratio:1/1; height:auto; }
[data-theme="pricegrid"] .works .tall,[data-theme="pricegrid"] .works .wide{ grid-row:span 1; grid-column:span 1; }

/* the price is the headline here */
[data-theme="pricegrid"] .pcard-info{
    position:static; padding:10px 12px 12px; background:none; color:var(--text);
}
[data-theme="pricegrid"] .pcard-info h3{
    color:var(--ink); font-size:.92rem; font-weight:600; line-height:1.3;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
[data-theme="pricegrid"] .pcard-meta{ color:var(--muted); font-size:.74rem; margin-top:3px; }
[data-theme="pricegrid"] .pcard-price{
    position:static; display:block; margin-top:8px; padding:0;
    background:none; color:var(--brand); font-size:1.3rem; font-weight:800; border-radius:0;
}
@media (max-width:980px){ [data-theme="pricegrid"] .works{ grid-template-columns:repeat(2,1fr); } }


/* ============================================================
   ROSE — blush pink, soft and warm.
   ============================================================ */
[data-theme="rose"]{
    --bg:#fdf4f4; --bg-alt:#f8e6e8; --panel:#fff;
    --ink:#3a1f28; --ink-2:#4a2a34; --text:#4d3038; --muted:#a1808a;
    --line:rgba(58,31,40,.13);
    --brand:#c65f7b; --brand-2:#d97b93; --spruce:#fbe0e6; --accent:#e8a0b4;
    --slat-dark:rgba(58,31,40,.90);
    --font-display:'Cormorant Garamond', Georgia, serif;
    --font-body:'Karla', -apple-system, sans-serif;
    --radius:20px; --radius-sm:14px;
    --shadow:0 14px 36px rgba(198,95,123,.14); --shadow-sm:0 5px 16px rgba(198,95,123,.10);
}
[data-theme="rose"] .btn{ border-radius:99px; }
[data-theme="rose"] .badge{ border-radius:99px; }
[data-theme="rose"] h1,[data-theme="rose"] h2{ font-weight:500; }
[data-theme="rose"] .eyebrow{ font-style:italic; text-transform:none; letter-spacing:.05em; }


/* ============================================================
   GOLD — black and brass. Restrained luxury.
   ============================================================ */
[data-theme="gold"]{
    --bg:#0e0d0b; --bg-alt:#171512; --panel:#1c1a16;
    --ink:#f6efdf; --ink-2:#eae2cf; --text:#d9d0bb; --muted:#9a8f79;
    --line:rgba(212,175,95,.26);
    --brand:#d4af5f; --brand-2:#e3c47c; --spruce:#2a2519; --accent:#d4af5f;
    --slat-dark:rgba(8,7,5,.95);
    --font-display:'Cormorant Garamond', Georgia, serif;
    --font-body:'Jost', -apple-system, sans-serif;
    --radius:2px; --radius-sm:2px; --shadow:none; --shadow-sm:none;
}
[data-theme="gold"] body{ background:var(--bg); color:var(--text); }
[data-theme="gold"] h1,[data-theme="gold"] h2,[data-theme="gold"] h3{ color:var(--ink); font-weight:500; }
[data-theme="gold"] .site-header{ background:rgba(14,13,11,.85); border-bottom:1px solid var(--line); }
[data-theme="gold"] .logo{ color:var(--ink); }
[data-theme="gold"] .logo span{ color:var(--brand); }
[data-theme="gold"] .nav a{ color:var(--text); letter-spacing:.14em; text-transform:uppercase; font-size:.76rem; }
[data-theme="gold"] .nav a:hover,[data-theme="gold"] .nav a.on{ color:var(--brand); }
[data-theme="gold"] .eyebrow{ color:var(--brand); letter-spacing:.24em; }
[data-theme="gold"] .btn-primary{ background:transparent; color:var(--brand); border:1px solid var(--brand); }
[data-theme="gold"] .btn-primary:hover{ background:var(--brand); color:#0e0d0b; }
[data-theme="gold"] .card,[data-theme="gold"] .ccard,[data-theme="gold"] .bcard{ background:var(--panel); border:1px solid var(--line); }
[data-theme="gold"] .pcard-price{ background:var(--brand); color:#0e0d0b; }


/* ============================================================
   AZURE — light blue, airy and clean.
   ============================================================ */
[data-theme="azure"]{
    --bg:#f2f7fb; --bg-alt:#e3eef7; --panel:#fff;
    --ink:#0f2438; --ink-2:#17334c; --text:#213b52; --muted:#6d8299;
    --line:rgba(15,36,56,.13);
    --brand:#1273c4; --brand-2:#2a8ddb; --spruce:#dceaf7; --accent:#5eb3ea;
    --slat-dark:rgba(15,36,56,.92);
    --font-display:'Outfit', -apple-system, sans-serif;
    --font-body:'Outfit', -apple-system, sans-serif;
    --radius:14px; --radius-sm:10px;
    --shadow:0 10px 30px rgba(18,115,196,.12); --shadow-sm:0 3px 12px rgba(18,115,196,.09);
}
[data-theme="azure"] h1,[data-theme="azure"] h2{ font-weight:700; letter-spacing:-.02em; }
[data-theme="azure"] .hero::before{ background:linear-gradient(180deg, rgba(9,28,45,.15), rgba(9,28,45,.75)); }


/* ============================================================
   MIDNIGHT — deep navy with a cyan edge.
   ============================================================ */
[data-theme="midnight"]{
    --bg:#0a1220; --bg-alt:#111c2e; --panel:#16233a;
    --ink:#e8f1fb; --ink-2:#d5e4f3; --text:#bdcee2; --muted:#7d90a8;
    --line:rgba(232,241,251,.14);
    --brand:#38d0d8; --brand-2:#5fdde3; --spruce:#1d2f49; --accent:#38d0d8;
    --slat-dark:rgba(5,9,16,.95);
    --font-display:'Space Grotesk', -apple-system, sans-serif;
    --font-body:'Inter', -apple-system, sans-serif;
    --radius:10px; --radius-sm:7px;
    --shadow:0 12px 34px rgba(0,0,0,.45); --shadow-sm:0 4px 14px rgba(0,0,0,.35);
}
[data-theme="midnight"] body{ background:var(--bg); color:var(--text); }
[data-theme="midnight"] h1,[data-theme="midnight"] h2,[data-theme="midnight"] h3{ color:var(--ink); }
[data-theme="midnight"] .site-header{ background:rgba(10,18,32,.85); border-bottom:1px solid var(--line); }
[data-theme="midnight"] .logo{ color:var(--ink); }
[data-theme="midnight"] .logo span{ color:var(--brand); }
[data-theme="midnight"] .nav a{ color:var(--text); }
[data-theme="midnight"] .nav a:hover,[data-theme="midnight"] .nav a.on{ color:var(--brand); }
[data-theme="midnight"] .card,[data-theme="midnight"] .ccard,[data-theme="midnight"] .bcard{ background:var(--panel); border:1px solid var(--line); }
[data-theme="midnight"] .btn-primary{ background:var(--brand); color:#062028; font-weight:800; }
[data-theme="midnight"] .pcard-price{ background:var(--brand); color:#062028; }


/* ============================================================
   SUNSET — warm gradient, orange into violet.
   ============================================================ */
[data-theme="sunset"]{
    --bg:#fff6f0; --bg-alt:#ffe9dd; --panel:#fff;
    --ink:#331a2e; --ink-2:#43233b; --text:#4a2c42; --muted:#9c7789;
    --line:rgba(51,26,46,.13);
    --brand:#e8622c; --brand-2:#f37f4a; --spruce:#ffe0cd; --accent:#8b4bb8;
    --slat-dark:rgba(51,26,46,.90);
    --font-display:'Outfit', -apple-system, sans-serif;
    --font-body:'Karla', -apple-system, sans-serif;
    --radius:18px; --radius-sm:12px;
    --shadow:0 14px 34px rgba(232,98,44,.16); --shadow-sm:0 4px 14px rgba(232,98,44,.12);
}
[data-theme="sunset"] .hero::before{
    background:linear-gradient(140deg, rgba(232,98,44,.55), rgba(139,75,184,.65));
}
[data-theme="sunset"] .btn-primary{
    background:linear-gradient(120deg, var(--brand), var(--accent)); border:0; color:#fff;
}
[data-theme="sunset"] .btn{ border-radius:99px; }
[data-theme="sunset"] h1,[data-theme="sunset"] h2{ font-weight:700; }
[data-theme="sunset"] .eyebrow{ color:var(--accent); }


/* ============================================================
   LINEN — pale beige, large serif, very calm.
   ============================================================ */
[data-theme="linen"]{
    --bg:#f8f5ef; --bg-alt:#efe9df; --panel:#fff;
    --ink:#2b271f; --ink-2:#3a352b; --text:#443e33; --muted:#8b8375;
    --line:rgba(43,39,31,.13);
    --brand:#7a6a4f; --brand-2:#958364; --spruce:#eee7d9; --accent:#b3a184;
    --slat-dark:rgba(43,39,31,.90);
    --font-display:'Fraunces', Georgia, serif;
    --font-body:'Karla', -apple-system, sans-serif;
    --radius:6px; --radius-sm:4px;
    --shadow:0 6px 20px rgba(43,39,31,.07); --shadow-sm:0 2px 8px rgba(43,39,31,.05);
}
[data-theme="linen"] h1,[data-theme="linen"] h2,[data-theme="linen"] h3{ font-weight:400; letter-spacing:-.01em; }
[data-theme="linen"] .section{ padding-block:clamp(64px,9vw,130px); }
[data-theme="linen"] .eyebrow{ letter-spacing:.2em; }


/* ============================================================
   CARBON — near black, monospace, technical.
   ============================================================ */
[data-theme="carbon"]{
    --bg:#121212; --bg-alt:#1a1a1a; --panel:#1e1e1e;
    --ink:#f2f2f2; --ink-2:#e0e0e0; --text:#c9c9c9; --muted:#858585;
    --line:rgba(242,242,242,.13);
    --brand:#7cf03d; --brand-2:#95f45f; --spruce:#232323; --accent:#7cf03d;
    --slat-dark:rgba(0,0,0,.95);
    --font-display:'Space Grotesk', monospace;
    --font-body:'Space Grotesk', monospace;
    --radius:3px; --radius-sm:2px; --shadow:none; --shadow-sm:none;
}
[data-theme="carbon"] body{ background:var(--bg); color:var(--text); }
[data-theme="carbon"] h1,[data-theme="carbon"] h2,[data-theme="carbon"] h3{ color:var(--ink); font-weight:600; letter-spacing:-.03em; }
[data-theme="carbon"] .site-header{ background:rgba(18,18,18,.9); border-bottom:1px solid var(--line); }
[data-theme="carbon"] .logo{ color:var(--ink); }
[data-theme="carbon"] .logo span{ color:var(--brand); }
[data-theme="carbon"] .nav a{ color:var(--text); font-size:.85rem; }
[data-theme="carbon"] .nav a:hover,[data-theme="carbon"] .nav a.on{ color:var(--brand); }
[data-theme="carbon"] .eyebrow{ color:var(--brand); font-family:var(--font-body); }
[data-theme="carbon"] .eyebrow::before{ display:none; }
[data-theme="carbon"] .btn-primary{ background:var(--brand); color:#0d0d0d; font-weight:700; }
[data-theme="carbon"] .card,[data-theme="carbon"] .ccard,[data-theme="carbon"] .bcard{ background:var(--panel); border:1px solid var(--line); }
[data-theme="carbon"] .works{ gap:8px; }
[data-theme="carbon"] .pcard-price{ background:var(--brand); color:#0d0d0d; border-radius:2px; }


/* ============================================================
   BOTANIC — green and cream, organic and round.
   ============================================================ */
[data-theme="botanic"]{
    --bg:#f4f7ef; --bg-alt:#e6eede; --panel:#fff;
    --ink:#1b2a17; --ink-2:#26391f; --text:#2f4326; --muted:#7a8d6f;
    --line:rgba(27,42,23,.13);
    --brand:#4a7c3f; --brand-2:#5f9a51; --spruce:#e0ebd6; --accent:#8fbf6f;
    --slat-dark:rgba(27,42,23,.90);
    --font-display:'Fraunces', Georgia, serif;
    --font-body:'Jost', -apple-system, sans-serif;
    --radius:26px; --radius-sm:18px;
    --shadow:0 14px 36px rgba(27,42,23,.10); --shadow-sm:0 5px 16px rgba(27,42,23,.07);
}
[data-theme="botanic"] .btn{ border-radius:99px; padding-inline:26px; }
[data-theme="botanic"] .badge{ border-radius:99px; }
[data-theme="botanic"] h1,[data-theme="botanic"] h2{ font-weight:400; }
[data-theme="botanic"] .pcard img{ border-radius:var(--radius-sm) var(--radius-sm) 0 0; }


/* ============================================================
   COFFEE — light brown, milky, gentle.
   ============================================================ */
[data-theme="coffee"]{
    --bg:#f6efe7; --bg-alt:#ebe0d3; --panel:#fffdfa;
    --ink:#3b2b20; --ink-2:#4a382a; --text:#513d2e; --muted:#9c8574;
    --line:rgba(59,43,32,.13);
    --brand:#a9754e; --brand-2:#c08d64; --spruce:#f0e2d2; --accent:#d9b48f;
    --slat-dark:rgba(59,43,32,.90);
    --font-display:'Lora', Georgia, serif;
    --font-body:'Karla', -apple-system, sans-serif;
    --radius:12px; --radius-sm:9px;
    --shadow:0 10px 28px rgba(59,43,32,.10); --shadow-sm:0 3px 12px rgba(59,43,32,.07);
}
[data-theme="coffee"] h1,[data-theme="coffee"] h2,[data-theme="coffee"] h3{ font-weight:600; }
[data-theme="coffee"] .eyebrow{ letter-spacing:.16em; }