/* ============================================================
   Scribe — Home page

   Five bands, top to bottom: the photographic hero, the four-step
   strip, the style/interior split, the leathers/craft/reviews trio,
   and the closing rose bar. Everything below the hero is drawn in
   CSS — there is one photograph in the project and it is the hero.
   ============================================================ */

/* ---------- Shared: the circular line-icon ---------- */
.hm-ico {
    width: 42px; height: 42px; flex: none;
    border: 1px solid var(--line);
    border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(255, 255, 255, .55);
    color: var(--clay);
}
.hm-ico svg {
    width: 24px; height: 24px;
    fill: none; stroke: currentColor;
    stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round;
}
.hm-ico-lg { width: 58px; height: 58px; background: #fff; }
.hm-ico-lg svg { width: 28px; height: 28px; }

/* A quiet text link with a trailing arrow that slides on hover. */
.link-arrow {
    font-weight: 800; color: var(--espresso); font-size: .95rem;
    display: inline-flex; align-items: center; gap: .45rem;
}
.link-arrow span { transition: transform .18s ease; }
.link-arrow:hover { color: var(--clay); }
.link-arrow:hover span { transform: translateX(4px); }
.link-arrow.sm { font-size: .8rem; color: var(--clay); font-weight: 700; white-space: nowrap; }

/* Section eyebrow shared by every panel below the hero. */
.hm-panel-title,
.hm-band-title {
    font-family: var(--font-body);
    font-size: .72rem; font-weight: 800;
    letter-spacing: .13em; text-transform: uppercase;
    color: var(--mocha);
    text-align: center; margin: 0 0 1.4rem;
}
.hm-panel-note {
    font-size: .78rem; color: var(--muted);
    text-align: center; margin: 1.1rem 0 0;
}

/* ============================================================
   1 · Hero
   ============================================================ */
.hero {
    position: relative;
    /* Sampled from the photo's own field, so the masked edge dissolves into it. */
    background-color: #F7E3DC;
    overflow: hidden;
}
/* The photo occupies the right of the band at close to its native 3:2, so `cover`
   barely crops it. The mask does the blending, which means the fade always tracks
   the photo's edge instead of a fixed percentage of the viewport. */
.hero-photo {
    position: absolute; inset: 0 0 0 auto;
    width: min(50%, 58rem);
    background: url("/images/hero-flatlay.webp") center right / cover no-repeat;
    /* A long fade: the copy and the badges run under the first third of this
       element, and they must stay readable where they do. */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 36%);
    mask-image: linear-gradient(90deg, transparent 0, #000 36%);
}
.hero-grid {
    position: relative; /* above the photo */
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .7fr);
    align-items: center;
    padding: 3.2rem 0 3.4rem;
    min-height: 30rem;
}
/* Wide enough for the badge row beneath it; the headline and lead set their own
   line breaks well short of this. */
.hero-copy { max-width: 44rem; }
.hero-copy .eyebrow {
    color: var(--clay); font-size: .72rem;
    letter-spacing: .19em; font-weight: 800; text-transform: uppercase;
}
.hero-copy h1 {
    margin: .5rem 0 .9rem;
    font-size: clamp(2.5rem, 4.3vw, 3.5rem);
    line-height: 1.06; color: var(--espresso); font-weight: 600;
}
.hero-copy h1 .script {
    display: block; font-family: var(--font-script);
    font-size: 1.16em; line-height: 1.16; color: var(--rose);
    font-weight: 700; margin-top: .12em;
}
.hero-copy .lead {
    color: var(--mocha); font-size: 1.02rem;
    line-height: 1.65; margin: 0 0 1.8rem;
}
.hero-cta { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: center; }

/* One row of four, as in the design. They only wrap once the band is too narrow
   to hold them legibly. */
