/* ============================================================
   archaic.works — Field Journal Stylesheet
   Sepia-nostalgic / dark-academia / archaeological excavation
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    /* Palette */
    --primary:    #3a3228;   /* Deep Stratum  */
    --parchment:  #f2ead3;   /* Parchment     */
    --clay:       #8b7355;   /* Clay Ochre    */
    --terracotta: #6b3a2a;   /* Terracotta    */
    --ink:        #2c2420;   /* Charcoal Ink  */
    --bone:       #e5dbc7;   /* Bone White    */
    --verdigris:  #4a6741;   /* Verdigris     */
    --dust:       #a09580;   /* Dust          */
    --topsoil:    #5c4a3a;
    --silt:       #6b5a48;

    --serif-display: 'Cormorant Garamond', 'Lora', Georgia, serif;
    --serif-body:    'Lora', Georgia, 'Times New Roman', serif;
    --mono:          'Inconsolata', 'IBM Plex Mono', 'Courier New', monospace;

    --max-w: 1280px;
}

html { scroll-behavior: smooth; }

body {
    font-family: var(--serif-body);
    background: var(--parchment);
    color: var(--ink);
    line-height: 1.85;
    font-size: 17px;
    overflow-x: hidden;
    /* linen weave */
    background-image:
        repeating-linear-gradient(0deg, rgba(58,50,40,0.025) 0 1px, transparent 1px 3px),
        repeating-linear-gradient(90deg, rgba(58,50,40,0.022) 0 1px, transparent 1px 3px);
    background-color: var(--parchment);
}

a { color: var(--verdigris); text-decoration: none; transition: color 240ms ease; }
a:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
    color: #38502f;
}

/* ============================================================
   HERO :: Excavation Site
   ============================================================ */
.excavation {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    color: var(--bone);
    isolation: isolate;
}

.strata {
    position: absolute; inset: 0;
    background: linear-gradient(
        to bottom,
        var(--topsoil) 0% 20%,
        var(--clay)    20% 45%,
        var(--silt)    45% 65%,
        var(--primary) 65% 100%
    );
    z-index: 0;
}

/* Subtle grain over strata */
.strata::before {
    content: "";
    position: absolute; inset: 0;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(255,255,255,0.04) 0 1px, transparent 1px),
        radial-gradient(circle at 70% 60%, rgba(0,0,0,0.06) 0 1.5px, transparent 1.5px),
        radial-gradient(circle at 45% 80%, rgba(255,255,255,0.03) 0 1px, transparent 1px);
    background-size: 9px 9px, 13px 13px, 7px 7px;
    mix-blend-mode: overlay;
    opacity: 0.7;
    pointer-events: none;
}

/* Jagged break between strata */
.stratum {
    position: absolute; left: 0; right: 0;
    display: flex; align-items: flex-start;
    padding: 14px 36px;
}
.stratum-label {
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    color: var(--bone);
    opacity: 0.55;
    text-transform: uppercase;
}
.stratum--topsoil { top: 0; height: 20%;
    clip-path: polygon(0 0, 100% 0, 100% 96%, 96% 100%, 88% 95%, 80% 100%, 72% 96%, 64% 100%, 56% 94%, 48% 100%, 40% 96%, 32% 100%, 24% 95%, 16% 100%, 8% 96%, 0 100%);
}
.stratum--clay    { top: 20%; height: 25%;
    clip-path: polygon(0 4%, 8% 0, 16% 5%, 24% 0, 32% 4%, 40% 0, 48% 5%, 56% 0, 64% 5%, 72% 0, 80% 4%, 88% 0, 96% 5%, 100% 0, 100% 96%, 92% 100%, 84% 95%, 76% 100%, 68% 96%, 60% 100%, 52% 95%, 44% 100%, 36% 95%, 28% 100%, 20% 96%, 12% 100%, 4% 95%, 0 100%);
}
.stratum--silt    { top: 45%; height: 20%;
    clip-path: polygon(0 4%, 8% 0, 16% 5%, 24% 0, 32% 5%, 40% 0, 48% 4%, 56% 0, 64% 5%, 72% 0, 80% 4%, 88% 0, 96% 5%, 100% 0, 100% 100%, 0 100%);
}
.stratum--bedrock { top: 65%; height: 35%;
    clip-path: polygon(0 5%, 6% 0, 14% 6%, 22% 0, 30% 5%, 38% 0, 46% 6%, 54% 0, 62% 5%, 70% 0, 78% 4%, 86% 0, 94% 5%, 100% 0, 100% 100%, 0 100%);
}

