/* ============================================================
   Scribe Custom Journals — brand design system
   Palette: pressed-petal pinks, warm cocoa, cream paper.
   ============================================================ */

:root {
    /* Surfaces */
    --paper: #FBF7F1;
    --paper-2: #F6EEE4;
    --cream: #F2E7D8;
    --card: #FFFFFF;

    /* Pinks */
    --blush: #E9C4C1;
    --blush-soft: #F3DAD7;
    --rose: #D49A94;
    --clay: #C58A7A;

    /* Browns */
    --caramel: #B98A5E;
    --mocha: #7C5A44;
    --espresso: #4A3528;

    /* Ink & text */
    --ink: #3B2E25;
    --muted: #8B7867;
    --line: #E7DACB;

    /* Accents */
    --gold: #C8992F;
    --sage: #AEB79B;

    --shadow-sm: 0 2px 10px rgba(74, 53, 40, 0.06);
    --shadow-md: 0 14px 40px rgba(74, 53, 40, 0.12);
    --shadow-lg: 0 30px 70px rgba(74, 53, 40, 0.18);

    --radius: 18px;
    --radius-sm: 12px;
    --btn-radius: 999px;
    --maxw: 1180px;

    --header-bg: rgba(251, 247, 241, 0.82);
    --body-bg: var(--paper);

    --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --font-body: 'Nunito Sans', -apple-system, Segoe UI, Roboto, sans-serif;
    --font-script: 'Dancing Script', cursive;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--body-bg);
    line-height: 1.65;
    font-size: 17px;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 500;
    line-height: 1.12;
    color: var(--espresso);
    letter-spacing: -0.01em;
    margin: 0 0 0.5em;
}

h1 { font-size: clamp(2.4rem, 5vw, 4rem); }
h2 { font-size: clamp(1.9rem, 3.5vw, 2.8rem); }
h3 { font-size: 1.35rem; }

a { color: var(--mocha); text-decoration: none; transition: color .2s; }
a:hover { color: var(--clay); }

p { margin: 0 0 1rem; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

.eyebrow {
    font-family: var(--font-body);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 0.74rem;
    font-weight: 800;
    color: var(--clay);
    margin-bottom: 0.9rem;
    display: inline-block;
}

.script { font-family: var(--font-script); color: var(--rose); font-weight: 600; }

.lead { font-size: 1.15rem; color: var(--muted); max-width: 62ch; }

.muted { color: var(--muted); }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--font-body);
    font-weight: 800;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
    padding: 0.85rem 1.6rem;
    border-radius: var(--btn-radius);
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
    text-decoration: none;
    line-height: 1;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
    background: var(--espresso);
    color: var(--paper);
    box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--mocha); color: #fff; box-shadow: var(--shadow-md); transform: translateY(-1px); }

.btn-rose {
    background: linear-gradient(135deg, var(--rose), var(--clay));
    color: #fff;
    box-shadow: 0 10px 24px rgba(197, 138, 122, 0.35);
}
.btn-rose:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 16px 30px rgba(197, 138, 122, 0.42); }

