:root {
    /* Gold primary (was teal 194/20/49) — matches the hero accent #d99a3a */
    --bulma-primary-h: 36deg;
    --bulma-primary-s: 68%;
    --bulma-primary-l: 54%;
    --bulma-primary-invert-l: 14%; /* dark, readable text on the gold (else Bulma picks white) */

    --bulma-link-h: 0deg;
    --bulma-link-s: 0%;
    --bulma-link-l: 90%;

    --bulma-family-primary: "Instrument Sans", sans-serif;
    --bulma-family-secondary: "Instrument Sans", sans-serif;
    --bulma-body-family: "Instrument Sans", sans-serif;

    /* Body type target: ~16px → ~18px across small → large phones */
    --min-root: 100%;    /* ~16px baseline (respects user/browser settings) */
    --max-root: 112.5%;  /* ~18px upper bound */

    /* Comfortable reading settings */
    --body-line-height: 1.5;
}

html {
    font-size: clamp(var(--min-root), 96% + 0.8vw, var(--max-root)); /* ~16px -> 18px */
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    line-height: var(--body-line-height);
    letter-spacing: normal;
    font-weight: 400;
}

/* Apply these rules to all links that are not of class "button" */
a:not(.button) {
    text-decoration: underline;
}

/* Remove underline on hover for all links that are not of class "button" */
a:not(.button):hover {
    text-decoration: none;
}

/* Ensure link color remains the same for visited and active states for all links that are not of class "button" */
a:not(.button):visited, a:not(.button):active {
    color: inherit;
}

/* Override the rules for any link that is a child of the <header><nav> structure */
.navbar-brand a, #novelcraftedNavbar a {
    text-decoration: none;
}

header nav a:not(.button):visited, header nav a:not(.button):active {
    color: inherit;
}

.aboreto-regular {
    font-family: "Aboreto", system-ui;
    font-style: normal;
    font-weight: 400;
    text-rendering: optimizeLegibility; /* display type only — avoid the global mobile-perf cost */
}

/* Explicit stacking order */
#main-hero { z-index: 0; }
.hero-container .hero-layer.back { z-index: 1; }
.hero-container .floaty { z-index: 2; }
.hero-container .hero-layer.front { z-index: 3; }
#hero-text { z-index: 4; }

#main-hero {
    position: relative;
    margin-bottom: clamp(5px, 0.5vh, 10px);
}

/* Container sets the visual height so following content never overlaps */
.hero-container {
    position: relative;
    /* At least 700px (hero background min-height), or 85vh if bigger.
        Don't let it shrink below this. Start clipping from here to preserve the image appearance */
    min-height: max(85vh, 700px); /* never shorter than the hero height */
    height: 100%;
    width: 100%;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.hero-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

img.hero-layer {
    object-fit: cover;              /* preserve aspect, fill, crop as needed */
    object-position: left top;      /* framing */
    display: block;                 /* remove inline whitespace gaps */
}

.hero-container .floaty {
    position: absolute;
    object-fit: none;
    object-position: center center;
    inset: auto;
    opacity: 0;

    /* Ellipse center — safe defaults; .homepage/.browse override per page */
    --cx: 50%;
    --cy: 50%;

    /* Radii (set ry slightly smaller than rx for a subtle ellipse) */
    --rx: 600px;            /* horizontal radius  */
    --ry: 220px;     /* vertical radius (make < rx for a slight ellipse) */

    /* Animation visuals */
    --duration: 4s;         /* loop time */

    --start-pct: 75%;
    --end-pct: 60%;
    /* For full lap, use 0% -> 100% in the keyframes */

    will-change: offset-distance, opacity; /* transform is static (rotate only) — not animated */

    /* Elliptical path centered at (--cx, --cy) */
    offset-path: ellipse(var(--rx) var(--ry) at var(--cx) var(--cy));

    /* Start/end along that path */
    offset-distance: var(--start-pct);

    /* Keep comet's own rotation independent of tangent */
    offset-rotate: 0deg;
    transform: rotate(var(--tilt));

    /* Same cadence as your original */
    animation: comet-ellipse-arc  var(--duration) linear infinite;

    filter: drop-shadow(0 0 6px rgba(255,255,255,.9))
    drop-shadow(0 0 14px rgba(255,255,255,.6));
}

/* Homepage floaty animations */
/* Partial circular arc (counter clockwise), auto-restarts with fade/reset */
.homepage .hero-container .floaty {
    /* Center of the ellipse  */
    --cx: 550px;
    --cy: 300px; /* 230-290 */

    /* --rx inherited from base .floaty (600px); only --ry differs here */
    --ry: 300px;     /* vertical radius (make < rx for a slight ellipse) */

    --tilt: -12deg;         /* sprite tilt */
}

/* Browse floaty animations */
.browse .hero-container .floaty {
    /* Center of the ellipse  */
    --cx: 800px;
    --cy: 675px;
    --start-pct: 80%;
    --ry: 600px;
    --tilt: -6deg;         /* sprite tilt */
}

/* Fade-in → run arc → fade-out → jump back invisible (like your original) */
@keyframes comet-ellipse-arc {
    0%   { opacity: 0; offset-distance: var(--start-pct); }
    4%   { opacity: 1; offset-distance: var(--start-pct); }
    88%  { opacity: 1; offset-distance: var(--end-pct); }
    96%  { opacity: 0; offset-distance: var(--end-pct); }
    100% { opacity: 0; offset-distance: var(--end-pct); }
}

/* Honor reduced-motion: stop the loop, release the compositor layer */
@media (prefers-reduced-motion: reduce) {
    .hero-container .floaty {
        animation: none;
        will-change: auto;
        opacity: 0;
    }
}


/* Hero Text styles -------------------------- */
/* Hero text overlay — shared by Homepage + Browse (identical markup)
   Type & buttons scale fluidly; sizes tuned to Aboreto's wide metrics so the
   headline holds two clean lines from ~320px up. */
#hero-text{
    position:absolute; inset:0;
    display:flex; flex-direction:column;
    align-items:center; justify-content:flex-start;
    text-align:center; white-space:normal;
    padding:clamp(2.25rem,7vh,6rem) 5vw 1.5rem;
    font-size:1rem;
    pointer-events:none;                 /* only the buttons catch clicks */
    background:radial-gradient(115% 78% at 50% 30%,
        rgba(20,17,28,.70) 0%, rgba(20,17,28,.50) 26%,
        rgba(20,17,28,.22) 46%, rgba(20,17,28,.04) 62%, transparent 74%);
}
#hero-text > span{ float:none; clear:none; margin:0; padding:0; }  /* reset inherited */
#hero-text > *{ pointer-events:auto; }