.hero-flashlight {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    background: radial-gradient(80px circle at var(--mx, -200px) var(--my, -200px),
        rgba(242,234,211,0.18) 0%, rgba(242,234,211,0.05) 40%, transparent 70%);
    z-index: 4;
    transition: background 200ms linear;
}

.hero-inscription {
    position: relative;
    z-index: 3;
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 8vh 8vw 0;
}

.hero-meta {
    font-family: var(--mono);
    font-size: 0.78rem;
    letter-spacing: 0.32em;
    color: var(--bone);
    opacity: 0.7;
    text-transform: uppercase;
    margin-bottom: 2.2rem;
}

.wordmark {
    font-family: var(--serif-display);
    font-weight: 600;
    font-size: clamp(2.4rem, 7.5vw, 5.5rem);
    line-height: 1;
    letter-spacing: 0.12em;
    color: var(--bone);
    /* Inscriptional letterpress effect */
    text-shadow:
        0 1px 0 rgba(255,255,255,0.04),
        0 -1px 0 rgba(0,0,0,0.45),
        0 2px 6px rgba(0,0,0,0.55);
    text-transform: uppercase;
    margin-bottom: 1.2rem;
}
.wordmark em {
    font-style: italic;
    font-weight: 400;
    color: var(--clay);
    letter-spacing: 0.05em;
    font-size: 0.55em;
    margin-left: 0.2em;
}

.hero-tagline {
    font-family: var(--serif-body);
    font-style: italic;
    font-size: clamp(1rem, 1.5vw, 1.18rem);
    color: var(--bone);
    opacity: 0.88;
    max-width: 540px;
    line-height: 1.65;
}

.hero-coords {
    margin-top: 2.6rem;
    font-family: var(--mono);
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    color: var(--clay);
    opacity: 0.85;
}

/* Featured specimen */
.hero-specimen {
    position: absolute;
    bottom: 6vh;
    right: 8vw;
    z-index: 3;
    width: clamp(220px, 28vw, 360px);
    opacity: 0;
    clip-path: inset(100% 0 0 0);
    transition: opacity 1800ms ease-out, clip-path 1800ms cubic-bezier(0.22, 0.7, 0.18, 1);
}
.hero-specimen.unearthed {
    opacity: 1;
    clip-path: inset(0 0 0 0);
}
.specimen-art { display: block; width: 100%; height: auto; filter: drop-shadow(0 4px 14px rgba(0,0,0,0.45)); }
.specimen-tag {
    display: block;
    margin-top: 0.6rem;
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    color: var(--bone);
    opacity: 0.7;
    text-align: center;
}

.trowel-mark {
    position: absolute;
    left: 0; right: 0; bottom: 96px;
    height: 12px;
    z-index: 3;
    opacity: 0.85;
}
.trowel-mark svg { width: 100%; height: 100%; display: block; }
.trowel-mark--ochre {
    position: relative;
    left: auto; right: auto; bottom: auto;
    margin-top: 1.6rem;
    max-width: 600px;
    height: 8px;
    opacity: 0.7;
}

.scroll-cue {
    position: absolute;
    left: 50%;
    bottom: 36px;
    transform: translateX(-50%);
    z-index: 3;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--bone);
    opacity: 0.65;
}
.scroll-cue-line {
    width: 1px;
    height: 32px;
    background: var(--bone);
    opacity: 0.5;
    animation: cue-pulse 2400ms ease-in-out infinite;
}
@keyframes cue-pulse {
    0%, 100% { transform: scaleY(0.4); transform-origin: top; opacity: 0.3; }
    50%      { transform: scaleY(1);   transform-origin: top; opacity: 0.7; }
}

/* ============================================================
   FIELD NOTEBOOK :: Main content
   ============================================================ */
.field-notebook {
    position: relative;
    padding: 14vh 6vw 18vh;
    max-width: var(--max-w);
    margin: 0 auto;
    overflow: hidden;
}

.trench-line {
    position: absolute;
    top: 0; bottom: 0; left: 50%;
    width: 1px;
    border-left: 1px dashed rgba(139, 115, 85, 0.4);
    z-index: 0;
}

