/* continua.club — honeyed aquarium reading room
   ---------------------------------------------- */

/* Palette
   #F4ECD8 Manila Cream      — page base
   #E8D9B4 Honeycomb Wash    — alt section base
   #C9A35E Honey Drop        — primary accent
   #8B6B3D Caramel Ink       — heading text
   #3A2E1F Coffee Grounds    — body text
   #FAF6EC Rice Paper        — highlight panels
   #D2845E Persimmon Glow    — secondary fish / shake mark
   #6B7A4A Aquarium Moss     — link underlines / fish eye
*/

:root {
    --manila-cream: #F4ECD8;
    --honeycomb-wash: #E8D9B4;
    --honey-drop: #C9A35E;
    --caramel-ink: #8B6B3D;
    --coffee-grounds: #3A2E1F;
    --rice-paper: #FAF6EC;
    --persimmon-glow: #D2845E;
    --aquarium-moss: #6B7A4A;

    --col-pad-l: clamp(32px, 7vw, 96px);
    --col-pad-r: clamp(32px, 9vw, 220px);
    --section-pad-top: 8vh;
    --section-pad-bottom: 12vh;
    --read-col: 62ch;
}

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

html, body {
    background: var(--manila-cream);
    color: var(--coffee-grounds);
    font-family: 'Lora', Georgia, serif;
    font-size: 17px;
    line-height: 1.78;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body {
    /* Subtle paper grain via layered gradients */
    background-image:
        radial-gradient(circle at 13% 22%, rgba(139,107,61,0.045) 0, transparent 38%),
        radial-gradient(circle at 81% 64%, rgba(201,163,94,0.05) 0, transparent 42%),
        radial-gradient(circle at 50% 88%, rgba(139,107,61,0.03) 0, transparent 50%);
    background-attachment: fixed;
}

/* ---------- Hidden tracks ---------- */
.fish-tracks {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none;
}
.fish-track { display: none; }

/* ---------- Fish ---------- */
.fish {
    position: fixed;
    top: 0;
    left: 0;
    width: 64px;
    height: 42px;
    pointer-events: none;
    z-index: 4;
    will-change: transform;
    transform: translate3d(-200px, -200px, 0);
    transition: opacity 600ms ease;
}

.fish-glow {
    position: fixed;
    top: 0;
    left: 0;
    width: 220px;
    height: 220px;
    pointer-events: none;
    z-index: 3;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(201,163,94,0.18) 0%, rgba(201,163,94,0.06) 35%, rgba(201,163,94,0) 70%);
    opacity: 0;
    transform: translate3d(-400px, -400px, 0);
    will-change: transform, opacity;
}

/* ---------- Bands ---------- */
.band {
    position: relative;
    width: 100%;
    padding: var(--section-pad-top) var(--col-pad-r) var(--section-pad-bottom) var(--col-pad-l);
    min-height: 88vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.band-inner {
    position: relative;
    max-width: var(--read-col);
    width: 100%;
    z-index: 2;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 520ms ease-out, transform 520ms ease-out;
}

.band.in-view .band-inner {
    opacity: 1;
    transform: translateY(0);
}

.band.in-view .section-opener {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 80ms;
}

.section-opener {
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    color: var(--caramel-ink);
    font-size: clamp(2.2rem, 4.6vw, 3.4rem);
    letter-spacing: -0.012em;
    line-height: 1.02;
    margin-top: 0.4em;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 520ms ease-out, transform 520ms ease-out;
}

.band-folder { background: var(--manila-cream); }
.band-mission { background: var(--honeycomb-wash); }
.band-index { background: var(--manila-cream); }
.band-long { background: var(--honeycomb-wash); position: relative; overflow: hidden; }
.band-subscribe { background: var(--manila-cream); }
.band-colophon { background: var(--honeycomb-wash); }

/* ---------- Kraft divider ---------- */
.kraft-divider {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 12px;
    pointer-events: none;
}
.kraft-divider::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--caramel-ink);
    opacity: 0.32;
}
.kraft-divider::after {
    content: "";
    position: absolute;
    bottom: 5px;
    left: 0;
    width: 100%;
    height: 2px;
    background-image: linear-gradient(to right, var(--caramel-ink) 6px, transparent 6px);
    background-size: 10px 2px;
    background-repeat: repeat-x;
    background-position: 0 0;
    opacity: 0.28;
    /* Stitch every 11vw */
    -webkit-mask-image: linear-gradient(to right,
        transparent 0,
        transparent calc(11vw - 14px),
        black calc(11vw - 14px),
        black 11vw,
        transparent 11vw,
        transparent 22vw);
    mask-image: linear-gradient(to right,
        transparent 0,
        transparent calc(11vw - 14px),
        black calc(11vw - 14px),
        black 11vw,
        transparent 11vw,
        transparent 22vw);
    background-repeat: repeat-x;
}

