/* ============================================================
   docomade.com — Craft Documentation Studio
   Palette: Antique Ivory, Warm Linen, Tawny Gold, Sage Mist,
            Dusty Rose, Deep Espresso, Warm Umber
   Fonts: Cormorant Garamond 300/600, Nunito 300/600, Courier Prime
   ============================================================ */

/* --- Reset & Base --- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --ivory:      #F5EFE6;
    --linen:      #EDE0D0;
    --gold:       #C4A882;
    --sage:       #B5D4C1;
    --rose:       #E8C4C4;
    --espresso:   #3B2F2A;
    --umber:      #7A6A5E;

    --display:    'Cormorant Garamond', serif;
    --body:       'Nunito', sans-serif;
    --mono:       'Courier Prime', monospace;

    --max-w:      1440px;
    --margin-min: 80px;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--ivory);
    color: var(--espresso);
    font-family: var(--body);
    font-weight: 300;
    font-size: 15px;
    line-height: 1.75;
    position: relative;
    overflow-x: hidden;
}

/* --- Grain Overlay --- */
.grain-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    width: 100%;
    height: 100%;
}

.grain-overlay svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* --- Panel Base --- */
.panel {
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.panel.visible {
    opacity: 1;
}

.panel-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 80px var(--margin-min);
    position: relative;
    height: 100%;
    min-height: 100vh;
}

/* Panel number labels */
.panel-number {
    position: absolute;
    bottom: 40px;
    right: var(--margin-min);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--gold);
    text-transform: uppercase;
}

/* --- Section Slugs --- */
.section-slug {
    display: inline-block;
    font-family: var(--body);
    font-weight: 600;
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 16px;
}

/* --- Section Headings --- */
.section-heading {
    font-family: var(--display);
    font-weight: 300;
    font-size: 40px;
    letter-spacing: -0.02em;
    color: var(--espresso);
    line-height: 1.15;
    margin-bottom: 32px;
}

/* --- Body Copy --- */
.body-copy {
    font-family: var(--body);
    font-weight: 300;
    font-size: 15px;
    line-height: 1.8;
    color: var(--espresso);
    max-width: 440px;
    margin-bottom: 20px;
}

.body-copy.secondary {
    color: var(--umber);
}

/* ============================================================
   PANEL 1 — Opening Folio
   ============================================================ */
.panel-opening {
    background: var(--ivory);
}

.folio-header {
    position: relative;
    z-index: 2;
}

.domain-display {
    font-family: var(--display);
    font-weight: 300;
    font-size: 96px;
    letter-spacing: -0.03em;
    color: var(--espresso);
    line-height: 0.95;
    margin-bottom: 12px;
    /* Bleed 1.5 columns left — pull left of container */
    margin-left: -8px;
    position: relative;
    z-index: 2;
}

.folio-meta {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--umber);
    margin-bottom: 0;
}

/* Typewriter zone — center-right of panel */
.typewriter-zone {
    position: absolute;
    top: 48%;
    right: var(--margin-min);
    transform: translateY(-50%);
    text-align: right;
    z-index: 2;
    max-width: 480px;
}

.typewriter-text {
    font-family: var(--mono);
    font-size: 22px;
    letter-spacing: 0.05em;
    color: var(--espresso);
    line-height: 1.5;
}

.typewriter-cursor {
    display: inline-block;
    width: 2px;
    height: 18px;
    background: var(--espresso);
    margin-left: 3px;
    vertical-align: middle;
    animation: cursor-blink 0.7s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    transition: opacity 0.5s ease;
}

.typewriter-cursor.hidden {
    opacity: 0;
}

@keyframes cursor-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

/* Peony botanical — bottom right, bleeds off-canvas */
.peony-wrap {
    position: absolute;
    bottom: -20px;
    right: -40px;
    width: 380px;
    height: 480px;
    z-index: 1;
    pointer-events: none;
}

.botanical-peony {
    width: 100%;
    height: 100%;
}

/* ============================================================
   PANEL 2 — Process Specimen
   ============================================================ */
.panel-process {
    background: var(--linen);
}

.process-grid {
    display: grid;
    grid-template-columns: 5fr 4fr;
    gap: 80px;
    align-items: start;
    padding-top: 40px;
}

.process-text-block {
    padding-right: 20px;
    position: relative;
    top: -40px; /* broken-grid vertical offset */
}

.pull-quote {
    font-family: var(--display);
    font-weight: 300;
    font-style: italic;
    font-size: 28px;
    letter-spacing: -0.01em;
    color: var(--umber);
    line-height: 1.3;
    border-left: 2px solid var(--gold);
    padding-left: 24px;
    margin-top: 40px;
}

/* Process illustration with double-hairline specimen frame */
.process-illustration-wrap {
    position: relative;
    /* Deliberately offset from right edge */
    margin-right: -20px;
    margin-top: 60px;
}