.field-header {
    text-align: center;
    margin-bottom: 9vh;
    padding: 0 2vw;
    position: relative; z-index: 2;
}
.catalogue-ref {
    font-family: var(--mono);
    font-size: 0.78rem;
    letter-spacing: 0.32em;
    color: var(--terracotta);
    text-transform: uppercase;
    margin-bottom: 1.2rem;
}
.section-title {
    font-family: var(--serif-display);
    font-weight: 600;
    font-size: clamp(2rem, 5vw, 3.6rem);
    letter-spacing: 0.12em;
    color: var(--ink);
    text-transform: uppercase;
    line-height: 1.1;
}
.field-intro {
    max-width: 620px;
    margin: 1.6rem auto 0;
    font-style: italic;
    color: var(--primary);
    font-size: 1.05rem;
    line-height: 1.85;
}
.trowel-mark--ochre { margin-left: auto; margin-right: auto; }

/* ===== Z-pattern entries ===== */
.entry {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6vw;
    align-items: center;
    padding: 8vh 0;
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 900ms ease, transform 900ms cubic-bezier(0.22, 0.7, 0.18, 1);
}
.entry.in-view { opacity: 1; transform: translateY(0); }

.entry--right .entry-content { order: 2; text-align: right; }
.entry--right .entry-sketch  { order: 1; }
.entry--right .entry-link    { display: inline-block; }

.entry-content {
    background: rgba(242, 234, 211, 0.55);
    padding: 36px 38px;
    border: 1px solid rgba(139, 115, 85, 0.18);
    border-radius: 2px;
    transition: box-shadow 400ms ease, transform 400ms ease, background 400ms ease;
    position: relative;
}
.entry-content::before {
    content: "";
    position: absolute;
    top: -1px; left: -1px; right: -1px; bottom: -1px;
    border: 1px solid rgba(139, 115, 85, 0.08);
    pointer-events: none;
}
.entry-content:hover {
    box-shadow: 0 4px 24px rgba(58, 50, 40, 0.15);
    background: rgba(242, 234, 211, 0.85);
}

.entry-stratum {
    font-family: var(--mono);
    font-size: 0.74rem;
    letter-spacing: 0.28em;
    color: var(--terracotta);
    text-transform: uppercase;
    margin-bottom: 1rem;
}
.entry-title {
    font-family: var(--serif-display);
    font-weight: 600;
    font-size: clamp(1.6rem, 2.6vw, 2.2rem);
    line-height: 1.18;
    letter-spacing: 0.04em;
    color: var(--ink);
    margin-bottom: 0.7rem;
}
.entry-date {
    font-family: var(--mono);
    font-size: 0.74rem;
    letter-spacing: 0.18em;
    color: var(--dust);
    margin-bottom: 1.6rem;
    text-transform: uppercase;
}
.entry-body {
    font-family: var(--serif-body);
    font-size: 1.02rem;
    color: var(--primary);
    margin-bottom: 1.2rem;
}
.entry-annotation {
    font-family: var(--serif-body);
    font-style: italic;
    font-size: 0.97rem;
    color: var(--clay);
    border-left: 2px solid var(--terracotta);
    padding-left: 1rem;
    margin: 1.4rem 0 1.6rem;
}
.entry--right .entry-annotation {
    border-left: none;
    border-right: 2px solid var(--terracotta);
    padding-left: 0; padding-right: 1rem;
}
.entry-link {
    font-family: var(--mono);
    font-size: 0.78rem;
    letter-spacing: 0.22em;
    color: var(--verdigris);
    text-transform: uppercase;
    border-bottom: 1px dotted rgba(74, 103, 65, 0.6);
    padding-bottom: 2px;
}

.entry-sketch {
    display: flex; align-items: center; justify-content: center;
    opacity: 0.85;
    padding: 2vw;
}
.entry-sketch svg {
    max-width: 320px;
    width: 100%;
    height: auto;
    transition: transform 600ms ease, opacity 600ms ease;
}
.entry:hover .entry-sketch svg { transform: rotate(-1.2deg) scale(1.02); opacity: 1; }

/* Pottery shards */
.shard {
    position: absolute;
    background: var(--terracotta);
    opacity: 0.08;
    z-index: 0;
    pointer-events: none;
    will-change: transform;
}
.shard--1 { top: 8%;  left: 4%;  width: 110px; height: 80px;
    clip-path: polygon(8% 30%, 35% 8%, 78% 18%, 92% 55%, 70% 92%, 22% 88%, 0 60%); }
.shard--2 { top: 28%; right: 6%; width: 90px;  height: 110px;
    clip-path: polygon(20% 12%, 60% 5%, 95% 38%, 88% 75%, 50% 95%, 12% 80%, 5% 40%); }
.shard--3 { top: 52%; left: 7%;  width: 130px; height: 90px;
    clip-path: polygon(5% 50%, 30% 10%, 70% 8%, 96% 35%, 90% 70%, 60% 96%, 18% 88%); }