.hero-eyebrow{
    display:inline-flex; align-items:center; gap:.7em; white-space:nowrap;
    font-family:var(--bulma-family-primary);
    font-size:clamp(.66rem, .5rem + .55vw, .85rem);
    font-weight:700; letter-spacing:.26em; text-transform:uppercase;
    color:var(--bulma-primary);
    margin-bottom:clamp(.6rem,1.6vw,1.1rem);
    text-shadow:0 1px 12px rgba(10,8,16,.7);
}
.hero-eyebrow::before,.hero-eyebrow::after{content:"";width:clamp(14px,2.4vw,26px);height:1px;background:currentColor;opacity:.7}

.hero-title{
    font-family:"Aboreto",system-ui,serif; font-weight:400;
    font-size:clamp(0.95rem, 6vw, 4rem);
    text-rendering:optimizeLegibility; /* display type only */
    line-height:1.12; letter-spacing:0; color:#f4ecdc;
    margin:0 0 clamp(.7rem,1.8vw,1.1rem);
    text-shadow:0 2px 30px rgba(12,10,18,.7),0 1px 4px rgba(12,10,18,.5);
}
.hero-title .has-text-primary{color:var(--bulma-primary)!important}

.hero-sub{
    font-family:var(--bulma-family-primary);
    font-size:clamp(.95rem, .9rem + .45vw, 1.2rem);
    line-height:1.55; color:#f4ecdc;
    max-width:34rem; margin:0 auto clamp(1.1rem,2.4vw,1.6rem);
    text-shadow:0 1px 16px rgba(12,10,18,.85),0 1px 3px rgba(12,10,18,.7);
}

.hero-actions{
    display:flex; flex-wrap:wrap; justify-content:center;
    gap:clamp(.6rem,1.4vw,.85rem);
    width:100%; max-width:30rem;
}
.hero-actions .button{
    font-weight:700;
    font-size:clamp(.9rem, .85rem + .35vw, 1.05rem);
    height:auto; min-height:3em; padding:.8em 1.55em; border-radius:2px;
}
.hero-actions .button:not(.is-primary){           /* "Browse stories" reads over the art */
    background:rgba(20,17,28,.34); color:#f4ecdc; border-color:rgba(244,236,220,.55);
    backdrop-filter:blur(3px);
}
.hero-actions .button:not(.is-primary):hover{
    background:rgba(20,17,28,.5); border-color:var(--bulma-primary); color:var(--bulma-primary);
}
.hero-arrow{margin-left:.5em}

