/* monopole.style — a thin handmade book, not an app.
   Strict duotone: Sumi Ink + Unbleached Linen, one thread of Persimmon.
   No blues, no greens, no third hue. One column, one axis. */

:root {
    --sumi:        #2B2622;  /* warm near-black — body text, nav mark */
    --linen:       #F2EBDD;  /* the page */
    --persimmon:   #C66B3D;  /* the one accent — used mostly at 25–40% */
    --linen-press: #D8CFBC;  /* pale blob fill */
    --ash-linen:   #8A7E6B;  /* mid-tone hairlines, blurred blob edge */
    --walnut:      #5B4D3E;  /* secondary text, the dark blob */
    --risen-linen: #E9DECB;  /* faint paper rectangle behind text */

    --col: 38rem;
    --rhythm: 7.2rem;
}

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

html { scroll-behavior: smooth; }

body {
    background: var(--linen);
    color: var(--sumi);
    font-family: "EB Garamond", Georgia, "Times New Roman", serif;
    font-size: 1.0625rem;
    line-height: 1.85;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

/* ---- The Pole: one hair-thin axis, fades in from nothing, fades to nothing ---- */
.pole {
    position: fixed;
    top: 0; bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(198, 107, 61, 0.30) 14%,
        rgba(198, 107, 61, 0.30) 86%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 1;
}

/* ---- The one-pole compass / depth gauge, lower-right ---- */
.gauge {
    position: fixed;
    right: 2.2rem;
    bottom: 2.2rem;
    width: 34px; height: 34px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 20;
    display: block;
}
.gauge svg { display: block; overflow: visible; }
.gauge-ring {
    fill: none;
    stroke: var(--persimmon);
    stroke-opacity: 0.45;
    stroke-width: 1.1;
}
.gauge-tick {
    stroke: var(--persimmon);
    stroke-opacity: 0.6;
    stroke-width: 1.1;
}
.gauge-progress {
    fill: none;
    stroke: var(--persimmon);
    stroke-opacity: 1;
    stroke-width: 1.6;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.18s linear;
}
.gauge-readout {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-family: "Fragment Mono", "Courier New", monospace;
    font-size: 0.5rem;
    letter-spacing: 0.10em;
    color: var(--persimmon);
    opacity: 0.55;
    text-transform: uppercase;
    pointer-events: none;
}

/* ---- The room: one column, centred, enormous ma above/below ---- */
main {
    max-width: var(--col);
    margin-inline: auto;
    padding: 14rem 1.6rem;
    position: relative;
    z-index: 2;
}

/* ---- Sections as garments on a rail ---- */
.garment {
    position: relative;
    margin-bottom: var(--rhythm);
    /* fade-reveal: starts hidden, eases in when observed */
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.9s ease, transform 0.9s ease;
}
.garment.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.garment:last-child { margin-bottom: 0; }

/* ---- The three flat planes (washi thickness, not parallax theatre) ---- */
.plane-back {
    position: absolute;
    inset: -8rem -22vw -8rem -22vw;
    z-index: -1;
    pointer-events: none;
    will-change: transform;
    overflow: visible;
}
.plane-mid {
    position: relative;
    z-index: 1;
    background: linear-gradient(var(--risen-linen), var(--risen-linen));
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    padding: 3.4rem 2.2rem;
    /* the faint paper rectangle behind the text column */
    box-shadow: 0 0 0 1px rgba(138, 126, 107, 0.10);
}
.plane-front {
    position: relative;
    z-index: 2;
    margin-top: 3.4rem;
    text-align: center;
    will-change: transform;
}

/* the faint paper rectangle should only be a faint wash, not a hard box —
   so give it a soft pseudo-edge feel via low-opacity layered background */
.plane-mid {
    background-color: var(--risen-linen);
    background-image: none;
}

/* ---- Organic blobs as garments ("the hung cloth") ---- */
.blob {
    display: block;
    width: 100%;
    height: 100%;
    filter: blur(2px);
    opacity: 0.62;
    transform-origin: 50% 18%;
}
.blob-tilt-a { animation: sway-a 18s ease-in-out infinite; }
.blob-tilt-b { animation: sway-b 18s ease-in-out infinite; }

@keyframes sway-a {
    0%   { transform: rotate(5deg); }
    50%  { transform: rotate(6.5deg); }
    100% { transform: rotate(5deg); }
}
@keyframes sway-b {
    0%   { transform: rotate(-7deg); }
    50%  { transform: rotate(-8.5deg); }
    100% { transform: rotate(-7deg); }
}

/* let two cloths darken where they overlap at section seams */
#s5 .plane-back .blob,
#s4 .plane-back .blob { mix-blend-mode: multiply; }

/* ---- Typography ---- */
.folio {
    font-family: "Fragment Mono", "Courier New", monospace;
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--persimmon);
    opacity: 0.72;
    margin-bottom: 2.6rem;
}

.hook-line {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-weight: 300;
    font-size: clamp(2.4rem, 7vw, 5rem);
    line-height: 1.18;
    letter-spacing: 0.005em;
    color: var(--sumi);
    margin: 1.4rem 0 0;
}
.hook-sub {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1.3rem, 3vw, 1.85rem);
    color: var(--walnut);
    margin-top: 1.8rem;
    line-height: 1.4;
}