.btn-ghost {
    background: transparent;
    border-color: var(--line);
    color: var(--espresso);
}
.btn-ghost:hover { border-color: var(--clay); color: var(--clay); background: #fff; }

.btn-lg { padding: 1.05rem 2rem; font-size: 1.02rem; }
.btn-block { width: 100%; justify-content: center; }

.pill {
    display: inline-flex; align-items: center; gap: .4rem;
    background: var(--blush-soft); color: var(--mocha);
    padding: .35rem .8rem; border-radius: 999px;
    font-size: .78rem; font-weight: 800; letter-spacing: .02em;
}

/* ---------- Header / Nav ---------- */
.site-header {
    position: sticky; top: 0; z-index: 50;
    background: var(--header-bg);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
}
/* Three tracks rather than space-between, so the links sit centred on the
   header regardless of how wide the brand and the actions happen to be. */
/* The header's height and the logo inside it are one number each, because three
   other rules are measured off the header: the open mobile menu hangs from its
   underside, and anchors have to clear it. Changing the logo without them going
   with it is how the menu ends up floating over the page. */
:root { --nav-h: 74px; --brand-h: 46px; }

.nav {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
    height: var(--nav-h); gap: 1.5rem;
}
.nav > .nav-actions { justify-self: end; }
.brand {
    font-family: var(--font-display);
    font-size: 1.55rem; font-weight: 600; color: var(--espresso);
    letter-spacing: 0.02em; display: flex; align-items: center; gap: .6rem;
}
.brand:hover { color: var(--espresso); }
.brand-logo { height: var(--brand-h); width: auto; display: block; }
.footer-logo { height: 52px; width: auto; margin-bottom: .8rem; }
.brand .mark {
    width: 34px; height: 34px; border-radius: 9px;
    background: linear-gradient(135deg, var(--rose), var(--caramel));
    color: #fff; display: grid; place-items: center;
    font-size: 1.1rem; box-shadow: var(--shadow-sm);
}
.brand small {
    display: block; font-family: var(--font-body);
    font-size: .58rem; letter-spacing: .28em; text-transform: uppercase;
    color: var(--clay); font-weight: 800; margin-top: 2px;
}
.nav-links { display: flex; align-items: center; gap: 1.8rem; list-style: none; margin: 0; padding: 0; }
.nav-links a { color: var(--mocha); font-weight: 700; font-size: .96rem; }
.nav-links a:hover { color: var(--clay); }
/* The custom path is the one we want picked, so it carries the accent. */
.nav-links a.is-featured { color: var(--rose); }
.nav-links a.is-featured:hover { color: var(--clay); }
.nav-actions { display: flex; align-items: center; gap: .9rem; }
.cart-link {
    position: relative; display: inline-flex; align-items: center; gap: .4rem;
    font-weight: 800; color: var(--espresso);
}
.cart-ico {
    width: 20px; height: 20px; fill: none; stroke: currentColor;
    stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.cart-badge {
    background: var(--rose); color: #fff; font-size: .68rem; font-weight: 800;
    min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px;
    display: inline-grid; place-items: center;
}
.nav-toggle { display: none; background: none; border: none; font-size: 1.5rem; color: var(--espresso); cursor: pointer; }

/* ---------- Footer ---------- */
.site-footer {
    background: var(--espresso); color: #E8D9C9; margin-top: 5rem;
    padding: 3.5rem 0 2rem;
}
.site-footer h4 { color: #fff; font-size: 1rem; margin-bottom: 1rem; font-family: var(--font-body); text-transform: uppercase; letter-spacing: .12em; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2.5rem; }
.site-footer a { color: #D8C4B2; display: block; margin-bottom: .5rem; }
.site-footer a:hover { color: #fff; }
.footer-brand { font-family: var(--font-display); font-size: 1.6rem; color: #fff; margin-bottom: .6rem; }
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.12); margin-top: 2.5rem; padding-top: 1.5rem;
    display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    color: #B7A390; font-size: .85rem;
}
.footer-meta { display: flex; align-items: center; gap: 1.1rem; }
.footer-admin {
    /* .site-footer a is display:block with a bottom margin — undo both so the
       pill sits on the baseline of the copyright line. */
    display: inline-block; margin: 0;
    padding: .32rem .9rem; border-radius: 999px;
    border: 1px solid rgba(255,255,255,.2);
    font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    transition: background .15s, border-color .15s, color .15s;
}
.footer-admin:hover, .footer-admin:focus-visible {
    background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.45); color: #fff;
}

.newsletter { display: flex; gap: .5rem; margin-top: .8rem; }
.newsletter input {
    flex: 1; padding: .7rem 1rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.2);
    background: rgba(255,255,255,.06); color: #fff; font-family: var(--font-body);
}
.newsletter input::placeholder { color: #A38F7C; }

/* ---------- Sections ---------- */
.section { padding: 5rem 0; }
.section-sm { padding: 3rem 0; }
.section-head { text-align: center; max-width: 640px; margin: 0 auto 3rem; }
.section-head .lead { margin: 0 auto; }

/* ---------- Cards ---------- */
.card {
    background: var(--card); border-radius: var(--radius);
    box-shadow: var(--shadow-sm); border: 1px solid var(--line);
    overflow: hidden;
}

.grid { display: grid; gap: 1.5rem; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

/* Feature / product cards */
.product-card { display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s; }
.product-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.product-media {
    aspect-ratio: 4 / 3; display: grid; place-items: center;
    background: var(--paper-2); position: relative; overflow: hidden;
}
.product-body { padding: 1.3rem 1.4rem 1.6rem; }
.product-body h3 { margin-bottom: .25rem; }
.price { font-family: var(--font-display); font-size: 1.25rem; color: var(--mocha); font-weight: 600; }

/* Steps */
.step-num {
    width: 46px; height: 46px; border-radius: 50%;
    background: var(--blush-soft); color: var(--clay);
    font-family: var(--font-display); font-size: 1.3rem; font-weight: 600;
    display: grid; place-items: center; margin-bottom: 1rem;
}

/* ---------- Mini journal tile (shop + cart) ---------- */
.mini-journal {
    --mj-a: #D49A94; --mj-b: #b87d76;
    --mj-foil: linear-gradient(135deg,#f4e2a1,#c8992f 45%,#f7edc0 70%,#a9781f);
    position: relative; width: 120px; height: 160px;
    border-radius: 4px 10px 10px 4px;
    background: linear-gradient(120deg, color-mix(in srgb, var(--mj-a) 85%, #fff), var(--mj-a) 45%, var(--mj-b));
    box-shadow: inset 20px 0 26px -22px rgba(0,0,0,.5), var(--shadow-md);
    display: grid; place-items: center; flex: none;
}
.mini-journal::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: 12px; width: 2px;
    background: linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.05));
}
.mini-journal::after {
    content: ""; position: absolute; inset: 10px 8px 10px 18px;
    border: 1.2px dashed rgba(255,255,255,.4); border-radius: 3px;
}
.mini-journal span {
    position: relative; z-index: 1; padding-left: 10px; text-align: center;
    font-family: var(--font-display); font-weight: 600; font-size: .95rem; line-height: 1.1;
    white-space: pre-line;
    background: var(--mj-foil); -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 1px 0 rgba(0,0,0,.3));
}
.mini-journal.lg { width: 150px; height: 200px; }
.mini-journal.sm { width: 78px; height: 104px; }
.mini-journal.sm span { font-size: .7rem; }

/* Utility */
/* Available to any page; .cmn carries its own copy scoped to that concept. */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.text-center { text-align: center; }
.mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; } .mt-4 { margin-top: 2.5rem; }
.mb-0 { margin-bottom: 0; }
.flex { display: flex; } .items-center { align-items: center; } .gap-1 { gap: .5rem; } .gap-2 { gap: 1rem; }
.wrap { flex-wrap: wrap; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
    /* The wordmark is the shop's name, and at 46px on a 390px screen it read as
       a footnote beside a 46px menu button. The header grows with it — every
       rule that measures off it follows --nav-h. */
    :root { --nav-h: 88px; --brand-h: 64px; }

    /* Two tracks, not three. The desktop rule centres the links in a middle
       column; once those links are hidden the third track survives as dead
       space and strands the cart and the menu button 140px short of the right
       edge — the header reads as broken on every phone. */
    .nav { grid-template-columns: 1fr auto; gap: .75rem; }

    .nav-links, .nav-actions .btn { display: none; }
    .nav-toggle { display: grid; }

    .grid-3, .grid-4, .grid-2 { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; gap: 1.8rem; }
    .section { padding: 3.5rem 0; }
}


/* ============================================================
   MOBILE FOUNDATION

   Rules that only ever apply to a phone. Three things they are
   protecting, in order of how badly each one hurts:

   1. iOS zooms the whole page when you focus a field under 16px,
      and does not zoom back out. Every input on the site was
      13–15px, so tapping any of them threw the layout sideways.
   2. Touch targets. 44px is the floor a finger can hit reliably;
      most of the controls here were drawn for a cursor.
   3. The sticky header is 74px tall and every in-page anchor
      landed underneath it.
   ============================================================ */

/* --- 1 · never let iOS zoom on focus --- */
@media (max-width: 940px) {
    input[type="text"], input[type="email"], input[type="tel"],
    input[type="password"], input[type="search"], input[type="number"],
    input[type="url"], input[type="date"], select, textarea {
        font-size: 16px;
    }
}

/* --- 2 · anchors clear the sticky header --- */
:target { scroll-margin-top: calc(var(--nav-h) + 16px); }
[id] { scroll-margin-top: calc(var(--nav-h) + 16px); }

/* --- 3 · touch targets --- */
@media (pointer: coarse), (max-width: 720px) {
    .nav-toggle {
        width: 46px; height: 46px; place-items: center;
        margin-right: -10px;           /* optical: keep the glyph on the margin */
        border-radius: 50%;
        -webkit-tap-highlight-color: transparent;
    }
    .nav-toggle:active { background: rgba(197, 138, 122, .12); }

    .cart-link {
        min-height: 44px; padding: 0 .5rem; margin-right: -.2rem;
        -webkit-tap-highlight-color: transparent;
    }

    /* The social row is three text glyphs — 17px wide as drawn. Pad them out
       to a real target without moving them apart on the page. */
    .site-footer .flex.gap-1 > a {
        display: inline-grid; place-items: center;
        width: 44px; height: 44px; margin: 0 -.35rem;
    }
    .footer-admin { min-height: 44px; display: inline-grid; place-items: center; }

    /* The footer link columns are the densest stack of targets on the site:
       four links, 28px apart, all the same size and colour. Give each one a
       full row so a thumb cannot land between two of them. */
    .footer-grid a:not(.footer-admin) {
        min-height: 44px; display: flex; align-items: center; margin-bottom: 0;
    }
    .footer-grid > div > h4 { margin-bottom: .5rem; }
    .newsletter button { min-height: 46px; }
    .btn { min-height: 46px; }
    .btn-lg { min-height: 52px; }
}

/* --- 4 · the mobile menu ---
   It was a bare column of links. On a shop whose whole promise is that the
   thing is made by hand, the menu is the first interaction most phone
   customers have, so it is worth the few rules it takes to make it feel
   deliberate: full-height rows, a rule between them, and the primary path
   rendered as the button it is everywhere else. */
@media (max-width: 720px) {
    .nav-links.open {
        display: flex; position: absolute; top: var(--nav-h); left: 0; right: 0;
        flex-direction: column; align-items: stretch;
        background: var(--paper); padding: .4rem 24px 1.1rem;
        border-bottom: 1px solid var(--line); gap: 0;
        box-shadow: var(--shadow-md);
        max-height: calc(100dvh - var(--nav-h)); overflow-y: auto;
    }
    .nav-links.open li + li { border-top: 1px solid var(--line); }
    .nav-links.open a {
        display: flex; align-items: center; min-height: 52px;
        font-size: 1.02rem; letter-spacing: .01em;
    }
    /* The featured path gets the same rose treatment the header button has, so
       the menu does not quietly demote it. */
    .nav-links.open a.is-featured {
        justify-content: center; margin: .6rem 0 .2rem;
        background: linear-gradient(135deg, var(--rose), var(--clay));
        color: #fff; border-radius: var(--btn-radius);
        font-weight: 800; letter-spacing: .02em;
        box-shadow: 0 10px 24px rgba(197, 138, 122, .35);
    }
    .nav-links.open li:has(a.is-featured) + li { border-top: none; }
}

/* --- 5 · footer breathing room + home-indicator clearance --- */
@media (max-width: 720px) {
    .site-footer { padding: 2.8rem 0 calc(1.6rem + env(safe-area-inset-bottom, 0px)); }
    .footer-bottom { flex-direction: column; align-items: flex-start; gap: .8rem; }
    .newsletter { flex-wrap: wrap; }
    .newsletter input { flex: 1 1 60%; min-height: 46px; }
}