.shard--4 { top: 72%; right: 5%; width: 100px; height: 95px;
    clip-path: polygon(10% 30%, 45% 5%, 85% 20%, 95% 65%, 65% 90%, 25% 92%, 2% 60%); }
.shard--5 { top: 90%; left: 30%; width: 80px;  height: 70px;
    clip-path: polygon(15% 25%, 55% 5%, 92% 35%, 80% 75%, 40% 95%, 8% 70%); }

/* ============================================================
   CLOSING SECTION
   ============================================================ */
.closing {
    position: relative;
    background: linear-gradient(180deg, var(--primary) 0%, var(--ink) 100%);
    color: var(--bone);
    padding: 16vh 8vw 18vh;
    overflow: hidden;
    isolation: isolate;
}
.closing::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 14px;
    background: linear-gradient(180deg, rgba(0,0,0,0.4), transparent);
    clip-path: polygon(0 0, 5% 90%, 12% 30%, 19% 95%, 26% 40%, 33% 90%, 40% 50%, 47% 95%, 54% 35%, 61% 90%, 68% 45%, 75% 95%, 82% 40%, 89% 90%, 96% 35%, 100% 90%, 100% 100%, 0 100%);
}
.closing-inner {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}
.closing-meta {
    font-family: var(--mono);
    font-size: 0.78rem;
    letter-spacing: 0.32em;
    color: var(--clay);
    text-transform: uppercase;
    margin-bottom: 2.2rem;
}
.closing-title {
    font-family: var(--serif-display);
    font-weight: 600;
    font-size: clamp(2rem, 5vw, 3.4rem);
    letter-spacing: 0.06em;
    line-height: 1.25;
    color: var(--bone);
    text-shadow:
        0 1px 0 rgba(255,255,255,0.05),
        0 -1px 0 rgba(0,0,0,0.5);
}
.closing-title em {
    font-style: italic;
    color: var(--clay);
    font-weight: 400;
}
.closing-body {
    margin-top: 2.4rem;
    font-style: italic;
    color: var(--bone);
    opacity: 0.78;
    font-size: 1.05rem;
}

/* ============================================================
   ARCHIVE DRAWER :: Bottom sliding nav
   ============================================================ */
.archive-drawer {
    position: fixed;
    left: 0; right: 0; bottom: 40px;   /* sits above the stratigraphy strip */
    z-index: 50;
    background: var(--parchment);
    border-top: 1px solid rgba(139, 115, 85, 0.3);
    box-shadow: 0 -10px 30px rgba(58, 50, 40, 0.18);
    transform: translateY(calc(100% - 48px));
    transition: transform 500ms ease-out;
    max-height: 380px;
}
.archive-drawer.open { transform: translateY(0); }

.drawer-handle {
    width: 100%;
    height: 48px;
    background: linear-gradient(180deg, #b08a4f 0%, #8a6a37 50%, #6a5128 100%);
    border: none;
    border-bottom: 1px solid rgba(0,0,0,0.25);
    color: var(--parchment);
    font-family: var(--mono);
    font-size: 0.78rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 18px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -1px 0 rgba(0,0,0,0.25);
}
.drawer-handle:hover { filter: brightness(1.06); }

.drawer-grip {
    display: inline-grid;
    grid-template-columns: repeat(3, 4px);
    grid-template-rows: repeat(3, 4px);
    gap: 2px;
}
.drawer-grip span {
    width: 4px; height: 4px;
    background: rgba(0,0,0,0.45);
    border-radius: 50%;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 1px 0 rgba(255,255,255,0.18);
}

.drawer-label { color: var(--parchment); }
.drawer-state {
    color: rgba(242, 234, 211, 0.7);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
}

.drawer-body {
    padding: 28px 5vw 32px;
}
.drawer-heading {
    font-family: var(--mono);
    font-size: 0.74rem;
    letter-spacing: 0.28em;
    color: var(--terracotta);
    text-transform: uppercase;
    margin-bottom: 20px;
    text-align: center;
}
.drawer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    max-width: 1100px;
    margin: 0 auto;
}
.index-card {
    background: #fbf6e7;
    border: 1px solid rgba(139, 115, 85, 0.35);
    padding: 14px 16px 16px;
    display: flex; flex-direction: column; gap: 4px;
    text-decoration: none;
    transition: transform 240ms ease, box-shadow 240ms ease, background 240ms ease;
    position: relative;
    box-shadow: 0 1px 0 rgba(58,50,40,0.1);
}
.index-card::before {
    content: "";
    position: absolute;
    top: 6px; right: 8px;
    width: 14px; height: 14px;
    border: 1px solid rgba(107, 58, 42, 0.35);
    border-radius: 50%;
}
.index-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(58, 50, 40, 0.18);
    background: #fdf9eb;
    text-decoration: none;
}
.card-num {
    font-family: var(--mono);
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    color: var(--terracotta);
    font-weight: 600;
}
.card-title {
    font-family: var(--serif-display);
    font-weight: 600;
    font-size: 1.08rem;
    color: var(--ink);
    line-height: 1.25;
    letter-spacing: 0.02em;
}
.card-meta {
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    color: var(--dust);
    text-transform: uppercase;
}

