:root {
    /* Typography source: (Google Fonts) */
    --primary-bg: #f4ece1;
    --hero-bg: #f9f3ea;
    --deep-ground: #2c1810;
    --primary-accent: #c4623a;
    --secondary-accent: #7a3b2e;
    --tertiary-accent: #d4a055;
    --field-line-color: #b06b4f;
    --annotation-ink: #6b4935;
    --highlight-glow: #e8945a;
    --cool-contrast: #5a8a7a;
    --body-text: #3d2b1f;
}

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

html {
    background: var(--primary-bg);
    overflow-x: hidden;
}

body {
    min-height: 100%;
    overflow-x: hidden;
    font-family: 'Source Sans 3', sans-serif;
    color: var(--body-text);
    background-color: var(--primary-bg);
    background-image: linear-gradient(rgba(212, 160, 85, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(212, 160, 85, 0.08) 1px, transparent 1px);
    background-size: 24px 24px;
}

.site-shell {
    position: relative;
}

.hero-section {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at 52% 46%, rgba(232, 148, 90, 0.18), transparent 30%), var(--hero-bg);
}

.paper-grain {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(circle at 20% 30%, rgba(44, 24, 16, 0.045) 0 1px, transparent 1.4px), radial-gradient(circle at 72% 64%, rgba(122, 59, 46, 0.04) 0 1px, transparent 1.3px);
    background-size: 31px 37px, 43px 29px;
    mix-blend-mode: multiply;
}

.monopole-canvas {
    width: min(1200px, 116vw);
    height: min(900px, 100vh);
    overflow: visible;
    transform-origin: center;
}

.field-path {
    fill: none;
    stroke: var(--field-line-color);
    stroke-width: 2.1;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 9 6 4 5;
    animation: field-pulse 8s linear infinite;
}

.ring-two { animation-duration: 9s; opacity: 0.76; }
.ring-three { animation-duration: 10.5s; opacity: 0.58; }
.ring-four { animation-duration: 12s; opacity: 0.42; }
.tendril { stroke-width: 1.45; opacity: 0.46; animation-duration: 7s; }

@keyframes field-pulse {
    0% { stroke-dashoffset: 0; transform: scale(0.992); }
    50% { stroke-dashoffset: -56; transform: scale(1.012); }
    100% { stroke-dashoffset: -112; transform: scale(0.992); }
}

.monopole-core {
    filter: drop-shadow(0 18px 24px rgba(122, 59, 46, 0.18));
    transform-origin: 600px 450px;
    animation: core-vibrate 3.8s ease-in-out infinite;
}

@keyframes core-vibrate {
    0%, 100% { transform: rotate(-0.4deg) scale(1); }
    50% { transform: rotate(0.6deg) scale(1.025); }
}

.hatch {
    fill: none;
    stroke: var(--deep-ground);
    stroke-width: 1.2;
    opacity: 0.54;
}