.hero-badges {
    display: flex; flex-wrap: wrap; gap: 1.1rem .85rem;
    list-style: none; margin: 2.4rem 0 0; padding: 0;
    max-width: 42rem; /* keeps all four on one row, clear of the photograph */
}
.hero-badges li { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.hero-badges .hm-ico { width: 34px; height: 34px; }
.hero-badges .hm-ico svg { width: 19px; height: 19px; }
.hm-badge-text { display: flex; flex-direction: column; line-height: 1.3; }
.hm-badge-text b {
    font-family: var(--font-body); font-size: .63rem; font-weight: 800;
    letter-spacing: .06em; text-transform: uppercase; color: var(--espresso);
    white-space: nowrap;
}
.hm-badge-text span { font-size: .65rem; color: var(--muted); white-space: nowrap; }

/* ============================================================
   2 · Four steps
   ============================================================ */
.hm-steps {
    background: var(--paper-2);
    border-block: 1px solid var(--line);
    padding: 2.2rem 0 2.4rem;
}
.hm-steps-row {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: .6rem; list-style: none; margin: 0; padding: 0;
}
.hm-step { display: flex; align-items: center; gap: .85rem; flex: 1; }
.hm-step-body { display: flex; flex-direction: column; line-height: 1.35; }
.hm-step-n { font-size: .72rem; font-weight: 800; color: var(--clay); }
.hm-step-body b {
    font-family: var(--font-display); font-size: .98rem;
    font-weight: 600; color: var(--espresso);
}
.hm-step-blurb { font-size: .78rem; color: var(--muted); max-width: 16ch; }
.hm-step-arrow { color: var(--blush); font-size: 1.15rem; margin: 0 .1rem 0 auto; flex: none; }

/* ============================================================
   3 · Style + interior split
   ============================================================ */
.hm-picker { background: var(--paper); border-bottom: 1px solid var(--line); }
.hm-picker-grid {
    display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1fr);
    align-items: start;
}
/* The rule between the two panels, and the breathing room around them. */
.hm-picker-grid > .hm-panel { padding: 2.2rem 1.9rem 2.6rem; }
.hm-picker-grid > .hm-panel:first-child { border-right: 1px solid var(--line); }