/* ---------- 1. Folder Tab ---------- */
.filing-label {
    display: flex;
    flex-direction: column;
    margin-bottom: clamp(40px, 6vw, 88px);
}
.filing-rule {
    width: 64px;
    height: 1px;
    background: var(--caramel-ink);
    opacity: 0.6;
    margin-bottom: 10px;
}
.filing-text {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 2.4px;
    color: var(--caramel-ink);
    text-transform: uppercase;
}

.wordmark {
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    color: var(--honey-drop);
    font-size: clamp(4.4rem, 11vw, 9.2rem);
    letter-spacing: -0.012em;
    line-height: 0.92;
    margin-bottom: 0.45em;
    text-rendering: geometricPrecision;
}

.folder-tag {
    font-family: 'Lora', serif;
    font-style: italic;
    font-size: 1.05rem;
    color: var(--coffee-grounds);
    margin-bottom: 1.2em;
    max-width: 50ch;
}

.bracket-open, .bracket-close {
    color: var(--caramel-ink);
    font-style: normal;
    font-weight: 600;
    margin: 0 0.25em;
    opacity: 0.7;
}

.folder-meta {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--caramel-ink);
    letter-spacing: 0.04em;
    opacity: 0.85;
}

/* ---------- 2. Mission Card ---------- */
.section-tag {
    display: inline-block;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 2.4px;
    color: var(--caramel-ink);
    text-transform: uppercase;
    margin-bottom: 1.4em;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(139,107,61,0.4);
    width: max-content;
    max-width: 100%;
}

.mission-card {
    position: relative;
    padding: 1.2em 0 1.2em 28px;
    margin-bottom: 1.6em;
}

.hand-bracket {
    position: absolute;
    width: 18px;
    pointer-events: none;
}
.hand-bracket.bracket-l {
    top: 0;
    bottom: 0;
    left: 0;
    border-left: 1.2px solid var(--caramel-ink);
    border-top: 1.2px solid var(--caramel-ink);
    border-bottom: 1.2px solid var(--caramel-ink);
    border-right: none;
    /* slight inward bow via mask */
    border-radius: 8px 0 0 8px;
    opacity: 0.7;
}
.hand-bracket.bracket-r {
    display: none;
}

.mission-body {
    font-family: 'Lora', serif;
    font-size: 18px;
    line-height: 1.78;
    color: var(--coffee-grounds);
    max-width: 52ch;
}
.mission-body em {
    color: var(--caramel-ink);
    font-style: italic;
}

/* ---------- 3. Index Strip ---------- */
.index-lede {
    font-style: italic;
    color: var(--coffee-grounds);
    margin: 0.4em 0 2.4em;
    max-width: 52ch;
    opacity: 0.85;
}

.tab-shelf {
    list-style: none;
    display: flex;
    flex-wrap: nowrap;
    gap: -10px;
    align-items: stretch;
    margin-top: 0.8em;
    padding: 14px 0 24px;
    overflow-x: auto;
    scrollbar-width: thin;
}

.paper-tab {
    flex: 1 1 0;
    min-width: 170px;
    padding: 22px 18px 26px;
    background: var(--rice-paper);
    border: 1px solid rgba(139,107,61,0.35);
    border-bottom-color: rgba(139,107,61,0.55);
    border-radius: 2px 2px 0 0;
    box-shadow: 1px 1px 0 rgba(139,107,61,0.08);
    margin-right: -1px;
    cursor: pointer;
    transition: transform 320ms cubic-bezier(.2,.7,.3,1), box-shadow 320ms ease, background 320ms ease;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
}

.paper-tab:nth-child(odd) {
    background: #FBF5E2;
}

.paper-tab::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 22px;
    right: 22px;
    height: 8px;
    background: inherit;
    border: 1px solid rgba(139,107,61,0.35);
    border-bottom: none;
    border-radius: 4px 4px 0 0;
}

.paper-tab:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 16px rgba(139,107,61,0.16), 1px 1px 0 rgba(139,107,61,0.08);
    background: var(--manila-cream);
}

.tab-number {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--caramel-ink);
    letter-spacing: 0.06em;
    opacity: 0.7;
}

.tab-label {
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    font-size: 1.5rem;
    color: var(--caramel-ink);
    letter-spacing: -0.012em;
    line-height: 1;
}

.tab-caption {
    font-family: 'Lora', serif;
    font-style: italic;
    font-size: 13px;
    color: var(--coffee-grounds);
    opacity: 0.78;
    line-height: 1.5;
}

