/* Prototype stylesheet - reproduces the site's store look (tokens.css, global.css,
store-gallery.css): Newsreader display + Inter body, cream/warm-white ground,
terracotta primary action, hairline cards, sticky translucent header. Light only. */
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 400 700; font-display: swap;
src: url('fonts/newsreader-latin-var.woff2') format('woff2'); }
@font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 300; font-display: swap;
src: url('fonts/newsreader-latin-italic.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap;
src: url('fonts/inter-latin-var.woff2') format('woff2'); }
:root {
--dark: #2e2a26; --amber: #e8a65c; --cream: #f4ede1; --sage: #7c8b6f;
--terracotta: #B85A36; --terracotta-deep: #9C4728; --warm-white: #FBF9F5; --on-terracotta: #FFF9F2;
--text: color-mix(in srgb, var(--dark) 90%, var(--cream));
--text-muted: #756F69; --hair: #DDD4C9; --rule: #e0d5c4; --cream-deep: #ece2d2; --band: #E8DED0;
--flag: #8C5A2B; --flag-bg: #F3E6D4; --on-dark: #d8ccb8;
--font-display: 'Newsreader', 'Iowan Old Style', Georgia, serif;
--font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
--fs-label: 0.75rem; --fs-small: 0.875rem; --fs-body: 1rem; --fs-lede: 1.125rem;
--fs-h3: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
--fs-h2: clamp(1.625rem, 1.4rem + 0.8vw, 2.125rem);
--fs-h1: clamp(2rem, 1.6rem + 1.3vw, 2.75rem);
--fs-hero: clamp(2.25rem, 1.7rem + 1.8vw, 2.8125rem);
--space-section: clamp(1.625rem, 1.15rem + 1.75vw, 2.625rem);
--gap-row: 2.5rem;
--page: 1480px; --gutter: clamp(1.5rem, 5.56vw, 5rem);
--r-sm: 8px; --r-md: 10px; --r-lg: 14px; --radius-img: 5px; --radius-btn: 3px;
color-scheme: light;
}
@media (max-width: 640px) { :root { --gap-row: 1.5rem; } }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--warm-white); color: var(--text); font-family: var(--font-body);
font-size: var(--fs-body); line-height: 1.6; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.1; margin: 0; color: var(--dark); }
h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); }
p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--terracotta-deep); outline-offset: 2px; border-radius: 3px; }
.wrap { width: 100%; max-width: var(--page); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--space-section); }
.eyebrow { font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--text-muted); }
.lede { font-size: var(--fs-lede); color: var(--text-muted); max-width: 60ch; }
.muted { color: var(--text-muted); }
.skip { position: absolute; left: -999px; top: 0; background: var(--dark); color: var(--cream); padding: .6rem 1rem; z-index: 100; }
.skip:focus { left: 0; }
.proto-bar { background: var(--dark); color: var(--on-dark); font-size: var(--fs-small); text-align: center; padding: .45rem 1rem; }
/* ---------- header ---------- */
.site-head { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--rule); background: color-mix(in srgb, var(--cream) 92%, transparent); backdrop-filter: blur(8px); }
.site-head__inner { display: flex; align-items: center; gap: 1.25rem; padding: .8rem clamp(1.25rem, 2.9vw, 3.5rem); }
.wordmark { display: block; flex: none; }
.wordmark img { height: 40px; width: auto; }
.site-nav__row { display: none; list-style: none; margin: 0; padding: 0; gap: .25rem; align-items: center; }
.site-nav__row > li { position: relative; }
.nav-link, .nav-btn { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; padding: .5rem .8rem; border-radius: var(--r-sm);
text-decoration: none; font: inherit; font-size: 1rem; color: inherit; background: none; border: 0; cursor: pointer; }
.nav-link:hover, .nav-btn:hover { background: var(--cream-deep); }
[aria-current='page'] { font-weight: 600; text-decoration: underline; text-decoration-color: var(--amber); text-decoration-thickness: 2px; text-underline-offset: .3em; }
.caret { width: .55em; height: .55em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .15s; }
[aria-expanded='true'] > .caret { transform: rotate(-135deg) translateY(-2px); }
.dropdown { position: absolute; top: 100%; left: 0; min-width: 220px; margin: 4px 0 0; padding: .4rem; list-style: none; background: var(--warm-white);
border: 1px solid var(--hair); border-radius: var(--r-md); box-shadow: 0 10px 28px -14px rgba(46,42,38,.3); }
.dropdown[hidden] { display: none; }
.dropdown a { display: flex; align-items: center; min-height: 44px; padding: .5rem .8rem; border-radius: var(--r-sm); text-decoration: none; }
.dropdown a:hover { background: var(--cream-deep); }
.dropdown .all { border-top: 1px solid var(--hair); margin-top: .3rem; padding-top: .3rem; }
.head-tools { margin-left: auto; display: flex; gap: .4rem; align-items: center; }
.cart-btn { min-height: 44px; padding: .5rem .8rem; border-radius: var(--r-sm); border: 1px solid var(--hair); background: none; font: inherit; color: var(--text-muted); }
.burger { min-width: 44px; min-height: 44px; background: none; border: 1px solid var(--hair); border-radius: var(--r-md); cursor: pointer; display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; }
.burger span { display: block; width: 20px; height: 2px; background: var(--dark); }
@media (min-width: 1152px) {
.site-nav__row { display: flex; }
.burger, .scrim, .drawer { display: none !important; }
}
@media (max-width: 1151px) { .head-tools { order: 3; } .burger { order: -1; } }
@media (max-width: 480px) { .site-head__inner { gap: .75rem; padding-inline: 1rem; } .wordmark img { height: 30px; } }
/* phones: burger 44 + logo 180 (flex:none) + tools 168-174 + gaps = ~448 px > 375 viewport (cart button reached x=444-450). Tighten the tools and let the logo give way. */
@media (max-width: 480px) {
.head-tools { gap: .25rem; }
.head-tools .lang-switch { margin-right: 0 !important; padding-inline: .45rem; }
.cart-btn { padding-inline: .6rem; }
.wordmark { flex: 0 1 auto; min-width: 0; }
.wordmark img { max-width: 100%; object-fit: contain; object-position: left center; }
}
/* SB-237: the Ship-to (currency) control, in the header >=768px (beside the language link) and in the drawer below */
.ship-to { display: inline-flex; align-items: center; gap: .3rem; font-size: var(--fs-small); font-weight: 600; color: inherit; white-space: nowrap; } /* inherit, like the language link: --text-muted failed axe contrast on create/reveal/checkout */
.ship-to select { min-height: 2rem; padding: .3rem .6rem; border: 1px solid var(--hair); border-radius: 999px; background: transparent; font: inherit; color: inherit; cursor: pointer; }
@media (max-width: 767px) { .head-tools .ship-to { display: none; } }
.drawer__ship { padding: .7rem; }
/* mobile drawer */
.scrim { position: fixed; inset: 0; background: rgba(46,42,38,.45); z-index: 30; }
.drawer { position: fixed; top: 0; left: 0; bottom: 0; width: min(86vw, 340px); background: var(--warm-white); z-index: 40; padding: 1rem; overflow-y: auto; box-shadow: 0 18px 46px -14px rgba(46,42,38,.42); }
.scrim[hidden], .drawer[hidden] { display: none; }
.drawer__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .6rem; }
.drawer__close { min-width: 44px; min-height: 44px; font-size: 1.6rem; background: none; border: 0; cursor: pointer; border-radius: var(--r-md); }
.drawer ul { list-style: none; margin: 0; padding: 0; }
.drawer a, .drawer .nav-btn { width: 100%; justify-content: space-between; display: flex; align-items: center; min-height: 44px; padding: .7rem; border-radius: var(--r-sm); text-decoration: none; font-size: 1.05rem; }
.drawer a:hover, .drawer .nav-btn:hover { background: var(--cream-deep); }
.drawer .sub { padding-left: 1rem; border-left: 2px solid var(--hair); margin: .2rem 0 .4rem .7rem; }
.drawer .sub[hidden] { display: none; }
/* ---------- footer ---------- */
.site-foot { background: var(--dark); color: var(--on-dark); margin-top: clamp(2rem, 5vw, 4rem); padding-block: 2.5rem 1.5rem; }
.site-foot a { color: var(--on-dark); text-underline-offset: .2em; }
.site-foot__top { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 2rem; }
.site-foot__label { font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; font-weight: 700; margin-bottom: .6rem; color: #fff9f2; }
.site-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.site-foot__base { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid #4a423a; font-size: var(--fs-small); }
/* ---------- buttons, cards ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .75rem 1.6rem; border-radius: var(--radius-btn); border: 1px solid var(--terracotta-deep);
background: var(--terracotta-deep); color: var(--on-terracotta); font: inherit; font-size: 1.1rem; font-weight: 600; text-decoration: none; cursor: pointer; }
.btn:hover { background: color-mix(in srgb, var(--terracotta-deep) 85%, #000); border-color: color-mix(in srgb, var(--terracotta-deep) 85%, #000); } /* D5 2026-10-09: darken on hover (same hue), was var(--terracotta) = 4.40:1 with the label */
.btn[disabled], .btn[aria-disabled='true'] { background: var(--band); border-color: var(--hair); color: var(--text-muted); cursor: not-allowed; }
.btn--ghost { background: #fff; border: 1.5px solid var(--dark); color: var(--dark); } /* terra 2026-10-10: secondary = charcoal outline, terracotta only on primary CTAs */
.btn--ghost:hover { background: var(--cream-deep); }
.hero { background: var(--cream); border-bottom: 1px solid var(--hair); }
.hero__inner { display: grid; gap: 1.2rem; padding-block: clamp(2.5rem, 6vw, 5rem); max-width: 62ch; }
.hero h1 { font-size: var(--fs-hero); }
.pgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--gap-row); }
.pgrid--cats { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.pcard { display: flex; flex-direction: column; gap: 1rem; text-decoration: none; color: inherit; min-width: 0; }
.artframe { background: var(--cream); border: 1px solid var(--hair); border-radius: var(--radius-img); padding: clamp(.7rem, 1.6vw, 1.15rem); line-height: 0; overflow: hidden; transition: border-color .18s ease, transform .18s ease; }
.pcard:hover .artframe { border-color: var(--dark); transform: translateY(-2px); }
.pcard__cap { display: flex; flex-direction: column; gap: .28rem; text-align: center; border-top: 1px solid var(--hair); padding-top: .9rem; line-height: 1.4; }
.pcard__cap .editorial { font-family: var(--font-display); font-style: italic; font-weight: 300; color: var(--text-muted); }
.pcard__label { font-size: .72rem; letter-spacing: .09em; text-transform: uppercase; color: var(--text-muted); }
.pcard__price { font-family: var(--font-display); color: var(--text-muted); }
.imgslot { background: var(--band); border: 1px dashed var(--flag); border-radius: var(--radius-img); aspect-ratio: 4/5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; text-align: center; padding: 1.2rem; color: var(--flag); line-height: 1.4; }
.imgslot__k { font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; }
.imgslot--grey { background: #e4e1dc; border-color: #9b958d; color: #5f5a54; }
.page-head { padding-block: clamp(1.5rem, 4vw, 3rem) 0; display: grid; gap: .6rem; }
.crumbs { font-size: var(--fs-small); color: var(--text-muted); }
.crumbs a { color: inherit; }
.section-title { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.tag { display: inline-block; font-size: var(--fs-label); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .15rem .5rem; border-radius: var(--r-sm); background: var(--flag-bg); color: var(--flag); }
/* ---------- PDP ---------- */
.pdp { display: grid; grid-template-columns: minmax(0, 54fr) minmax(0, 46fr); column-gap: clamp(40px, 3.6vw, 56px); row-gap: 1.5rem; padding-block: clamp(1rem, 3vw, 2rem); align-items: start; }
@media (max-width: 860px) { .pdp { grid-template-columns: minmax(0, 1fr); } }
.gallery { display: grid; gap: 1rem; }
.gallery__main { aspect-ratio: 4/5; }
.gallery__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.gallery__row .imgslot { aspect-ratio: 1/1; }
.buy { display: flex; flex-direction: column; gap: 1.4rem; min-width: 0; }
.buy h1 { line-height: 1.05; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend, .label { font-weight: 600; padding: 0; margin-bottom: .5rem; }
.step { display: grid; gap: .6rem; }
.step__n { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--dark); color: var(--cream); font-size: var(--fs-small); margin-right: .5rem; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: .75rem; }
.rcard { position: relative; }
.rcard input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.rcard__body { display: grid; gap: .15rem; padding: .85rem 1rem; border: 1px solid var(--hair); border-radius: var(--r-md); background: #fff; min-height: 64px; }
.rcard input:checked + .rcard__body { border-color: var(--dark); box-shadow: 0 0 0 2px var(--dark); background: #fff; }
.rcard input:focus-visible + .rcard__body { outline: 3px solid var(--terracotta-deep); outline-offset: 2px; }
.rcard__t { font-weight: 600; } .rcard__s { font-size: var(--fs-small); color: var(--text-muted); }
.field { display: grid; gap: .3rem; }
.field input[type=text] { font: inherit; min-height: 48px; padding: .6rem .8rem; border: 1px solid #8a8178; border-radius: var(--r-sm); background: #fff; width: 100%; }
.field .hint { font-size: var(--fs-small); color: var(--text-muted); display: flex; justify-content: space-between; gap: 1rem; }
.upload-ph { border: 2px dashed #9b958d; border-radius: var(--r-md); background: #efece7; color: #5f5a54; min-height: 110px; display: grid; place-items: center; text-align: center; padding: 1rem; cursor: not-allowed; }
.buybox { display: grid; gap: .6rem; padding-top: 1rem; border-top: 1px solid var(--hair); }
.price-tbd { font-family: var(--font-display); font-size: 1.5rem; color: var(--text-muted); }
/* cover preview mock */
.preview-wrap { display: grid; gap: .6rem; }
.cover { position: relative; aspect-ratio: 3/4; width: min(100%, 320px); margin-inline: auto; display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 12% 9%; text-align: center; overflow: hidden;
background: #cfc6b8; color: #3b352f; border: 1px dashed #8a8178; transition: all .2s; }
.cover--hard { border-radius: 4px 10px 10px 4px; border-style: solid; border-color: #3b352f; border-width: 1px 1px 1px 12px; box-shadow: 8px 10px 0 -2px rgba(46,42,38,.18); background: #c4b9a8; }
.cover--soft { border-radius: 3px 6px 6px 3px; border-width: 1px; border-left: 3px double #8a8178; box-shadow: 0 6px 14px -8px rgba(46,42,38,.4); background: #d9d1c4; }
.cover__art { width: 62%; aspect-ratio: 1/1; display: grid; place-items: center; font-size: var(--fs-small); background: rgba(255,255,255,.35); border: 1px dashed #8a8178; }
.cover--drawn .cover__art { border-radius: 50%; }
.cover__name { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.4rem, 5vw, 1.9rem); line-height: 1.1; overflow-wrap: anywhere; }
.cover__line { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: 1rem; min-height: 1.4em; overflow-wrap: anywhere; }
.cover__kind { font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; }
.ph-section { padding-block: 1.2rem; border-top: 1px solid var(--hair); display: grid; gap: .5rem; max-width: 70ch; }
.ph-mark { font-weight: 700; color: var(--flag); }
.note { font-size: var(--fs-small); color: var(--text-muted); }
/* static example (before -> on the cover) */
.excover { position: relative; aspect-ratio: 3/4; width: 100%; background: #c4b9a8; border: 1px solid #3b352f; border-left-width: 12px; border-radius: 4px 10px 10px 4px; box-shadow: 8px 10px 0 -2px rgba(46,42,38,.18); display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 7% 8% 6%; overflow: hidden; line-height: 0; }
.excover__art { width: 78%; aspect-ratio: 4/5; border: 1px solid rgba(46,42,38,.35); background: #fff; overflow: hidden; }
.excover__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.excover__logo { width: 52%; height: auto; display: block; }
.extag { position: absolute; top: .55rem; right: .55rem; z-index: 2; background: #2e2a26; color: #fff; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; line-height: 1; padding: .35rem .5rem; border-radius: 3px; }
.pcard .excover { width: min(100%, 360px); margin-inline: auto; }
.gallery__main.excover { aspect-ratio: 4/5; width: min(100%, 520px); margin-inline: auto; }
.howstrip { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: .8rem; align-items: center; }
.howstrip figure { margin: 0; display: grid; gap: .4rem; text-align: center; }
.howstrip figcaption { font-size: var(--fs-small); color: var(--text-muted); line-height: 1.3; }
.howstrip__photo { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--hair); display: block; }
.howstrip .excover { border-left-width: 8px; box-shadow: 5px 6px 0 -2px rgba(46,42,38,.18); }
.howstrip__arrow { font-size: 1.8rem; color: var(--dark); line-height: 1; }
@media (max-width: 520px) {
.howstrip { grid-template-columns: minmax(0,1fr); justify-items: center; }
.howstrip figure { width: min(100%, 260px); }
.howstrip__arrow { transform: rotate(90deg); }
}
.tips { margin: .6rem 0 0; padding-left: 1.2rem; font-size: var(--fs-small); color: var(--text-muted); }
/* style picker + gallery by style */
.cards--styles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stylemain { position: relative; width: min(100%, 520px); margin-inline: auto; aspect-ratio: 2/3; border: 1px solid var(--hair); border-radius: var(--radius-img); overflow: hidden; background: #e4e1dc; }
.stylemain img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stylemain img[hidden], .stylemain__ph[hidden], .howafter__ph[hidden] { display: none; }
.stylemain__ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; color: #5f5a54; border: 1px dashed #9b958d; }
.stylemain .extag { width: fit-content; position: absolute; top: .6rem; left: .6rem; z-index: 2; }
.thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; }
.thumb { display: grid; gap: .25rem; padding: .25rem; border: 1px solid var(--hair); border-radius: var(--r-sm); background: #fff; cursor: pointer; font: inherit; text-align: center; }
.thumb[aria-pressed="true"] { border-color: var(--dark); box-shadow: 0 0 0 2px var(--dark); }
.thumb:focus-visible { outline: 3px solid var(--terracotta-deep); outline-offset: 2px; }
.thumb img, .thumb__ph { width: 100%; aspect-ratio: 2/3; object-fit: cover; display: grid; place-items: center; background: #e4e1dc; font-size: .6rem; color: #5f5a54; }
.thumb__l { font-size: .7rem; font-weight: 600; }
.howafter__ph { display: grid; place-items: center; width: 100%; height: 100%; background: #e4e1dc; color: #5f5a54; font-size: .7rem; line-height: 1.2; }
.excover__art img[hidden] { display: none; }
.cover__brand { display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.cover__brand img:first-child { width: 2.2rem; height: auto; }
.cover__brand img:last-child { width: 6rem; height: auto; }
@media (max-width: 480px) { .cards--styles { grid-template-columns: 1fr; } }
/* styles picker swatches + default cover card (2026-10-07) */
.stylemain--card { width: min(100%, 360px); }
.rcard__body--sw { grid-template-columns: 56px 1fr; align-items: center; column-gap: .75rem; }
.rcard__sw { grid-row: span 3; width: 56px; aspect-ratio: 2/3; object-fit: cover; display: grid; place-items: center; background: #e4e1dc; border: 1px solid var(--hair); border-radius: 3px; font-size: .55rem; line-height: 1.1; text-align: center; color: #5f5a54; }
.cover__sub { font-size: .8rem; font-family: var(--font-body, inherit); }
.thumbs[hidden] { display: none; }
/* Flow D: free watermarked sample (mock) */
.sample-ctl { display: grid; gap: .4rem; justify-items: start; margin-top: .8rem; }
.sample { display: grid; gap: .5rem; margin-top: .8rem; max-width: 280px; }
.sample__art { position: relative; overflow: hidden; border: 1px solid var(--hair); border-radius: var(--r-sm); aspect-ratio: 2/3; background: #efece7; }
.sample__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sample__ph { position: absolute; inset: 0; display: grid; place-items: center; color: #5f5a54; }
.sample__wm { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.sample__wm::after { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml;utf8,"); background-repeat: repeat; pointer-events: none; }
/* F2 (2026-10-10): small previews keep the tiled SAMPLE at 30% (was 60%); the ENLARGED view (save dialog, create zoom) = a frame band only - SAMPLE along the top + bottom edge, tinted sides, the face clear */
.sv__dlg .sample__wm::after, .zmodal .sample__wm::after { background: url("data:image/svg+xml;utf8,") 0 0 / auto 7% repeat-x, url("data:image/svg+xml;utf8,") 0 100% / auto 7% repeat-x, linear-gradient(rgba(46,42,38,.4), rgba(46,42,38,.4)) 0 0 / 100% 7% no-repeat, linear-gradient(rgba(46,42,38,.4), rgba(46,42,38,.4)) 0 100% / 100% 7% no-repeat, linear-gradient(rgba(46,42,38,.4), rgba(46,42,38,.4)) 0 0 / 4% 100% no-repeat, linear-gradient(rgba(46,42,38,.4), rgba(46,42,38,.4)) 100% 0 / 4% 100% no-repeat; }
.ztog { display: flex; justify-content: center; gap: .5rem; margin-top: .7rem; } .ztog .btn, .ztog .btn:hover { background: #fff; border: 1.5px solid var(--dark); color: var(--dark); } .ztog .btn[aria-pressed='true'] { background: var(--dark); color: #fff; } .ztog__ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 4; }
.sample__badge { position: absolute; left: .5rem; top: .5rem; background: var(--flag-bg); color: var(--flag); font-size: var(--fs-label); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .2rem .5rem; border-radius: var(--r-sm); }
.after { display: grid; gap: .3rem; padding-top: .6rem; }
.after .tips { margin-top: 0; }
#sample-panel [hidden] { display: none !important; }
/* D2 (2026-10-09): picture-first style cards (journal chooser + create "Change style"); selected = charcoal ring, never terracotta */
.cards.cards--pic { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.cards--pic .rcard__body.rcard__body--sw { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 0; padding: 0; min-height: 0; overflow: hidden; background: #fff; }
.cards--pic .rcard__body--sw .swwrap { line-height: 0; }
.cards--pic .rcard__sw { grid-row: auto; display: block; width: 100%; aspect-ratio: 2/3; object-fit: cover; border: 0; border-radius: 0; }
.cards--pic .swtag { left: 6px; top: 6px; bottom: auto; line-height: 1.4; }
.cards--pic .rcard__t { padding: .5rem .7rem 0; font-size: 1rem; line-height: 1.25; }
.cards--pic .rcard__s { padding: .15rem .7rem .65rem; font-size: var(--fs-small); line-height: 1.3; }
.cards--pic .rcard input:checked + .rcard__body { border-color: var(--dark); box-shadow: 0 0 0 2px var(--dark); background: #fff; }
/* P1 (2026-10-09): tap targets >= 44x44 via min-size, never via a bigger font */
.wordmark { display: flex; align-items: center; min-height: 44px; }
.site-foot ul { gap: 0; }
.crumbs a, .site-foot li a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
/* links inside running text stay inline (no line jumps); vertical padding grows the hit area to >= 44px without moving the lines */
a.linkbtn, main p:not(.crumbs) a:not(.btn), main li a:not(.btn), main dd a:not(.btn) { padding-block: .9rem; }