/* ============================================================
   layouts.css — advanced design variants

   Loaded after theme.css. These go further than palettes: a
   sticky sidebar instead of a top bar, a masonry gallery with no
   cards at all, a poster page built around one huge photograph.

   Still CSS only. Every template keeps working, and so will the
   ones added later.

   Each block is self-contained, so deleting one removes exactly
   one design and touches nothing else.
   ============================================================ */


/* ============================================================
   POSTER — built around one enormous photograph.
   Giant headline over a full-bleed image, then alternating
   full-width picture bands. Very little text, very large type.
   ============================================================ */
[data-theme="poster"]{
    --bg:#0f0e0c; --bg-alt:#171512; --panel:#1e1b17;
    --ink:#fbf7f0; --ink-2:#efe8dc; --text:#ded6c8; --muted:#948b7d;
    --line:rgba(251,247,240,.14);
    --brand:#e4623f; --brand-2:#f0754f; --spruce:#2a2620; --accent:#e4623f;
    --slat-dark:rgba(8,7,6,.95);
    --font-display:'Anton', 'Arial Black', sans-serif;
    --font-body:'Inter', -apple-system, sans-serif;
    --radius:0px; --radius-sm:0px;
    --shadow:none; --shadow-sm:none;
}
[data-theme="poster"] body{ background:var(--bg); color:var(--text); }
[data-theme="poster"] h1, [data-theme="poster"] h2, [data-theme="poster"] h3{ color:var(--ink); }