/* ---------- 4. Long Form ---------- */
.band-long {
    min-height: 96vh;
}
.long-photo {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 18% 22%, rgba(250,246,236,0.25) 0%, transparent 22%),
        radial-gradient(ellipse at 64% 50%, rgba(255,238,200,0.35) 0%, transparent 24%),
        radial-gradient(ellipse at 80% 76%, rgba(255,224,168,0.18) 0%, transparent 28%),
        radial-gradient(circle at 32% 70%, rgba(255,235,180,0.20) 0%, transparent 18%),
        radial-gradient(circle at 88% 30%, rgba(255,235,180,0.16) 0%, transparent 16%),
        linear-gradient(135deg, #6B5230 0%, #8B6B3D 30%, #C9A35E 65%, #E8D9B4 100%);
    filter: sepia(0.45) saturate(1.05) hue-rotate(-8deg) contrast(1.04);
    z-index: 0;
}

.photo-grain {
    position: absolute;
    inset: 0;
    background-image:
        repeating-radial-gradient(circle at 17% 23%, rgba(58,46,31,0.04) 0 1px, transparent 1px 3px),
        repeating-radial-gradient(circle at 73% 71%, rgba(58,46,31,0.04) 0 1px, transparent 1px 3px),
        repeating-linear-gradient(45deg, rgba(58,46,31,0.02) 0 1px, transparent 1px 4px);
    mix-blend-mode: multiply;
    opacity: 0.6;
    pointer-events: none;
}

.long-inner {
    z-index: 2;
    margin-top: auto;
    margin-bottom: 0;
}

.long-opener {
    color: var(--manila-cream);
    text-shadow: 0 1px 2px rgba(58,46,31,0.4);
    margin-bottom: 1.4em;
}

.long-inner .section-tag {
    color: var(--manila-cream);
    border-bottom-color: rgba(244,236,216,0.5);
}

.long-plate {
    background: rgba(244,236,216,0.76);
    padding: 28px 36px 32px;
    max-width: 56ch;
    border-left: 2px solid var(--caramel-ink);
    box-shadow: 0 4px 18px rgba(58,46,31,0.18);
}

.plate-body {
    font-family: 'Lora', serif;
    font-size: 17px;
    line-height: 1.78;
    color: var(--coffee-grounds);
}

.plate-body em {
    color: var(--caramel-ink);
}

.plate-mono {
    display: block;
    margin-top: 1.2em;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--caramel-ink);
    opacity: 0.75;
}

/* ---------- 5. Subscribe Slip ---------- */
.subscribe-lede {
    font-style: italic;
    color: var(--coffee-grounds);
    opacity: 0.85;
    margin: 0.4em 0 2em;
    max-width: 52ch;
}

.subscribe-slip {
    position: relative;
    background: var(--rice-paper);
    padding: 32px 36px 30px;
    max-width: 52ch;
    box-shadow: 0 2px 0 rgba(139,107,61,0.12), 0 6px 18px rgba(58,46,31,0.08);
    margin-top: 1em;
}

.paper-tear {
    position: absolute;
    top: -6px;
    left: 0;
    right: 0;
    height: 12px;
    background: var(--rice-paper);
    /* irregular polyline tear via clip-path */
    clip-path: polygon(
        0 100%, 0 60%,
        4% 80%, 9% 50%, 14% 70%, 19% 40%, 24% 65%,
        30% 35%, 36% 70%, 42% 45%, 48% 65%, 54% 35%,
        60% 70%, 66% 45%, 72% 60%, 78% 35%, 84% 60%,
        90% 40%, 95% 65%, 100% 50%, 100% 100%
    );
    filter: drop-shadow(0 2px 1px rgba(58,46,31,0.18));
}

.slip-receipt {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: center;
    margin-bottom: 22px;
}
.receipt-line, .receipt-no {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--caramel-ink);
    opacity: 0.78;
}
.receipt-no {
    font-size: 10px;
    letter-spacing: 0.16em;
}

.slip-label {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 22px;
}

.slip-label-text {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--caramel-ink);
    text-transform: lowercase;
    opacity: 0.85;
}

.slip-input {
    background: transparent;
    border: none;
    border-bottom: 1.4px dashed rgba(139,107,61,0.55);
    font-family: 'Lora', serif;
    font-size: 18px;
    color: var(--coffee-grounds);
    padding: 8px 2px 10px;
    outline: none;
    width: 100%;
    transition: border-color 220ms ease;
}
.slip-input::placeholder {
    color: var(--caramel-ink);
    opacity: 0.45;
    font-style: italic;
}
.slip-input:focus {
    border-bottom-color: var(--aquarium-moss);
    border-bottom-style: solid;
}