/* ---------- Bifold / trifold cards ---------- */
.hm-styles { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.hm-style { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .75rem; align-items: center; }
.hm-style-body h3 {
    font-family: var(--font-display); font-size: 1.02rem; font-weight: 600;
    /* Tracked, but not so far that the longer name outgrows the card at the
       width where these two sit at their narrowest. */
    letter-spacing: .05em; text-transform: uppercase;
    color: var(--espresso); margin: 0 0 .55rem;
}
.hm-ticks { list-style: none; margin: 0 0 .7rem; padding: 0; }
.hm-ticks li {
    display: flex; gap: .35rem; align-items: baseline;
    font-size: .76rem; color: var(--mocha); line-height: 1.75;
}
.hm-ticks span { color: var(--clay); font-size: .74rem; flex: none; }

/* The drawn fold: two or three leather panels, hinged, with a tie.
   data-panels comes straight from the catalog's Panels value. */
.hm-fold {
    position: relative; display: flex; gap: 0;
    width: 78px; height: 108px; flex: none;
    padding: 8px; border-radius: var(--radius-sm);
    background: linear-gradient(150deg, #F6DED6, #EBC7BD);
    box-shadow: var(--shadow-sm);
}
/* The panels butt together and the fold reads as a crease rather than a gap —
   otherwise two panels and a tie draw a window pane. */
.hm-fold i {
    display: block; height: 100%;
    background: linear-gradient(125deg, #C58A7A, #A9705F 55%, #93604F);
    box-shadow: inset -7px 0 10px -8px rgba(0, 0, 0, .5);
}
.hm-fold i + i { border-left: 1px solid rgba(60, 30, 20, .35); }

/* Her photograph, standing in the drawing's footprint so the row does not move
   when one format is photographed and the other is not. */
.hm-style-photo {
    width: 78px; height: 108px; flex: none;
    object-fit: cover; border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm); display: block;
}
.hm-fold .p1 { flex: 1.5; border-radius: 3px 1px 1px 3px; }
.hm-fold .p2 { flex: 1.5; }
.hm-fold .p3 { flex: .85; border-radius: 1px 4px 4px 1px; filter: brightness(.93); }
.hm-fold[data-panels="2"] .p2 { border-radius: 1px 4px 4px 1px; }
/* The wrap tie — a strap across the panels with a small charm. */
.hm-fold .tie {
    position: absolute; left: 6px; right: 6px; top: 58%; height: 3px;
    background: linear-gradient(90deg, #B87F6C, #D9A392);
    border-radius: 2px; box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}
.hm-fold .tie::after {
    content: ""; position: absolute; right: 22%; top: 2px;
    width: 11px; height: 11px; border-radius: 50%;
    background: linear-gradient(140deg, #F4E2A1, #C8992F 60%, #A9781F);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}

/* ---------- Interior page styles ---------- */
/* Sized so every ruling the catalog offers sits on one row at desk width, and
   reflows rather than truncating when it can't. */
.hm-pages {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(6.4rem, 1fr));
    gap: .6rem;
}
.hm-page {
    background: #fff; border: 1px solid var(--line);
    border-radius: var(--radius-sm); padding: .8rem .55rem .9rem;
    text-align: center; transition: transform .18s ease, box-shadow .18s ease;
}
.hm-page:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.hm-page h3 {
    font-family: var(--font-body); font-size: .68rem; font-weight: 800;
    letter-spacing: .11em; text-transform: uppercase;
    color: var(--espresso); margin: .7rem 0 .25rem;
}
.hm-page p { font-size: .69rem; color: var(--muted); line-height: 1.42; margin: 0; }

/* An open spread — two leaves and a gutter, which is how a ruling is
   actually read. Same treatment keys as the request page: the catalog's
   Rule value selects the pattern. */
.hm-spread,
.hm-page-photo {
    display: flex; gap: 2px; width: 100%; max-width: 8.5rem; height: 5.4rem;
    margin: 0 auto;
    filter: drop-shadow(0 4px 8px rgba(90, 58, 44, .17));
}
.hm-page-photo { object-fit: cover; border-radius: 5px; display: block; }
.hm-spread i {
    flex: 1; background-color: #FEFBF3; border: 1px solid #EADFC9;
    background-repeat: no-repeat;
    background-position: 7px 8px;
    background-size: calc(100% - 14px) calc(100% - 16px);
}
.hm-spread i:first-child { border-radius: 5px 1px 1px 5px; box-shadow: inset -7px 0 9px -7px rgba(120, 80, 40, .6); }
.hm-spread i:last-child  { border-radius: 1px 5px 5px 1px; box-shadow: inset  7px 0 9px -7px rgba(120, 80, 40, .6); }

.hm-spread[data-rule="lined"] i {
    background-image: repeating-linear-gradient(to bottom, transparent 0 6px, rgba(150, 120, 80, .42) 6px 7px);
}
.hm-spread[data-rule="dot"] i {
    background-image: radial-gradient(circle, rgba(150, 120, 80, .5) 0 .9px, transparent 1.4px);
    background-size: 7px 7px;
}
.hm-spread[data-rule="blank"] i { background-image: none; }
.hm-spread[data-rule="planner"] i {
    background-image:
        linear-gradient(rgba(168, 112, 92, .5), rgba(168, 112, 92, .5)),
        repeating-linear-gradient(to bottom, transparent 0 6px, rgba(150, 120, 80, .34) 6px 7px);
    background-size: calc(100% - 14px) 6px, calc(100% - 14px) calc(100% - 30px);
    background-position: 7px 8px, 7px 22px;
}
.hm-spread[data-rule="mixed"] i:first-child {
    background-image: repeating-linear-gradient(to bottom, transparent 0 6px, rgba(150, 120, 80, .42) 6px 7px);
}
.hm-spread[data-rule="mixed"] i:last-child {
    background-image: radial-gradient(circle, rgba(150, 120, 80, .5) 0 .9px, transparent 1.4px);
    background-size: 7px 7px;
}

/* ============================================================
   4 · Leathers · craft · reviews
   ============================================================ */
.hm-trio { background: var(--paper-2); }
.hm-trio-grid {
    display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.25fr) minmax(0, .95fr);
    align-items: start;
}
.hm-trio-grid > .hm-panel { padding: 2.2rem 1.7rem 2.4rem; }
.hm-trio-grid > .hm-panel + .hm-panel { border-left: 1px solid var(--line); }

/* ---------- Leather swatches ---------- */
.hm-leathers {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: .9rem .55rem; list-style: none; margin: 0; padding: 0;
}
.hm-leather { width: 3.7rem; text-align: center; }
.hm-leather.is-out { opacity: .55; }
.hm-leather-name {
    display: block; font-size: .55rem; font-weight: 800;
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--mocha); margin-top: .45rem; line-height: 1.3;
}
.hm-leather-note { display: block; font-size: .58rem; color: var(--muted); font-style: italic; }

/* The drawn hide. --tone is the catalog's Tone; data-swatch its finish. */
/* Landscape, as in the design — a hide reads better wide than tall. */
.hm-swatch {
    display: block; width: 100%; aspect-ratio: 7 / 5;
    border-radius: var(--radius-sm);
    background-color: var(--tone, #C58A7A);
    box-shadow: var(--shadow-sm), inset 0 0 0 1px rgba(255, 255, 255, .12);
    position: relative; overflow: hidden;
}
.hm-swatch::after {
    content: ""; position: absolute; inset: 0;
    background-image: inherit; opacity: .6;
}
/* A photographed hide: the picture covers the tile and the drawn grain is
   switched off, since the real thing is now showing. --tone stays as the colour
   behind it while the image loads. */
.hm-swatch.is-photo { background-size: cover; background-position: center; }
.hm-swatch.is-photo::after { content: none; }
/* Crazy horse — waxed, so the colour lifts along the bends. */
.hm-swatch[data-swatch="crazy-horse"]::after {
    background:
        radial-gradient(ellipse at 28% 24%, rgba(255, 235, 210, .5), transparent 52%),
        radial-gradient(ellipse at 76% 72%, rgba(0, 0, 0, .3), transparent 58%),
        repeating-linear-gradient(122deg, rgba(255, 240, 220, .12) 0 3px, transparent 3px 9px);
}
/* Full grain — fine, even pores. */
.hm-swatch[data-swatch="full-grain"]::after {
    background:
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .22), transparent 55%),
        radial-gradient(circle, rgba(0, 0, 0, .16) 0 .6px, transparent 1px);
    background-size: auto, 5px 5px;
}
/* Pebbled — milled until the grain draws up. */
.hm-swatch[data-swatch="pebbled"]::after {
    background:
        radial-gradient(circle at 35% 32%, rgba(255, 255, 255, .16), transparent 60%),
        radial-gradient(circle, rgba(255, 255, 255, .14) 0 1.6px, transparent 2.2px),
        radial-gradient(circle, rgba(0, 0, 0, .22) 0 1.4px, transparent 2px);
    background-size: auto, 9px 9px, 9px 9px;
    background-position: 0 0, 0 0, 4px 4px;
}
/* Suede — a short, soft nap. */
.hm-swatch[data-swatch="suede"]::after {
    background:
        radial-gradient(ellipse at 40% 26%, rgba(255, 255, 255, .3), transparent 62%),
        repeating-linear-gradient(96deg, rgba(255, 255, 255, .1) 0 2px, rgba(0, 0, 0, .06) 2px 4px);
}
/* Veg tan — undyed, so it reads flat and warm. */
.hm-swatch[data-swatch="veg-tan"]::after {
    background:
        linear-gradient(160deg, rgba(255, 246, 224, .4), transparent 58%),
        repeating-linear-gradient(60deg, rgba(150, 110, 60, .08) 0 6px, transparent 6px 13px);
}

/* ---------- Craft strip ---------- */
/* Four across, on grid tracks with a zero minimum.
   Not flex with a percentage basis: when the browser works out this panel's
   min-content width — which it must, to size the column it sits in — a percentage
   basis resolves to `auto`, i.e. the photograph's full intrinsic width. Four of
   those made the whole trio row 1124px wide at every viewport below 1280.
   `minmax(0, 1fr)` has no such fallback. */
.hm-craft { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
/* Each tile is a figure so the phone layout can name the stage under it. On the
   desk the caption stays off and the row is the same strip it always was. */
.hm-craft figure { margin: 0; min-width: 0; }
.hm-craft figcaption { display: none; }
.hm-craft-lead { display: none; }
/* The four stages named once, as process, rather than as captions on pictures
   that do not show them. Only shown while no bench photography exists. */
.hm-craft-steps { display: none; }
.hm-craft i,
.hm-craft img {
    display: block; width: 100%; min-width: 0; aspect-ratio: 1 / 1;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
}
.hm-craft img { object-fit: cover; }

/* ---------- Phone-only copy, off by default ----------
   These elements exist in the markup at every width but only earn their place
   on a phone, where the shelves become cards and a card has to introduce
   itself. Declared here so the desk layout is untouched by their presence. */
.hm-style-line,
.hm-style-btn,
.hm-leather-char,
.hm-leather-blurb,
.hm-leather-link { display: none; }
/* The fallback tiles: one photograph, framed four ways. */
.hm-craft i {
    background-image: url("/images/hero-flatlay.webp");
    background-size: 250%;
    background-position: var(--x) var(--y);
}

/* ---------- Reviews ---------- */
.hm-reviews {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "stars stars stars"
        "prev  stage next"
        "dots  dots  dots";
    align-items: center; gap: .7rem .3rem; text-align: center;
}
.hm-stars { grid-area: stars; color: var(--gold); font-size: 1rem; letter-spacing: .14em; }
.hm-rev-stage { grid-area: stage; position: relative; display: grid; }
/* Every quote occupies the same cell so the panel does not jump height
   between a short review and a long one. */
.hm-rev {
    grid-area: 1 / 1; margin: 0;
    opacity: 0; visibility: hidden; transition: opacity .3s ease;
}
.hm-rev.is-on { opacity: 1; visibility: visible; }
.hm-rev blockquote {
    margin: 0; font-family: var(--font-display);
    font-size: 1.05rem; line-height: 1.4; color: var(--espresso);
}
.hm-rev figcaption { margin-top: .55rem; font-size: .8rem; color: var(--muted); }
.hm-rev-nav {
    background: none; border: none; cursor: pointer;
    font-size: 1.6rem; line-height: 1; color: var(--clay);
    padding: .2rem .35rem; border-radius: 50%;
}
.hm-rev-nav.prev { grid-area: prev; }
.hm-rev-nav.next { grid-area: next; }
.hm-rev-nav:hover { color: var(--espresso); background: rgba(255, 255, 255, .6); }
.hm-dots { grid-area: dots; display: flex; justify-content: center; gap: .4rem; margin-top: .3rem; }
.hm-dots button {
    width: 7px; height: 7px; padding: 0; border-radius: 50%; cursor: pointer;
    border: none; background: var(--blush); transition: background .2s ease;
}
.hm-dots button.is-on { background: var(--clay); }

/* ============================================================
   5 · Closing bar
   ============================================================ */
.hm-closer { background: linear-gradient(90deg, #DCA79E, #D49A94 55%, #CC908A); }
/* The bar is the page's last word, so it should meet the footer, not float
   above it on the footer's default standoff. */
body:has(.hm-closer) .site-footer { margin-top: 0; }
.hm-closer-inner {
    display: flex; align-items: center; justify-content: center;
    gap: 1.2rem; padding: 1.1rem 0; flex-wrap: wrap;
}
.hm-closer p {
    margin: 0; font-family: var(--font-display);
    font-size: 1.2rem; color: #fff;
}
.hm-ico-on-rose {
    border-color: rgba(255, 255, 255, .5);
    background: rgba(255, 255, 255, .16); color: #fff;
    width: 40px; height: 40px;
}
.hm-ico-on-rose svg { width: 21px; height: 21px; }
.btn-closer {
    background: #B87E77; color: #fff;
    padding: .62rem 1.5rem; font-size: .92rem;
    box-shadow: 0 6px 16px rgba(120, 70, 62, .28);
}
.btn-closer:hover { background: var(--espresso); color: #fff; transform: translateY(-1px); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1100px) {
    .hm-steps-row { flex-wrap: wrap; gap: 1.4rem; }
    .hm-step { flex: 1 1 44%; }
    .hm-step-arrow { display: none; }
    .hm-trio-grid { grid-template-columns: 1fr 1fr; }
    .hm-trio-grid > .hm-panel:nth-child(3) { grid-column: 1 / -1; border-left: none; border-top: 1px solid var(--line); }
}

@media (max-width: 900px) {
    /* ---------- The hero ----------
       This band has been through two wrong answers. First the photograph was the
       section's background and got cropped to a letterbox. Then it was faded to a
       42% wash with the headline laid straight on top, which measured about 2:1
       and was hard to read outdoors; a scrim fixed the contrast but left the one
       photograph we own looking like wallpaper.

       Neither was the real problem. On a page selling a handmade object, the
       object should be the first thing on screen and it should look like a
       photograph, not a texture. So the picture is a column again — as it is on
       the desk — and the copy sits beside it on clean paper rather than over it.
       Nothing is faded, and nothing needs a veil. */
    .hero-photo {
        width: 46%; opacity: 1;
        background-position: center right;
        /* Feathered on its left edge only, into the paper the copy sits on. */
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20%);
        mask-image: linear-gradient(90deg, transparent 0, #000 20%);
    }
    .hero::after { content: none; }
    .hero-grid { z-index: 1; }
    /* Keep the container's own side padding: this shorthand would otherwise
       zero it and run the copy into the edge of the screen. */
    .hero-grid { grid-template-columns: 1fr; padding: 2.4rem 24px 2.6rem; min-height: 0; }
    /* The copy stops where the photograph starts, rather than running under it. */
    .hero-copy { max-width: none; padding-right: 44%; }
    .hero-badges { max-width: none; gap: 1rem 1.2rem; }

    .hm-picker-grid { grid-template-columns: 1fr; }
    .hm-picker-grid > .hm-panel { padding: 2rem 0 2.2rem; }
    .hm-picker-grid > .hm-panel:first-child { border-right: none; border-bottom: 1px solid var(--line); }
    .hm-pages { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    .hm-trio-grid { grid-template-columns: 1fr; }
    .hm-trio-grid > .hm-panel { padding: 2rem 0 2.2rem; }
    .hm-trio-grid > .hm-panel + .hm-panel { border-left: none; border-top: 1px solid var(--line); }
    .hm-trio-grid > .hm-panel:nth-child(3) { border-top: 1px solid var(--line); }
}

@media (max-width: 560px) {
    /* The lead's hard break is a desk-width nicety; let it flow when narrow. */
    .hero-copy .lead br { display: none; }
    .hero-copy h1 { font-size: clamp(2.1rem, 9vw, 2.8rem); }
    .hm-styles { grid-template-columns: 1fr; }
    .hm-step { flex: 1 1 100%; }
    .hm-pages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hm-closer-inner { flex-direction: column; gap: .8rem; text-align: center; }
}


/* ============================================================
   Phone

   Everything below is about a thumb and a small pane of glass:
   contrast against photography, targets a finger can hit, and
   swatch labels that are not two words on two lines.
   ============================================================ */
@media (max-width: 720px) {
    /* --- the hero ground ---
       A warm cream rather than the pink sampled from the photograph. The copy
       column is flat colour now that the picture has its own column, and the
       lighter ground is what lets the script line stay in the rose family: at
       #B4776A it measures 3.3:1 here, against a 3:1 floor for large text. On
       the old pink it measured 2.9 and would have had to go browner. */
    .hero { background-color: #FBF2EE; }
    .hero-copy .eyebrow { color: var(--mocha); letter-spacing: .16em; }
    .hero-copy h1 .script { color: #B4776A; }
    .hero-copy .lead { color: var(--mocha); font-size: .92rem; margin-bottom: 1.4rem; }
    /* One emotional line on a phone. The explanatory half is desk-only — the
       photograph beside it is already saying the same thing. */
    .hero-lead-more { display: none; }
    /* Sized to the column the photograph leaves, not to the screen: at 390px
       that column is about 190px, and "Design a Journal" only holds one line
       under roughly 1.4rem. The picture is carrying the band now, so the
       headline does not have to be the largest thing on it. */
    .hero-copy h1 { font-size: clamp(1.35rem, 5.4vw, 2.1rem); margin-bottom: .7rem; }

    /* The badge row is four icons and eight strings under a headline that now
       has a photograph to carry it. The promises it made are kept — the closing
       bar and the craft band both say them — so on a phone the hero keeps the
       product and lets the list go. */
    .hero-badges { display: none; }

    .hero-cta { gap: .9rem 1.2rem; }
    .hero-cta .btn-lg { padding: .8rem 1.35rem; font-size: .88rem; min-height: 46px; }
    .hero-cta .link-arrow { font-size: .86rem; }

    /* --- targets --- */
    .link-arrow { min-height: 44px; }

    /* --- readable tones for the new cards ---
       The palette is unchanged; these are two of its own browns used where the
       lighter ones do not carry. Measured on the grounds they actually sit on:
       --muted (#8B7867) is 4.2:1 on a white card and 3.7:1 on paper-2, and
       --clay (#C58A7A) is 2.9:1 on white — all under the 4.5:1 small-text
       floor. --mocha clears it at 5.4–6.2, and #9C6353 is a clay deepened just
       far enough (4.9:1) to stay the accent while being legible. */
    .hm-panel-note,
    .hm-step-n,
    .hm-rev figcaption { color: var(--mocha); }

    /* --- section titles ---
       A rule either side of the label, which is how a printed page separates a
       section without spending a heading on it. */
    .hm-panel-title, .hm-band-title {
        display: flex; align-items: center; gap: .85rem;
        font-size: .68rem; letter-spacing: .16em;
    }
    .hm-panel-title::before, .hm-panel-title::after,
    .hm-band-title::before, .hm-band-title::after {
        content: ""; flex: 1 1 auto; height: 1px; background: var(--line);
    }

    /* The carousel arrows were 20×32 and the dots 7×7 — the dots in particular
       were not a target at all. Pad both out; `background-clip: content-box`
       keeps the dot the same 7px it always was while the button around it
       becomes something a thumb can land on. */
    .hm-rev-nav {
        width: 44px; height: 44px; display: grid; place-items: center;
        font-size: 1.5rem; padding: 0;
        -webkit-tap-highlight-color: transparent;
    }
    .hm-reviews { gap: .5rem 0; }
    .hm-dots { gap: 0; margin-top: 0; }
    .hm-dots button {
        width: 44px; height: 44px; padding: 18px;
        background-clip: content-box;
        -webkit-tap-highlight-color: transparent;
    }
    /* The selected dot is set with the `background` shorthand, which resets
       background-clip to border-box — so without this the active dot paints its
       whole 44px target and becomes a disc. */
    .hm-dots button.is-on { background-clip: content-box; }

    /* ============================================================
       Journal style — two product cards

       On the desk these are a compact pair: a small drawn fold beside a ticked
       list of differences. That is a specification, and a specification is the
       right thing when both cards are visible at once and the reader is
       comparing them.

       On a phone only one is ever really in view, so comparison is not what is
       happening — recognition is. The photograph goes full width at the top of
       the card, the ticked list gives way to a single line, and the card ends
       in the decision it exists to collect.
       ============================================================ */
    .hm-styles { grid-template-columns: 1fr; gap: 1.3rem; }
    .hm-style {
        display: block;
        background: var(--card); border: 1px solid var(--line);
        border-radius: var(--radius); overflow: hidden;
        box-shadow: var(--shadow-sm);
    }
    .hm-style-photo {
        width: 100%; height: auto; aspect-ratio: 4 / 3;
        object-fit: cover; border-radius: 0; box-shadow: none;
    }
    /* The drawn fold, for a format with no photograph yet. It keeps its own
       pink field and is simply centred and enlarged at the head of the card,
       rather than stretched to a shape it was never drawn for. */
    .hm-style > .hm-fold { width: 104px; height: 144px; margin: 1.6rem auto .4rem; }
    .hm-style-body { padding: 1.15rem 1.3rem 1.4rem; text-align: center; }
    .hm-style-body h3 {
        font-size: 1.12rem; letter-spacing: .13em; margin: 0 0 .4rem;
    }
    .hm-style-line {
        display: block; margin: 0 0 1.1rem;
        font-size: .88rem; line-height: 1.5; color: var(--mocha);
    }
    .hm-ticks { display: none; }
    .hm-style .link-arrow.sm { display: none; }
    .hm-style-btn {
        display: inline-flex; min-height: 46px;
        padding: .8rem 1.7rem; font-size: .84rem; font-weight: 800;
        letter-spacing: .04em;
        background: transparent; color: #9C6353;
        border: 1.5px solid var(--blush);
        border-radius: var(--btn-radius);
    }
    .hm-style-btn:active { background: var(--blush-soft); color: var(--mocha); }

    /* ============================================================
       Signature leathers — a materials rail

       Eight hides in a wrapped grid is a colour chart. Laid out as a rail of
       cards, each one gets to be a piece of leather with a name, a character
       and a line about how it behaves — which is the decision being made.
       Every hide here is already photographed; the drawn swatch stays as the
       fallback and takes the same footprint.
       ============================================================ */
    .hm-leathers {
        display: grid; grid-auto-flow: column;
        /* A flat percentage, not minmax(0, 62%): a zero minimum lets the eight
           tracks shrink to fit the container instead of overflowing it, and the
           rail collapses into eight slivers rather than scrolling. */
        grid-auto-columns: 62%;
        gap: .8rem; justify-content: start;
        overflow-x: auto; overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        /* Bleeds to both screen edges so the rail reads as continuing past
           them, with the container's padding restored inside. */
        margin: 0 -24px; padding: .2rem 24px 1rem;
        scrollbar-width: none;
    }
    .hm-leathers::-webkit-scrollbar { display: none; }
    .hm-leather {
        position: relative; width: auto; text-align: left;
        scroll-snap-align: start;
        display: flex; flex-direction: column;
        background: var(--card); border: 1px solid var(--line);
        border-radius: var(--radius); overflow: hidden;
        box-shadow: var(--shadow-sm);
    }
    .hm-leather .hm-swatch {
        aspect-ratio: 4 / 3; border-radius: 0; box-shadow: none;
    }
    .hm-leather-name {
        margin: .85rem .95rem 0; font-size: .78rem; letter-spacing: .1em;
        color: var(--espresso);
    }
    .hm-leather-char {
        display: block; margin: .2rem .95rem 0;
        font-size: .68rem; font-weight: 700; letter-spacing: .04em;
        color: #9C6353; font-style: normal;
    }
    .hm-leather-blurb {
        display: block; margin: .45rem .95rem 0;
        font-size: .78rem; line-height: 1.5; color: var(--mocha);
    }
    .hm-leather-note { display: block; margin: .4rem .95rem 0; font-size: .68rem; }
    .hm-leather-link {
        display: flex; align-items: center; gap: .4rem;
        margin: auto .95rem 0; padding: .9rem 0 1rem;
        font-size: .74rem; font-weight: 800; letter-spacing: .06em;
        text-transform: uppercase; color: #9C6353;
    }
    /* The whole card is the target; this line is only the affordance for it. */
    .hm-leather-link::after { content: ""; position: absolute; inset: 0; }
    .hm-leather-link:active { color: var(--mocha); }

    /* ============================================================
       Interior pages — quieter
       Kept, because a photographed spread uploaded in the admin has to have
       somewhere to appear. Reduced to the picture and the name: the ruling is
       a thing you recognise, not a thing you read about.
       ============================================================ */
    .hm-page { padding: .7rem .5rem .8rem; }
    .hm-page p { display: none; }
    .hm-page h3 { margin: .6rem 0 0; }
    /* Five in two columns leaves one alone on the last row. */
    .hm-page:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .hm-page:last-child:nth-child(odd) .hm-spread,
    .hm-page:last-child:nth-child(odd) .hm-page-photo { max-width: 10rem; }

    /* ============================================================
       Crafted by hand — the bench
       Four square crops with nothing said about them read as a mood board. The
       same four, named, read as a process. Her uploads keep her own captions;
       the fallback set names the four stages.
       ============================================================ */
    .hm-craft-lead {
        display: block; text-align: center; margin: -.6rem 0 1.2rem;
        font-size: .85rem; line-height: 1.55; color: var(--mocha);
    }
    .hm-craft { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem .7rem; }
    .hm-craft figcaption { display: block; text-align: center; margin-top: .55rem; }
    .hm-craft figcaption b {
        display: block; font-family: var(--font-body);
        font-size: .64rem; font-weight: 800; letter-spacing: .14em;
        text-transform: uppercase; color: var(--espresso);
    }
    .hm-craft figcaption span {
        display: block; margin-top: .15rem;
        font-size: .68rem; line-height: 1.4; color: var(--mocha);
    }
    .hm-craft-steps {
        display: flex; flex-wrap: wrap; justify-content: center;
        gap: .3rem .55rem; margin: 1.1rem 0 0;
        font-size: .64rem; font-weight: 800; letter-spacing: .14em;
        text-transform: uppercase; color: var(--mocha);
    }
    .hm-craft-steps .sep { color: var(--blush); }

    /* The four steps keep their icons and titles; the blurb under each one is
       the same promise the band's own heading makes. */
    .hm-step-blurb { display: none; }
    .hm-step { align-items: center; }

    /* --- section rhythm ---
       Panels ran edge to edge with the same padding they had beside a
       neighbouring column. On a phone there is no neighbour, so the space reads
       as slack rather than separation. */
    .hm-picker-grid > .hm-panel { padding: 1.7rem 0 1.9rem; }
    .hm-trio-grid > .hm-panel { padding: 1.7rem 0 1.9rem; }
    .hm-panel-title, .hm-band-title { margin-bottom: 1.1rem; }
    .hm-steps { padding: 1.8rem 0 2rem; }
    .hm-closer-inner { padding: 1.4rem 0; }
    .hm-closer p { font-size: 1.1rem; }
}

/* The narrowest phones. The hero's two columns stop paying their way once the
   copy column drops under about 180px — the headline starts breaking mid-phrase
   — so the photograph takes the full width and the copy sits under it. It is
   still the first thing on screen, which is the point of it. */
@media (max-width: 379px) {
    .hero-photo {
        position: static; inset: auto; width: 100%; height: 13rem;
        -webkit-mask-image: none; mask-image: none;
    }
    .hero-grid { padding-top: 1.6rem; }
    /* Full width again, so the headline gets its size back. */
    .hero-copy { padding-right: 0; }
    .hero-copy h1 { font-size: 1.7rem; }
    .hm-leathers { grid-auto-columns: 74%; }
}