/* header floats over the picture, no background at all */
[data-theme="poster"] .site-header{
    position:absolute; background:transparent; backdrop-filter:none; border-bottom:0;
}
[data-theme="poster"] .logo{ color:#fff; }
[data-theme="poster"] .nav a{ color:rgba(255,255,255,.85); }
[data-theme="poster"] .nav a:hover, [data-theme="poster"] .nav a.on{ color:var(--brand); border-bottom-color:var(--brand); }

/* the headline is the design */
[data-theme="poster"] .hero{ min-height:100vh; align-items:flex-end; }
[data-theme="poster"] .hero::before{
    background:linear-gradient(180deg, rgba(8,7,6,.45) 0%, rgba(8,7,6,.15) 40%, rgba(8,7,6,.9) 100%);
}
[data-theme="poster"] .hero h1{
    font-family:var(--font-display);
    font-size:clamp(3rem, 11vw, 9rem);
    line-height:.88; letter-spacing:-.02em; text-transform:uppercase;
    max-width:none; margin-bottom:8px;
}
[data-theme="poster"] .hero p{ font-size:1.15rem; max-width:44ch; }
[data-theme="poster"] .hero .eyebrow{ color:var(--brand); font-weight:800; }

[data-theme="poster"] h2{
    font-family:var(--font-display); text-transform:uppercase;
    font-size:clamp(2rem, 5.5vw, 4rem); line-height:.95; letter-spacing:-.01em;
}
[data-theme="poster"] .section{ padding-block:clamp(50px, 8vw, 120px); }

/* one big project, then a row of smaller ones */
[data-theme="poster"] .works{ grid-template-columns:repeat(3,1fr); grid-auto-rows:300px; gap:8px; }
[data-theme="poster"] .works .pcard:first-child{ grid-column:span 3; grid-row:span 2; }
[data-theme="poster"] .works .tall{ grid-row:span 1; }
[data-theme="poster"] .pcard{ background:#0a0908; }
[data-theme="poster"] .pcard-info h3{ font-family:var(--font-display); text-transform:uppercase; font-size:1.4rem; }
[data-theme="poster"] .pcard-price{ background:var(--brand); color:#fff; border-radius:0; }
[data-theme="poster"] .btn-primary{ background:var(--brand); border-radius:0; text-transform:uppercase; font-weight:800; letter-spacing:.08em; }
[data-theme="poster"] .card, [data-theme="poster"] .ccard, [data-theme="poster"] .bcard{
    background:var(--panel); border:1px solid var(--line);
}
@media (max-width:980px){
    [data-theme="poster"] .works{ grid-template-columns:repeat(2,1fr); }
    [data-theme="poster"] .works .pcard:first-child{ grid-column:span 2; }
}


/* ============================================================
   GALLERY — pictures only.
   A true masonry wall using CSS columns: no cards, no borders,
   no shadows. Captions appear on hover. The hero keeps only its
   title, so the work starts immediately.
   ============================================================ */
[data-theme="gallery"]{
    --bg:#ffffff; --bg-alt:#fafafa; --panel:#fff;
    --ink:#0c0c0c; --ink-2:#1a1a1a; --text:#2b2b2b; --muted:#8c8c8c;
    --line:rgba(12,12,12,.10);
    --brand:#0c0c0c; --brand-2:#333; --spruce:#f2f2f2; --accent:#0c0c0c;
    --slat-dark:rgba(12,12,12,.9);
    --font-display:'Jost', -apple-system, sans-serif;
    --font-body:'Jost', -apple-system, sans-serif;
    --radius:0px; --radius-sm:0px;
    --shadow:none; --shadow-sm:none;
}
[data-theme="gallery"] .container{ width:min(1600px, 96vw); }
[data-theme="gallery"] .site-header{ background:#fff; border-bottom:1px solid var(--line); }
[data-theme="gallery"] .site-header .container{ height:64px; }
[data-theme="gallery"] .logo{ font-size:1.25rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase; }
[data-theme="gallery"] .nav a{ font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; }

/* a short, quiet hero - the pictures are the point */
[data-theme="gallery"] .hero{ min-height:44vh; align-items:center; text-align:center; }
[data-theme="gallery"] .hero h1{ font-weight:300; letter-spacing:.04em; max-width:none; margin-inline:auto; }
[data-theme="gallery"] .hero p, [data-theme="gallery"] .hero-stats{ display:none; }
[data-theme="gallery"] .hero-cta{ justify-content:center; }
[data-theme="gallery"] .section{ padding-block:clamp(30px, 4vw, 56px); }
[data-theme="gallery"] h2{ font-weight:300; letter-spacing:.06em; text-align:center; }

/* masonry: columns, not grid, so photos keep their own height */
[data-theme="gallery"] .works{
    display:block; columns:4; column-gap:6px; grid-auto-rows:auto;
}
[data-theme="gallery"] .works .pcard{
    break-inside:avoid; display:block; margin:0 0 6px; height:auto;
    background:transparent; box-shadow:none;
}
[data-theme="gallery"] .works .pcard img,
[data-theme="gallery"] .pcard img{ height:auto; aspect-ratio:auto; width:100%; }
[data-theme="gallery"] .works .tall, [data-theme="gallery"] .works .wide{ grid-row:auto; grid-column:auto; }

/* caption only on hover, so the wall stays clean */
[data-theme="gallery"] .pcard-info{
    padding:30px 14px 12px; opacity:0; transition:opacity .25s;
    background:linear-gradient(180deg, transparent, rgba(0,0,0,.72));
}
[data-theme="gallery"] .pcard:hover .pcard-info{ opacity:1; }
[data-theme="gallery"] .pcard-price{ background:#fff; color:#0c0c0c; border-radius:0; font-weight:600; }
[data-theme="gallery"] .grid-3{ columns:3; column-gap:6px; display:block; }
[data-theme="gallery"] .grid-3 > *{ break-inside:avoid; margin-bottom:6px; }
[data-theme="gallery"] .slats{ display:none; }
@media (max-width:1200px){ [data-theme="gallery"] .works{ columns:3; } }
@media (max-width:820px){  [data-theme="gallery"] .works{ columns:2; } [data-theme="gallery"] .grid-3{ columns:2; } }
@media (max-width:520px){  [data-theme="gallery"] .works{ columns:1; } [data-theme="gallery"] .grid-3{ columns:1; } }


/* ============================================================
   SIDEBAR — navigation down the left side.
   The header becomes a fixed vertical panel; the page content
   sits beside it. Reverts to a normal top bar on phones.
   ============================================================ */
[data-theme="sidebar"]{
    --bg:#f7f6f3; --bg-alt:#eeece7; --panel:#fff;
    --ink:#1b1a17; --ink-2:#26241f; --text:#312e28; --muted:#7f7a70;
    --line:rgba(27,26,23,.14);
    --brand:#4a5d3a; --brand-2:#61784c; --spruce:#e4ead9; --accent:#8aa06b;
    --slat-dark:rgba(27,26,23,.92);
    --font-display:'Outfit', -apple-system, sans-serif;
    --font-body:'Outfit', -apple-system, sans-serif;
    --radius:10px; --radius-sm:7px;
    --shadow:0 8px 26px rgba(27,26,23,.08); --shadow-sm:0 2px 10px rgba(27,26,23,.06);
}
@media (min-width:1100px){
    [data-theme="sidebar"] .site-header{
        position:fixed; top:0; left:0; bottom:0; width:250px;
        background:var(--panel); border-right:1px solid var(--line); border-bottom:0;
        backdrop-filter:none; z-index:70;
    }
    [data-theme="sidebar"] .site-header .container{
        width:auto; height:100%; flex-direction:column; align-items:flex-start;
        justify-content:flex-start; gap:34px; padding:34px 26px;
    }
    [data-theme="sidebar"] .logo{ font-size:1.6rem; }
    [data-theme="sidebar"] .nav{
        flex-direction:column; align-items:flex-start; gap:14px; margin-left:0; width:100%;
    }
    [data-theme="sidebar"] .nav a{ width:100%; padding-block:4px; border-bottom:0; font-size:.95rem; }
    [data-theme="sidebar"] .nav a:hover, [data-theme="sidebar"] .nav a.on{ color:var(--brand); }

    /* everything else moves over */
    [data-theme="sidebar"] main,
    [data-theme="sidebar"] .site-footer,
    [data-theme="sidebar"] .cta-band{ margin-left:250px; }
    [data-theme="sidebar"] .hero{ margin-left:250px; min-height:min(78vh,700px); }
    [data-theme="sidebar"] .container{ width:min(1100px, 88vw); }
}
[data-theme="sidebar"] .works{ grid-template-columns:repeat(2,1fr); grid-auto-rows:300px; gap:14px; }
[data-theme="sidebar"] .pcard-info h3{ font-size:1.1rem; }


/* ============================================================
   BRUTALIST — hard edges, mono type, offset shadows.
   Nothing soft anywhere. Loud, deliberate, memorable.
   ============================================================ */
[data-theme="brutalist"]{
    --bg:#f5f251; --bg-alt:#ffffff; --panel:#ffffff;
    --ink:#000000; --ink-2:#111111; --text:#111111; --muted:#4a4a4a;
    --line:#000000;
    --brand:#000000; --brand-2:#222222; --spruce:#f5f251; --accent:#1c39ff;
    --slat-dark:#000;
    --font-display:'Space Grotesk', 'Courier New', monospace;
    --font-body:'Space Grotesk', 'Courier New', monospace;
    --radius:0px; --radius-sm:0px;
    --shadow:6px 6px 0 #000; --shadow-sm:4px 4px 0 #000;
}
[data-theme="brutalist"] .site-header{ background:var(--bg); border-bottom:3px solid #000; backdrop-filter:none; }
[data-theme="brutalist"] .logo{ font-weight:700; text-transform:uppercase; letter-spacing:-.03em; }
[data-theme="brutalist"] .nav a{ font-weight:700; text-transform:uppercase; font-size:.8rem; }
[data-theme="brutalist"] .nav a:hover, [data-theme="brutalist"] .nav a.on{ background:#000; color:var(--bg); border-bottom-color:transparent; }
[data-theme="brutalist"] h1, [data-theme="brutalist"] h2, [data-theme="brutalist"] h3{
    text-transform:uppercase; font-weight:700; letter-spacing:-.04em;
}
[data-theme="brutalist"] .hero{ min-height:min(70vh, 620px); }
[data-theme="brutalist"] .hero::before{ background:linear-gradient(180deg, transparent, rgba(0,0,0,.6)); }
[data-theme="brutalist"] .section:nth-child(even){ background:#fff; }
[data-theme="brutalist"] .works{ grid-template-columns:repeat(3,1fr); gap:16px; grid-auto-rows:280px; }
[data-theme="brutalist"] .pcard{ border:3px solid #000; box-shadow:6px 6px 0 #000; background:#fff; }
[data-theme="brutalist"] .pcard-info{ background:#000; position:static; padding:10px 12px; }
[data-theme="brutalist"] .pcard img{ aspect-ratio:4/3; height:auto; }
[data-theme="brutalist"] .works .pcard img{ height:auto; }
[data-theme="brutalist"] .works .tall{ grid-row:span 1; }
[data-theme="brutalist"] .pcard-price{ background:var(--accent); color:#fff; border:2px solid #000; border-radius:0; }
[data-theme="brutalist"] .btn{ border:3px solid #000; box-shadow:4px 4px 0 #000; font-weight:700; text-transform:uppercase; }
[data-theme="brutalist"] .btn:hover{ transform:translate(2px,2px); box-shadow:2px 2px 0 #000; }
[data-theme="brutalist"] .btn-primary{ background:var(--accent); color:#fff; }
[data-theme="brutalist"] .card, [data-theme="brutalist"] .ccard, [data-theme="brutalist"] .bcard{
    border:3px solid #000; box-shadow:6px 6px 0 #000;
}
[data-theme="brutalist"] .badge{ border:2px solid #000; border-radius:0; font-weight:700; }
[data-theme="brutalist"] .slats{ display:none; }


/* ============================================================
   JOURNAL — text first, pictures break out of the column.
   A narrow reading measure with full-bleed images between the
   paragraphs. Suits sites that explain rather than list.
   ============================================================ */
[data-theme="journal"]{
    --bg:#fffdf8; --bg-alt:#f4efe4; --panel:#fff;
    --ink:#20180f; --ink-2:#2c2116; --text:#3b2f22; --muted:#8b7b66;
    --line:rgba(32,24,15,.16);
    --brand:#8a3324; --brand-2:#a54636; --spruce:#f2e6d4; --accent:#c2703f;
    --slat-dark:rgba(32,24,15,.92);
    --font-display:'Lora', Georgia, serif;
    --font-body:'Lora', Georgia, serif;
    --radius:3px; --radius-sm:2px;
    --shadow:none; --shadow-sm:none;
}
[data-theme="journal"] .container{ width:min(760px, 90vw); }
[data-theme="journal"] .site-header .container{ width:min(1100px, 92vw); }
[data-theme="journal"] .site-header{ border-bottom:1px solid var(--line); }
[data-theme="journal"] .logo{ font-size:1.55rem; font-weight:500; }
[data-theme="journal"] .nav a{ font-size:.9rem; font-weight:500; }
[data-theme="journal"] .hero{ min-height:min(58vh, 520px); }
[data-theme="journal"] .hero-inner{ width:min(760px, 90vw); }
[data-theme="journal"] h1, [data-theme="journal"] h2, [data-theme="journal"] h3{ font-weight:600; letter-spacing:-.01em; }
[data-theme="journal"] p{ font-size:1.06rem; line-height:1.75; }
[data-theme="journal"] .section{ padding-block:clamp(48px, 7vw, 92px); }

/* images escape the reading column */
[data-theme="journal"] .works{
    grid-template-columns:1fr; grid-auto-rows:auto; gap:44px;
    width:min(1180px, 94vw); margin-inline:auto;
}
[data-theme="journal"] .works .pcard{ height:auto; background:transparent; box-shadow:none; }
[data-theme="journal"] .works .pcard img,
[data-theme="journal"] .pcard img{ aspect-ratio:21/9; height:auto; }
[data-theme="journal"] .pcard-info{
    position:static; padding:14px 0 0; background:none; color:var(--text);
    width:min(760px, 90vw); margin-inline:auto; text-align:center;
}
[data-theme="journal"] .pcard-info h3{ color:var(--ink); font-size:1.35rem; }
[data-theme="journal"] .pcard-meta{ justify-content:center; color:var(--muted); }
[data-theme="journal"] .pcard-price{ position:static; background:none; color:var(--brand); padding:6px 0 0; }
[data-theme="journal"] .works .tall, [data-theme="journal"] .works .wide{ grid-row:span 1; grid-column:span 1; }
[data-theme="journal"] .grid-3{ grid-template-columns:1fr; }


/* ============================================================
   COLOUR VARIANTS
   Same layout as the default, different palette. Cheap to add
   and often all a new site actually needs.
   ============================================================ */
[data-theme="slate"]{
    --bg:#eceef0; --bg-alt:#dfe3e7; --panel:#fff;
    --ink:#151a1f; --ink-2:#202830; --text:#2a333c; --muted:#6d7883;
    --line:rgba(21,26,31,.15);
    --brand:#3b4a59; --brand-2:#4f6274; --spruce:#dde3e9; --accent:#7d93a8;
    --slat-dark:rgba(21,26,31,.93);
}
[data-theme="olive"]{
    --bg:#f4f3e9; --bg-alt:#e8e7d6; --panel:#fff;
    --ink:#1e2016; --ink-2:#2a2d1f; --text:#333626; --muted:#7a7c66;
    --line:rgba(30,32,22,.16);
    --brand:#5a6238; --brand-2:#747d4a; --spruce:#e6e8d0; --accent:#96a066;
    --slat-dark:rgba(30,32,22,.93);
}
[data-theme="sand"]{
    --bg:#faf6ef; --bg-alt:#f0e8da; --panel:#fff;
    --ink:#2a2119; --ink-2:#372c21; --text:#413428; --muted:#8f8072;
    --line:rgba(42,33,25,.14);
    --brand:#a06a3c; --brand-2:#bb8250; --spruce:#f4e7d3; --accent:#d0a06d;
    --slat-dark:rgba(42,33,25,.92);
}
[data-theme="ink"]{
    --bg:#1a1a1d; --bg-alt:#232327; --panel:#2a2a2f;
    --ink:#f2f2f4; --ink-2:#e2e2e6; --text:#d2d2d8; --muted:#8f8f99;
    --line:rgba(242,242,244,.15);
    --brand:#8f7ae6; --brand-2:#a08ff0; --spruce:#34343c; --accent:#8f7ae6;
    --slat-dark:rgba(12,12,14,.94);
}
[data-theme="ink"] body{ background:var(--bg); color:var(--text); }
[data-theme="ink"] h1, [data-theme="ink"] h2, [data-theme="ink"] h3{ color:var(--ink); }
[data-theme="ink"] .site-header{ background:rgba(26,26,29,.8); }
[data-theme="ink"] .logo{ color:var(--ink); }
[data-theme="ink"] .nav a{ color:var(--text); }
[data-theme="ink"] .card, [data-theme="ink"] .ccard, [data-theme="ink"] .bcard{
    background:var(--panel); border:1px solid var(--line);
}