/* Scroll-down cue — bottom-center of the hero */
.hero-scroll{
    position:absolute; z-index:5; left:50%; bottom:clamp(14px,2.4vh,28px);
    transform:translateX(-50%);
    display:flex; flex-direction:column; align-items:center; gap:9px;
    font-family:var(--bulma-family-primary);
    font-size:.66rem; font-weight:700; letter-spacing:.28em; text-transform:uppercase;
    opacity:.95; pointer-events:none;
}
.hero-scroll__label{
    padding:.4em .85em; border-radius:999px;
    background:rgba(20,17,28,.5);
    -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
    color:#f4ecdc; text-shadow:0 1px 4px rgba(10,8,16,.55);
}
.hero-scroll__line{
    width:1px; height:34px; position:relative; overflow:hidden;
    background:linear-gradient(rgba(20,17,28,.6), rgba(20,17,28,0));
}
.hero-scroll__line::after{
    content:""; position:absolute; left:0; top:-34px; width:1px; height:34px;
    background:var(--bulma-primary);
    animation:hero-scroll-drop 2.2s cubic-bezier(.6,0,.2,1) infinite;
}
@keyframes hero-scroll-drop{ 0%{top:-34px} 60%,100%{top:34px} }
@media (prefers-reduced-motion: reduce){ .hero-scroll__line::after{ animation:none } }

.image img.cover-art {
    max-width: 320px;
}

@media screen and (max-width: 768px) {
    /* Hero overlay (Homepage + Browse) --- */
    #hero-text{ padding:clamp(2rem,8vh,4.5rem) 5vw 1.25rem; }

    .image img.cover-art {
        max-width: 100%;
    }
}

/* Hero — small phones: simplify the eyebrow, stack the buttons */
@media screen and (max-width: 520px) {
    .hero-eyebrow{ letter-spacing:.2em; }
    .hero-eyebrow::before,.hero-eyebrow::after{ display:none; }
}
@media screen and (max-width: 480px) {
/* Small phones: bold + a touch larger headline for readability.
       Aboreto ships 400 only — the browser faux-bolds it, which reads cleanly here.
       6.7vw is capped right at the point where it still holds two lines. */
    .hero-title{ font-weight:700; font-size:clamp(1.05rem, 6.7vw, 1.85rem); }
    .hero-actions{ flex-direction:column; align-items:stretch; max-width:17rem; }
    .hero-actions .button{ width:100%; }
    .hero-eyebrow{ display:none; }   /* phones: drop the eyebrow entirely */
}

/* End Hero Text styles -------------------------- */



/* Browse pages */
.rating {
    /* Controls */
    --stars: 5;
    --rating: 4;          /* set per instance, e.g., style="--rating: 3.75" */
    --size: 1.25rem;
    --star-color: #f5c518; /* filled */
    --star-bg: #e5e7eb;    /* empty */

    position: relative;
    display: inline-grid;
    /* 5 equal columns ensures identical star slots for both layers */
    grid-template-columns: repeat(var(--stars), 1fr);
    line-height: 1; /* stable vertical metrics */
}

/* Both layers use the exact same grid so icons line up pixel-for-pixel */
.rating__base,
.rating__fill {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: inherit;
    align-items: center;
}

/* Prevent gaps/whitespace between icons inside each layer */
.rating__base i,
.rating__fill i {
    font-size: var(--size);
    line-height: 1;
    /* fa-fw gives consistent width; no extra margins needed */
}

/* Colors */
.rating__base i { color: var(--star-bg); }
.rating__fill i { color: var(--star-color); }

/* Gold layer overlays and is clipped to fractional width */
.rating__fill {
    position: absolute;
    inset: 0;
    width: calc((var(--rating) / var(--stars)) * 100%);
    overflow: hidden;
    pointer-events: none;
}


/* Reading */
.text-container {
    max-width: 64ch;
    margin-left: auto;
    margin-right: auto;
}

.text-container a:link.disabled,
.text-container a.disabled {
    cursor: not-allowed;
    pointer-events: none;
}

.award {
    color: #FFC72C;
}

.rating input {
    position: absolute;
    opacity: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.rating label {
    position: relative;
    padding: 0 0.25rem;
}

.rating label:has(~ label > input:checked),
.rating label:has(input:checked) {
    color: #FFC72C;
}

.rating label:has(~ label > input:hover),
.rating label:has(input:hover) {
    color: #FFC72C;
}

.rating label:has(input:active) {
    color: #C89400
}

/* Honeypot fields are hidden via Bulma's .is-sr-only utility in the view */

#paypal-button-container {
    position: relative;
    z-index: 2;
}