/* ============================================================
   STRATIGRAPHY FOOTER :: Sticky layer column
   ============================================================ */
.stratigraphy {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 40;
    height: 40px;
    background: var(--ink);
    border-top: 1px solid rgba(139, 115, 85, 0.4);
    color: var(--bone);
    overflow: hidden;
    transition: height 360ms ease-out;
}
.stratigraphy:hover { height: 200px; }

.strat-collapsed {
    height: 40px;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 24px;
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--bone);
    opacity: 0.85;
}
.strat-brand { color: var(--clay); }
.strat-cue   { color: var(--dust); opacity: 0.8; }

.strat-expanded {
    display: flex;
    height: 160px;
    border-top: 1px solid rgba(139, 115, 85, 0.3);
}
.strat-layer {
    flex: 1;
    display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
    padding: 14px 18px;
    border-right: 1px dashed rgba(139, 115, 85, 0.3);
    color: var(--bone);
    transition: background 240ms ease;
    text-decoration: none;
    cursor: pointer;
    position: relative;
}
.strat-layer:last-child { border-right: none; }
.strat-layer:hover { text-decoration: none; background: rgba(139, 115, 85, 0.18); }
.strat-layer.active { background: rgba(74, 103, 65, 0.22); }

.strat-layer--1 { background: var(--topsoil); }
.strat-layer--2 { background: var(--clay); color: var(--ink); }
.strat-layer--3 { background: var(--silt); }
.strat-layer--4 { background: #4a3e30; }
.strat-layer--5 { background: var(--primary); }
.strat-layer--6 { background: var(--ink); }

.strat-num {
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    opacity: 0.8;
    margin-bottom: 6px;
}
.strat-name {
    font-family: var(--serif-display);
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.06em;
    line-height: 1.15;
}
.strat-era {
    font-family: var(--mono);
    font-size: 0.64rem;
    letter-spacing: 0.22em;
    margin-top: 6px;
    opacity: 0.7;
    text-transform: uppercase;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
    .hero-specimen { width: 50vw; right: 6vw; bottom: 8vh; }
    .strat-expanded { height: 120px; }
    .strat-name { font-size: 0.82rem; }
}

@media (max-width: 768px) {
    body { font-size: 16px; }

    .hero-inscription { padding: 6vh 6vw 0; }
    .hero-specimen {
        position: relative;
        bottom: auto; right: auto;
        width: 70%;
        margin: 5vh auto 4vh;
    }

    .field-notebook { padding: 10vh 5vw 16vh; }
    .trench-line { display: none; }

    .entry {
        grid-template-columns: 1fr;
        gap: 2.4rem;
        padding: 5vh 0;
    }
    .entry--right .entry-content { order: 2; text-align: left; }
    .entry--right .entry-sketch  { order: 1; }
    .entry--left  .entry-sketch  { order: 2; }
    .entry--right .entry-annotation {
        border-right: none;
        border-left: 2px solid var(--terracotta);
        padding-right: 0; padding-left: 1rem;
    }
    .entry-sketch svg { max-width: 200px; }

    .stratigraphy:hover { height: 40px; }     /* no hover on mobile */
    .stratigraphy.expanded { height: 220px; }
    .strat-expanded { flex-direction: column; height: 180px; }
    .strat-layer { border-right: none; border-bottom: 1px dashed rgba(139, 115, 85, 0.3); padding: 8px 18px; }

    .archive-drawer { bottom: 40px; max-height: 340px; }
    .drawer-grid { grid-template-columns: 1fr 1fr; }

    .hero-flashlight { display: none; }       /* no cursor on touch */
}

@media (max-width: 480px) {
    .drawer-grid { grid-template-columns: 1fr; }
    .strat-collapsed { padding: 0 14px; }
    .strat-cue { display: none; }
}