.subscribe-slip.has-error .slip-input {
    border-bottom-color: var(--persimmon-glow);
    border-bottom-style: solid;
}

.slip-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}

.slip-submit {
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    font-size: 1.05rem;
    letter-spacing: 0.02em;
    text-transform: lowercase;
    background: var(--honey-drop);
    color: var(--coffee-grounds);
    border: none;
    padding: 10px 22px;
    cursor: pointer;
    border-radius: 1px;
    transition: background 220ms ease, transform 220ms ease;
    box-shadow: 0 1px 0 rgba(139,107,61,0.4);
}
.slip-submit:hover {
    background: var(--persimmon-glow);
    color: var(--rice-paper);
    transform: translateY(-1px);
}

.slip-hint {
    font-family: 'Lora', serif;
    font-style: italic;
    font-size: 13px;
    color: var(--coffee-grounds);
    opacity: 0.7;
    flex: 1 1 200px;
    text-align: right;
}

.subscribe-slip.has-success .slip-hint {
    color: var(--aquarium-moss);
    opacity: 1;
}

/* shake error */
@keyframes slip-shake {
    0%   { transform: translateX(0); }
    16%  { transform: translateX(-3px); }
    33%  { transform: translateX(4px); }
    50%  { transform: translateX(-2px); }
    66%  { transform: translateX(2px); }
    100% { transform: translateX(0); }
}
.subscribe-slip.shake {
    animation: slip-shake 360ms cubic-bezier(.36,.07,.19,.97);
}

/* hand-drawn ? mark */
.slip-mark {
    position: absolute;
    top: 24px;
    right: -56px;
    width: 40px;
    height: 50px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 320ms ease;
}
.slip-mark.visible {
    opacity: 1;
}
#markPath {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
}
.slip-mark.visible #markPath {
    animation: draw-mark 1200ms ease-out forwards;
}
.slip-mark.visible #markDot {
    animation: dot-mark 320ms ease-out 1100ms forwards;
}
@keyframes draw-mark {
    to { stroke-dashoffset: 0; }
}
@keyframes dot-mark {
    to { opacity: 1; }
}

/* return mark on success */
.slip-return {
    position: absolute;
    top: 26px;
    right: 16px;
    width: 50px;
    height: 30px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 320ms ease;
}
.slip-return.visible {
    opacity: 1;
}
#returnPath {
    stroke-dasharray: 120;
    stroke-dashoffset: 120;
}
.slip-return.visible #returnPath {
    animation: draw-return 1100ms ease-out forwards;
}
@keyframes draw-return {
    to { stroke-dashoffset: 0; }
}

/* ---------- 6. Colophon Footer ---------- */
.band-colophon {
    min-height: 60vh;
    padding-bottom: 8vh;
    position: relative;
}

.envelope-flap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: var(--manila-cream);
    clip-path: polygon(0 0, 50% 100%, 100% 0);
    border-bottom: 1px solid rgba(139,107,61,0.3);
    z-index: 1;
    pointer-events: none;
}

.return-address {
    margin: 4em 0 2em;
    padding-left: 18px;
    border-left: 1.4px solid rgba(139,107,61,0.45);
}

.return-line {
    font-family: 'Lora', serif;
    font-size: 15px;
    line-height: 1.6;
    color: var(--coffee-grounds);
}
.return-from {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.18em;
    color: var(--caramel-ink);
    text-transform: uppercase;
    margin-bottom: 6px;
    opacity: 0.75;
}
.return-fish em {
    color: var(--caramel-ink);
}

.colophon-set {
    margin-top: 3em;
    padding-top: 1.2em;
    border-top: 1px solid rgba(139,107,61,0.3);
    max-width: 64ch;
}
.colophon-mono {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.16em;
    color: var(--caramel-ink);
    opacity: 0.8;
    text-transform: uppercase;
}

/* ---------- Inline link style ---------- */
a {
    color: var(--coffee-grounds);
    text-decoration: none;
    border-bottom: 1px solid var(--aquarium-moss);
    transition: color 240ms ease;
}
a:hover {
    color: var(--aquarium-moss);
}

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
    :root {
        --col-pad-l: 28px;
        --col-pad-r: 28px;
    }
    .wordmark {
        font-size: clamp(3.6rem, 16vw, 5.4rem);
    }
    .tab-shelf {
        flex-wrap: wrap;
    }
    .paper-tab {
        flex: 1 1 calc(50% - 8px);
        min-width: 0;
    }
    .slip-mark {
        right: 8px;
        top: -36px;
    }
    .slip-hint {
        text-align: left;
    }
    .fish {
        opacity: 0.95;
    }
}