.dropcap {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-weight: 500;
    float: left;
    font-size: 3.4em;
    line-height: 0.82;
    padding: 0.05em 0.08em 0 0;
    color: var(--sumi);
}

.head {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-weight: 500;
    font-size: clamp(1.7rem, 4.2vw, 2.7rem);
    line-height: 1.22;
    letter-spacing: 0.006em;
    color: var(--sumi);
    margin: 1rem 0 1.9rem;
}

.garment p {
    margin-bottom: 1.45rem;
    color: var(--sumi);
    hyphens: none;
}
.garment p:last-child { margin-bottom: 0; }

.garment em {
    font-style: italic;
    color: var(--walnut);
}

.big-line {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-weight: 300;
    font-size: clamp(1.6rem, 4.6vw, 2.4rem);
    line-height: 1.32;
    color: var(--sumi);
    margin: 2.2rem 0 2.4rem !important;
    letter-spacing: 0.005em;
}

.aside {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1.25rem, 3vw, 1.7rem);
    line-height: 1.4;
    color: var(--walnut);
    margin-top: 2.2rem !important;
}
.aside em { color: var(--walnut); font-style: italic; }

/* ---- Links: an underline-draw in Persimmon Thread ---- */
.link {
    color: var(--sumi);
    text-decoration: none;
    background-image: linear-gradient(var(--persimmon), var(--persimmon));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 1px;
    transition: background-size 0.26s ease;
    padding-bottom: 1px;
}
.link:hover { background-size: 100% 1px; }

/* ---- Three Pulls — stanzas with hanging indents (not a card grid) ---- */
.stanza {
    margin-bottom: 2.8rem;
    padding-left: 1.6rem;
    border-left: 1px solid rgba(138, 126, 107, 0.28);
}
.stanza:last-child { margin-bottom: 0; }
.stanza-tag {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-style: italic;
    font-weight: 500;
    font-size: 1.35rem;
    color: var(--walnut);
    margin-bottom: 0.5rem !important;
    margin-left: -1.6rem;
}

/* ---- The interactive Compass moment ---- */
.compass-stage {
    perspective: 900px;
    margin: 2.6rem auto 1.4rem;
    width: min(22rem, 80%);
    aspect-ratio: 600 / 700;
}
.compass-blob {
    width: 100%; height: 100%;
    filter: blur(0.4px);
    opacity: 0.85;
    transform-style: preserve-3d;
    transform-origin: 50% 30%;
    transform: rotateX(0deg) rotateY(0deg);
    will-change: transform;
    animation: none;
}
.compass-caption { text-align: center; margin-top: 0.4rem !important; }

/* ---- Stitch-marks (the only "icons") ---- */
.stitch-run {
    width: 120px; height: 8px;
    display: inline-block;
}
.stitch-dashes line {
    stroke: var(--persimmon);
    stroke-opacity: 0.65;
    stroke-width: 1.4;
    stroke-linecap: round;
    /* path-draw: dashes draw in left-to-right, staggered */
    stroke-dasharray: 16;
    stroke-dashoffset: 16;
    transition: stroke-dashoffset 0.4s ease;
}
.is-visible .stitch-dashes line { stroke-dashoffset: 0; }
.is-visible .stitch-dashes line:nth-child(1) { transition-delay: 0.04s; }
.is-visible .stitch-dashes line:nth-child(2) { transition-delay: 0.10s; }
.is-visible .stitch-dashes line:nth-child(3) { transition-delay: 0.16s; }
.is-visible .stitch-dashes line:nth-child(4) { transition-delay: 0.22s; }
.is-visible .stitch-dashes line:nth-child(5) { transition-delay: 0.28s; }

/* selvedge edge — a row of tiny ticks, once, on the final section */
.selvedge {
    width: 100%;
    max-width: 480px;
    height: 12px;
    display: block;
    margin: 2.6rem 0 0;
}
.selvedge-ticks line {
    stroke: var(--persimmon);
    stroke-opacity: 0.5;
    stroke-width: 1.2;
    stroke-linecap: round;
}

/* ---- The sign-off ---- */
.signoff-line {
    font-size: clamp(2rem, 6vw, 4rem);
    margin-top: 0.5rem;
}
.colophon {
    font-family: "Fragment Mono", "Courier New", monospace;
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--persimmon);
    opacity: 0.6;
    line-height: 2.2;
    margin-top: 2.2rem !important;
}
.garment-last .plane-mid { padding-bottom: 4.4rem; }

/* ---- Reduced motion: freeze planes, disable blob drift ---- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .blob-tilt-a, .blob-tilt-b { animation: none; }
    .garment { transition: none; opacity: 1; transform: none; }
    .stitch-dashes line { transition: none; stroke-dashoffset: 0; }
    .gauge-progress { transition: none; }
}

/* ---- Narrow screens: the Pole moves to the gutter, planes calm down ---- */
@media (max-width: 600px) {
    :root { --rhythm: 5.4rem; }
    main { padding: 9rem 1.4rem; }
    .pole {
        left: 1.5rem;
        transform: none;
    }
    .plane-back { inset: -5rem -28vw -5rem -10vw; opacity: 0.85; }
    .plane-mid { padding: 2.4rem 1.4rem; }
    .gauge { right: 1.3rem; bottom: 1.3rem; }
    .dropcap { font-size: 2.8em; }
    .stanza-tag { margin-left: -1.6rem; }
}