.draw-path {
    fill: none;
    stroke: var(--secondary-accent);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.draw-path.copper, .copper {
    stroke: var(--cool-contrast);
}

.botanical-hero .draw-path {
    stroke-width: 2;
    opacity: 0.74;
}

.domain-overlay {
    position: absolute;
    left: 8vw;
    top: 68vh;
    max-width: min(760px, 82vw);
    z-index: 4;
    opacity: 0;
    transform: translateY(12px);
    animation: hero-lettering 1.2s ease 0.8s forwards;
}

@keyframes hero-lettering {
    to { opacity: 1; transform: translateY(0); }
}

.hero-note, .folio {
    font-family: 'Caveat', cursive;
    color: rgba(107, 73, 53, 0.82);
    font-size: clamp(0.95rem, 1.2vw, 1.1rem);
    margin-bottom: 0.55rem;
}

.domain-name, h2 {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    line-height: 0.92;
    color: var(--deep-ground);
}

.domain-name {
    font-size: clamp(2.8rem, 6vw, 5.2rem);
    text-shadow: 2px 2px 0 rgba(212, 160, 85, 0.22);
}

.domain-tagline, h3 {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 500;
    color: var(--secondary-accent);
    letter-spacing: 0.02em;
    line-height: 1.25;
}

.domain-tagline {
    font-size: clamp(1.25rem, 2.2vw, 2.05rem);
    margin-top: 0.8rem;
}

.scroll-indicator {
    position: absolute;
    bottom: 2.1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    display: grid;
    justify-items: center;
    gap: 0.4rem;
    font-family: 'Caveat', cursive;
    color: var(--annotation-ink);
    cursor: pointer;
    transition: opacity 0.35s ease;
}

.scroll-indicator i {
    width: 1px;
    height: 46px;
    background: var(--primary-accent);
    position: relative;
}

.scroll-indicator i::after {
    content: '';
    position: absolute;
    left: -4px;
    bottom: 0;
    width: 9px;
    height: 9px;
    border-right: 1px solid var(--primary-accent);
    border-bottom: 1px solid var(--primary-accent);
    transform: rotate(45deg);
    animation: arrow-drop 1.8s ease-in-out infinite;
}

@keyframes arrow-drop {
    50% { bottom: -8px; }
}

.pattern-band {
    height: 32px;
    border-top: 1px solid rgba(122, 59, 46, 0.28);
    border-bottom: 1px solid rgba(122, 59, 46, 0.24);
}

.chevron { background: repeating-linear-gradient(135deg, var(--primary-accent) 0 10px, var(--tertiary-accent) 10px 16px, var(--primary-bg) 16px 26px); }
.triangles { background: linear-gradient(45deg, transparent 75%, rgba(196, 98, 58, 0.8) 75%), linear-gradient(-45deg, transparent 75%, rgba(212, 160, 85, 0.85) 75%), var(--primary-bg); background-size: 32px 32px; }
.diamonds { background: repeating-linear-gradient(45deg, var(--primary-bg) 0 11px, var(--field-line-color) 11px 13px, var(--primary-bg) 13px 24px, var(--tertiary-accent) 24px 26px); }
.waves { background: radial-gradient(ellipse at top, rgba(196, 98, 58, 0.86) 0 25%, transparent 27%) 0 0/38px 32px, var(--primary-bg); }

.notebook-section {
    min-height: 85vh;
    padding: clamp(4rem, 8vw, 7rem) 5vw;
    display: grid;
    align-items: center;
    transform-origin: center top;
    transition: transform 0.7s ease;
}

.notebook-section.bending, .archive-section.bending {
    transform: perspective(1200px) rotateX(1.5deg);
}

.notebook-grid {
    width: min(1280px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 7fr) 36px minmax(230px, 3.2fr);
    gap: clamp(1.2rem, 2.4vw, 2rem);
    align-items: center;
}

.orientation-right {
    grid-template-columns: minmax(230px, 3.2fr) 36px minmax(0, 7fr);
}

.main-panel {
    position: relative;
    padding: clamp(2rem, 4vw, 4rem);
    background: rgba(249, 243, 234, 0.66);
    border: 1px solid rgba(176, 107, 79, 0.28);
    box-shadow: 15px 18px 0 rgba(212, 160, 85, 0.10);
}

.main-panel::before {
    content: '';
    position: absolute;
    inset: 14px;
    border: 1px dashed rgba(122, 59, 46, 0.22);
    pointer-events: none;
}

h2 {
    font-size: clamp(2.8rem, 6vw, 5.2rem);
    margin-bottom: 1rem;
}

h3 {
    font-size: clamp(1.4rem, 3vw, 2.4rem);
    margin-bottom: 1.4rem;
}

p {
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    line-height: 1.72;
    letter-spacing: 0.01em;
}

.main-panel p + p {
    margin-top: 1rem;
}

.spine {
    width: 100%;
    height: min(520px, 62vh);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 560'%3E%3Cpath d='M18 0 C16 70 23 126 18 196 C12 274 21 352 17 430 C15 486 20 526 18 560' fill='none' stroke='%237a3b2e' stroke-width='2' stroke-dasharray='8 7' opacity='.58'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.margin-panel {
    min-height: 380px;
    padding: 1.5rem;
    background-image: radial-gradient(rgba(176, 107, 79, 0.25) 1.5px, transparent 1.7px);
    background-size: 16px 16px;
    position: relative;
}

.hand-note {
    font-family: 'Caveat', cursive;
    color: rgba(176, 107, 79, 0.82);
    font-size: clamp(0.95rem, 1.6vw, 1.3rem);
    line-height: 1.2;
    transform: rotate(-2deg);
}

.hand-note.large {
    font-size: clamp(1.5rem, 2.6vw, 2.2rem);
    margin-bottom: 2rem;
}

.margin-doodle, .dipole-doodle, .fern-doodle {
    width: 100%;
    max-height: 300px;
    margin-bottom: 1rem;
    overflow: visible;
}

.dot {
    fill: var(--primary-accent);
    stroke: var(--secondary-accent);
    stroke-width: 2;
}

.circled, .asterisk {
    position: absolute;
    right: 1.4rem;
    bottom: 1rem;
    font-family: 'Caveat', cursive;
    font-size: 2rem;
    color: var(--secondary-accent);
}

.circled {
    border: 2px solid var(--field-line-color);
    border-radius: 50%;
    width: 58px;
    height: 50px;
    display: grid;
    place-items: center;
    transform: rotate(7deg);
}

.callout-hatch {
    margin-top: 1.7rem;
    padding: 1rem 1.2rem;
    font-family: 'Caveat', cursive;
    font-size: 1.35rem;
    color: var(--secondary-accent);
    background-color: rgba(212, 160, 85, 0.16);
    background-image: repeating-linear-gradient(45deg, rgba(122, 59, 46, 0.08) 0 2px, transparent 2px 8px);
    border-left: 4px solid var(--primary-accent);
}

.archive-section {
    min-height: 88vh;
    padding: clamp(4rem, 9vw, 8rem) 5vw;
    display: grid;
    place-items: center;
    transition: transform 0.7s ease;
}

.archive-spread {
    width: min(1120px, 100%);
    display: grid;
    grid-template-columns: 58% 34%;
    gap: 8%;
    align-items: center;
}

.archive-copy {
    padding: 2rem;
    border-top: 2px solid var(--primary-accent);
    border-bottom: 2px solid var(--tertiary-accent);
    font-size: clamp(1.15rem, 1.7vw, 1.5rem);
}

.divider-botany {
    grid-column: 1 / -1;
    width: 100%;
    margin-top: 2rem;
}

.reveal-node {
    opacity: 0;
    transform: scale(0.92);
    transition-property: opacity, transform;
    transition-duration: 0.6s;
    transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}

.section-visible .reveal-node {
    opacity: 1;
    transform: scale(1);
}

.draw-svg .draw-path {
    stroke-dasharray: var(--path-length, 420);
    stroke-dashoffset: var(--path-length, 420);
    transition: stroke-dashoffset 1.5s ease;
}

.section-visible .draw-svg .draw-path {
    stroke-dashoffset: 0;
}

.compass {
    position: fixed;
    right: 22px;
    bottom: 22px;
    width: 48px;
    height: 48px;
    z-index: 20;
    color: var(--secondary-accent);
}

.compass svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.compass-ring, .compass-cross {
    fill: rgba(249, 243, 234, 0.62);
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
}

.compass-cross { fill: none; opacity: 0.56; }

.compass-needle {
    fill: var(--primary-accent);
    stroke: var(--deep-ground);
    stroke-width: 1.1;
    transform-origin: 32px 32px;
}

.compass.ripple::after {
    content: '';
    position: absolute;
    inset: -8px;
    border: 1px solid var(--highlight-glow);
    border-radius: 50%;
    animation: compass-ripple 0.75s ease-out;
}

@keyframes compass-ripple {
    from { transform: scale(0.8); opacity: 0.9; }
    to { transform: scale(1.65); opacity: 0; }
}

@media (max-width: 800px) {
    .domain-overlay { left: 6vw; top: 62vh; }
    .notebook-grid, .orientation-right, .archive-spread { grid-template-columns: 1fr; }
    .spine { height: 42px; background-size: 100% 100%; transform: rotate(90deg); }
    .margin-panel { min-height: 260px; }
    h2 { font-size: clamp(2.2rem, 11vw, 4rem); }
}