.specimen-frame {
    position: relative;
    border: 1.5px solid var(--gold);
    padding: 16px;
    background: var(--ivory);
    min-height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Double hairline inner border (bookbinding reference) */
.specimen-frame::after {
    content: '';
    position: absolute;
    inset: 4px;
    border: 1px solid var(--linen);
    pointer-events: none;
}

.botanical-rosemary {
    width: 220px;
    height: 340px;
    display: block;
}

/* ============================================================
   PANEL 3 — Material Archive
   ============================================================ */
.panel-archive {
    background: var(--ivory);
}

.archive-header {
    margin-bottom: 48px;
}

.archive-grid {
    display: grid;
    grid-template-columns: 3fr 1fr 2fr;
    gap: 32px;
    align-items: start;
    position: relative;
    z-index: 2;
}

/* Archive card base */
.archive-card {
    background: var(--linen);
    position: relative;
}

/* Double-hairline frame on cards */
.archive-card-inner {
    border: 1.5px solid var(--gold);
    padding: 32px 28px;
    position: relative;
}

.archive-card-inner::after {
    content: '';
    position: absolute;
    inset: 4px;
    border: 1px solid var(--ivory);
    pointer-events: none;
}

/* Broken-grid vertical offsets */
.archive-card--mid {
    transform: translateY(40px);
}

.archive-card--low {
    transform: translateY(80px);
}

.card-botanical {
    width: 60px;
    height: 60px;
    display: block;
    margin-bottom: 20px;
}

.card-category {
    display: block;
    font-family: var(--body);
    font-weight: 600;
    font-size: 9px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 12px;
}

.card-body {
    font-family: var(--body);
    font-weight: 300;
    font-size: 13px;
    line-height: 1.75;
    color: var(--umber);
}

/* Background rosemary motif */
.archive-bg-botanical {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 300px;
    pointer-events: none;
    z-index: 0;
}

.archive-bg-botanical svg {
    width: 100%;
    height: 100%;
}

/* ============================================================
   PANEL 4 — Provenance Statement
   ============================================================ */
.panel-provenance {
    background: var(--linen);
}

/* Left-margin vertical rule (full height, sage) */
.panel-provenance::before {
    content: '';
    position: absolute;
    left: 80px;
    top: 10%;
    height: 80%;
    width: 3px;
    background: var(--sage);
}

.provenance-content {
    max-width: 720px;
    padding-left: 56px; /* offset from vertical rule */
    padding-top: 40px;
}

.provenance-category {
    font-family: var(--body);
    font-weight: 600;
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 40px;
}

/* Oversized initial cap */
.provenance-initial {
    font-family: var(--display);
    font-weight: 300;
    font-size: 96px;
    line-height: 0.8;
    float: left;
    margin-right: 12px;
    margin-top: 8px;
    color: var(--espresso);
}

.provenance-body {
    font-family: var(--body);
    font-weight: 300;
    font-size: 15px;
    line-height: 1.85;
    color: var(--espresso);
    margin-bottom: 24px;
}

.provenance-body::after {
    content: '';
    display: table;
    clear: both;
}

.provenance-quote {
    font-family: var(--display);
    font-weight: 300;
    font-style: italic;
    font-size: 32px;
    letter-spacing: -0.01em;
    color: var(--umber);
    line-height: 1.3;
    margin-top: 48px;
    border: none;
    padding: 0;
}

/* ============================================================
   PANEL 5 — Contact Folio
   ============================================================ */
.panel-contact {
    background: var(--ivory);
}

/* Contact content: floated at 60% down, offset left of center */
.contact-content {
    position: absolute;
    top: 60%;
    left: var(--margin-min);
    transform: translateY(-50%);
    z-index: 2;
    max-width: 520px;
}

.contact-heading {
    font-family: var(--display);
    font-weight: 300;
    font-size: 56px;
    letter-spacing: -0.03em;
    color: var(--espresso);
    line-height: 1.05;
    margin-bottom: 20px;
    margin-top: 8px;
}

.contact-sub {
    font-family: var(--body);
    font-weight: 300;
    font-size: 14px;
    color: var(--umber);
    margin-bottom: 40px;
    line-height: 1.7;
}

address {
    font-style: normal;
    margin-bottom: 24px;
}

.label {
    display: block;
    font-family: var(--body);
    font-weight: 600;
    font-size: 9px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--umber);
    margin-bottom: 10px;
}

/* Contact link — Cormorant italic, animated underline */
.contact-link {
    display: inline-block;
    font-family: var(--display);
    font-weight: 300;
    font-style: italic;
    font-size: 36px;
    color: var(--espresso);
    text-decoration: none;
    position: relative;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.contact-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--gold);
    transition: width 400ms ease;
}

.contact-link:hover::after {
    width: 100%;
}

.contact-meta {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--umber);
    margin-top: 24px;
}

/* Anemone watermark — right side, 50% opacity */
.anemone-wrap {
    position: absolute;
    top: 50%;
    right: -20px;
    transform: translateY(-50%);
    width: 320px;
    height: 400px;
    pointer-events: none;
    z-index: 1;
}

.botanical-anemone {
    width: 100%;
    height: 100%;
}

/* ============================================================
   Responsive — maintain legibility at narrower viewports
   ============================================================ */
@media (max-width: 1024px) {
    .domain-display {
        font-size: 64px;
    }

    .process-grid {
        grid-template-columns: 1fr 1fr;
        gap: 48px;
    }

    .archive-grid {
        grid-template-columns: 1fr 1fr;
    }

    .archive-card--low {
        transform: translateY(40px);
    }

    .contact-heading {
        font-size: 40px;
    }
}

@media (max-width: 768px) {
    :root {
        --margin-min: 32px;
    }

    .domain-display {
        font-size: 48px;
    }

    .typewriter-zone {
        position: static;
        transform: none;
        text-align: left;
        margin-top: 40px;
        max-width: 100%;
    }

    .process-grid {
        grid-template-columns: 1fr;
    }

    .process-text-block {
        top: 0;
    }

    .archive-grid {
        grid-template-columns: 1fr;
    }

    .archive-card--mid,
    .archive-card--low {
        transform: none;
    }

    .contact-content {
        position: static;
        transform: none;
        padding: 80px 0 0;
    }

    .anemone-wrap {
        display: none;
    }

    .peony-wrap {
        width: 220px;
        height: 280px;
        right: -20px;
        bottom: -10px;
    }
}