/* Refinement 2026-09-09 (owner). The magazine page (#magazine) and the finale's cover card.
   Paper, Bodoni headings, Manrope copy; no inner scrollers — the page scrolls. */

/* ---------- the magazine page ---------- */
.jlb{--lb-ink:#232324;--lb-muted:#7a746b;--lb-line:#e3dfd8;--lb-paper:#faf9f6;--lb-serif:'Bodoni Moda','Times New Roman',serif;--lb-sans:Manrope,Arial,sans-serif;background:var(--lb-paper);color:var(--lb-ink);font-family:var(--lb-sans)}
.jlb *{box-sizing:border-box}
.jlb-bar{position:sticky;top:0;z-index:6;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 42px;background:#faf9f6f0;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--lb-line)}
.jlb-back{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 4px;background:none;border:0;font:500 11px var(--lb-sans);color:var(--lb-ink);cursor:pointer}
.jlb-back iconify-icon{width:16px;height:16px;font-size:16px}
.jlb-mast{font:400 22px/1 var(--lb-serif);letter-spacing:-.04em}
.jlb-mast em,.jlb-cover-mast em{font-style:italic;color:var(--j-mood,#e97c4d)}
.jlb-bar-actions{display:flex;gap:6px}
.jlb-bar-actions button{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;border:1px solid var(--lb-line);background:#fff;font:500 10px var(--lb-sans);color:var(--lb-ink);cursor:pointer}
.jlb-bar-actions button iconify-icon{width:14px;height:14px;font-size:14px}
.jlb-primary{background:var(--lb-ink)!important;color:#fff!important;border-color:var(--lb-ink)!important}
.jlb-wrap{max-width:1240px;margin:0 auto;padding:0 42px 64px}
.jlb-eyebrow{display:block;font-size:9px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--lb-muted)}
/* cover + contents */
.jlb-spread{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:56px;align-items:center;padding:44px 0 52px}
.jlb-cover{position:relative;aspect-ratio:3/4;overflow:hidden;background:#dcd9d0;isolation:isolate}
.jlb-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 8%}
.jlb-cover::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 58%,#2a231f99 100%);z-index:1}
.jlb-cover-mast{position:absolute;left:28px;bottom:104px;z-index:2;color:#fff;font:400 clamp(34px,4vw,48px)/1 var(--lb-serif);letter-spacing:-.05em;text-shadow:0 1px 10px #14141866}
.jlb-cover-line{position:absolute;left:28px;right:28px;bottom:30px;z-index:2;color:#fff}
.jlb-cover-line .jlb-eyebrow{color:#ffffffd6}
.jlb-cover-line p{font:italic 400 clamp(20px,2.4vw,28px)/1.2 var(--lb-serif);margin:8px 0 0}
.jlb-issue h1{font:400 clamp(40px,4.6vw,66px)/1.02 var(--lb-serif);letter-spacing:-.045em;margin:10px 0 18px;text-wrap:balance}
.jlb-lede{font:400 18px/1.55 var(--lb-serif);max-width:60ch;color:#3a3633;margin:0}
.jlb-copy{font-size:12px;line-height:1.8;color:#5d5852;max-width:60ch;margin:14px 0 0}
.jlb-fact{display:inline-flex;align-items:center;gap:6px;font-size:10px;color:var(--lb-muted);margin-top:14px}
.jlb-contents-title{margin-top:28px}
.jlb-contents{list-style:none;padding:0;margin:10px 0 0;border-top:1px solid var(--lb-line)}
.jlb-contents li{display:flex;gap:16px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--lb-line);font-size:12px}
.jlb-contents li i{font:italic 400 14px var(--lb-serif);color:#a59f94;min-width:24px}
.jlb-contents a{color:inherit;text-decoration:none}
.jlb-contents a:hover{text-decoration:underline;text-underline-offset:4px}
/* sections */
.jlb-section{padding:56px 0;border-top:1px solid var(--lb-line);scroll-margin-top:70px}
.jlb-section h2{font:400 clamp(30px,3.4vw,48px)/1.08 var(--lb-serif);letter-spacing:-.04em;margin:12px 0 22px;text-wrap:balance}
.jlb-section h2 em{font-style:italic;font-weight:400}
.jlb-brief{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:start}
.jlb-facts{margin:0}
.jlb-facts>div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:18px;padding:16px 0;border-top:1px solid var(--lb-line)}
.jlb-facts dt{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--lb-muted);padding-top:5px}
.jlb-facts dd{margin:0}
.jlb-facts dd strong{display:block;font:400 22px/1.2 var(--lb-serif);letter-spacing:-.01em}
.jlb-facts dd span{display:block;font-size:11px;line-height:1.7;color:var(--lb-muted);margin-top:3px}
.jlb-dot{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:10px;vertical-align:middle;box-shadow:0 0 0 2px #ffffffb0}
.jlb-swatches{display:flex;gap:8px;margin:4px 0 6px}
.jlb-swatches i{width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1px #0000000f}
.jlb-face{position:relative;margin:0;aspect-ratio:1;overflow:hidden;background:#e8e5df}
.jlb-face img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 6%;transform:scale(2.2);transform-origin:50% 7%}
.jlb-face figcaption,.jlb-frame figcaption{position:absolute;left:12px;bottom:12px;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:#fff;text-shadow:0 1px 6px #141418aa;z-index:1}
.jlb-frames{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.jlb-frame{position:relative;margin:0;overflow:hidden;background:#dcd9d0}
.jlb-frame[data-orientation=portrait]{aspect-ratio:3/4}
.jlb-frame[data-orientation=landscape]{aspect-ratio:16/9;grid-column:span 2}
.jlb-frame[data-orientation=square]{aspect-ratio:1}
/* Where her face sits in a generated frame. The engine measures the same thing for its own
   masks and puts it at 0.26 of the height; these were tuned for the prototype's photographs,
   which framed her much higher, so the detail crop landed on weather and a building with the top
   of her head at the very bottom edge (owner, 2026-09-11). */
:root{--lb-face-y:26%}
.jlb-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% var(--lb-face-y)}
.jlb-frame[data-frame=wide] img{object-position:50% 50%}
.jlb-frame .jlb-crop-face{object-position:50% var(--lb-face-y);transform:scale(2.1);transform-origin:50% var(--lb-face-y)}
/* Every mood of the look, as a strip of portraits. */
.jlb-moods{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:26px}
.jlb-mood{margin:0}
.jlb-mood img{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;object-position:50% var(--lb-face-y);background:#f2f1ed}
.jlb-mood figcaption{font:500 10px/1.6 var(--lb-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--lb-muted);margin-top:8px}
@media(max-width:720px){.jlb-moods{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* The stylist writing to her, not a caption. */
.jlb-note-from{font:italic 400 15px/1.75 var(--lb-serif);color:var(--lb-ink);margin:14px 0 0;max-width:58ch}
.jlb-plan{margin:16px 0 0;font-size:10px;line-height:1.7;color:var(--lb-muted)}
.jlb-pieces{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:26px}
.jlb-piece .jlb-shot{display:block;aspect-ratio:1/1.1;background:#f2f1ed no-repeat;background-size:300% 200%}
.jlb-shot-empty{background:#ecebe6!important}
.jlb-piece img{display:block;width:100%;aspect-ratio:1/1.1;object-fit:contain;background:#f2f1ed;padding:8%}
.jlb-piece h4{font:500 12px/1.4 var(--lb-sans);margin:10px 0 2px}
.jlb-piece p{font-size:10px;color:var(--lb-muted);margin:0}
.jlb-total{display:flex;align-items:baseline;gap:18px;margin-top:28px;padding-top:18px;border-top:1px solid var(--lb-line)}
.jlb-total strong{font:400 34px/1 var(--lb-serif);letter-spacing:-.03em}
.jlb-total span{font-size:11px;color:var(--lb-muted)}
.jlb-beauty{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
.jlb-products{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:12px}
.jlb-product{color:inherit;text-decoration:none}
.jlb-product img,.jlb-product .jlb-shot{display:block;width:100%;aspect-ratio:1;object-fit:contain;background:#fff;border:1px solid var(--lb-line);padding:12%}
.jlb-product span{display:block;font-size:9px;color:var(--lb-muted);margin-top:8px;letter-spacing:.08em;text-transform:uppercase}
.jlb-product strong{display:block;font-size:11px;font-weight:500;margin-top:2px}
.jlb-film{position:relative;display:grid;place-items:center;aspect-ratio:16/9;overflow:hidden;background:#1f1c1d;isolation:isolate}
.jlb-film::before{content:'';position:absolute;inset:-40px;background:var(--lb-film-bg,none) 50% 20%/cover no-repeat;filter:blur(28px) brightness(.55);z-index:0}
.jlb-film video{position:relative;z-index:1;height:100%;max-width:100%;aspect-ratio:9/16;object-fit:contain;background:#000}
.jlb-list{list-style:none;padding:0;margin:0}
.jlb-list li{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--lb-line);font-size:12px}
.jlb-list li>span{font:italic 400 14px var(--lb-serif);color:#a59f94}
.jlb-list li small{display:block;font-size:10px;color:var(--lb-muted);margin-top:2px}
.jlb-list li b{font-weight:500;white-space:nowrap}
.jlb-keep{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:34px}
.jlb-keep button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;border:1px solid #ccc9c1;background:#fff;font:500 11px var(--lb-sans);color:var(--lb-ink);cursor:pointer}
.jlb-status{font-size:10px;color:var(--lb-muted);margin:12px 0 0;min-height:16px}
.jlb-notes{font-size:10px;line-height:1.7;color:var(--lb-muted);margin-top:26px}
.jlb-notes p{margin:0 0 4px}
@media(max-width:900px){.jlb-wrap{padding:0 28px 48px}.jlb-bar{padding:10px 28px}.jlb-spread,.jlb-brief,.jlb-beauty{grid-template-columns:1fr;gap:28px}.jlb-frames{grid-template-columns:1fr 1fr}.jlb-pieces{grid-template-columns:repeat(2,minmax(0,1fr))}.jlb-cover{max-width:420px}}
@media(max-width:700px){.jlb-wrap{padding:0 18px 40px}.jlb-bar{padding:8px 14px}.jlb-mast{display:none}.jlb-bar-actions button span{display:none}.jlb-bar-actions button{min-width:40px;justify-content:center;padding:0}.jlb-section{padding:40px 0}.jlb-frames{grid-template-columns:1fr}.jlb-frame[data-orientation=landscape]{grid-column:auto}.jlb-keep{grid-template-columns:1fr}.jlb-facts>div{grid-template-columns:86px 1fr;gap:12px}.jlb-products{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.jlb-cover{max-width:none}.jlb-lede{font-size:16px}}
@media(prefers-reduced-motion:reduce){.jlb-bar{backdrop-filter:none}}

/* ---------- the finale: cover card + contents ---------- */
.jpr-quiet .jpr-toolbar,.jpr-quiet .jpr-reader,.jpr-quiet .jpr-pagination,.jpr-quiet .jpr-page-caption{display:none!important}
.jpr-issue{display:grid;grid-template-columns:minmax(240px,.8fr) minmax(0,1.2fr);gap:36px;align-items:start}
.jpr-cover-card{position:relative;display:block;width:100%;aspect-ratio:3/4;overflow:hidden;background:#dcd9d0;border:0;padding:0;cursor:pointer;text-align:left;isolation:isolate;color:#fff}
.jpr-cover-card .jpr-visual{position:absolute;inset:0;margin:0}
.jpr-cover-card .jpr-image-slot>img{width:100%;height:100%;object-fit:cover;object-position:50% 8%}
.jpr-cover-card::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 58%,#2a231f99 100%);z-index:1;pointer-events:none}
.jpr-cover-card .jpr-cover-masthead,.jpr-cover-card .jpr-cover-copy{z-index:2}
.jpr-cover-card .jpr-cover-masthead em{color:var(--j-mood,#fff)}
.jpr-open-hint{position:absolute;top:14px;right:14px;z-index:2;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;background:#faf9f6;border-radius:18px;font:500 10px Manrope,Arial,sans-serif;color:#262626;transition:transform .2s}
.jpr-cover-card:hover .jpr-open-hint{transform:translateX(3px)}
.jpr-cover-card:focus-visible{outline:2px solid #a76f94;outline-offset:4px}
.jpr-contents h4{font:400 clamp(28px,3vw,42px)/1.08 'Bodoni Moda','Times New Roman',serif;letter-spacing:-.04em;margin:10px 0 16px}
.jpr-contents ol{list-style:none;margin:0;padding:0;border-top:1px solid #e3dcd7}
.jpr-contents li{display:flex;gap:14px;align-items:baseline;padding:10px 0;border-bottom:1px solid #e3dcd7;font-size:12px}
.jpr-contents li i{font:italic 400 14px 'Bodoni Moda','Times New Roman',serif;color:#a59f94;min-width:22px}
.jpr-open{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 22px;margin-top:22px;background:#262626;color:#fff;border:0;font:500 11px Manrope,Arial,sans-serif;cursor:pointer}
.jpr-open iconify-icon{width:16px;height:16px;font-size:16px}
.jpr-frames-note{font-size:10px;color:#7c7174;margin:12px 0 0;line-height:1.7}
@media(max-width:700px){.jpr-issue{grid-template-columns:1fr;gap:22px}.jpr-cover-card{max-width:320px}.jpr-open{width:100%;justify-content:center}}

/* Frames: a magazine grid with named areas for the frames prepared today; later frames flow in. */
.jlb-frames{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:"front wide wide" "front face plan";grid-auto-flow:dense}
.jlb-frame[data-frame=front]{grid-area:front;aspect-ratio:auto;min-height:420px}
.jlb-frame[data-frame=wide]{grid-area:wide}
.jlb-frame[data-frame=face]{grid-area:face}
.jlb-frame-plan{grid-area:plan;background:#f1eee8;padding:22px;display:flex;flex-direction:column;justify-content:flex-start;gap:8px}
.jlb-frame-plan p{margin:6px 0 4px;font:400 16px/1.35 var(--lb-serif)}
.jlb-frame-plan ul{list-style:none;margin:0;padding:0;font-size:10px;line-height:1.75;color:var(--lb-muted)}
.jlb-frame-plan li i{font-style:italic;color:#a59f94}
.jlb-face figcaption,.jlb-frame figcaption{left:10px;bottom:10px;display:inline-flex;align-items:center;min-height:22px;padding:3px 8px;background:#faf9f6e6;color:#4a443f;font-size:8px;letter-spacing:.12em;text-shadow:none;border-radius:2px}
@media(max-width:900px){.jlb-frames{grid-template-columns:1fr 1fr;grid-template-areas:"front wide" "face plan"}.jlb-frame[data-frame=wide]{aspect-ratio:3/4}}
@media(max-width:700px){.jlb-frames{grid-template-columns:1fr;grid-template-areas:none}.jlb-frame[data-frame=front],.jlb-frame[data-frame=wide],.jlb-frame[data-frame=face],.jlb-frame-plan{grid-area:auto}.jlb-frame[data-frame=front]{aspect-ratio:3/4;min-height:0}.jlb-frame[data-frame=wide]{aspect-ratio:16/9}}

/* 2026-09-16 (audit, owner: every screen checked on a phone and a desktop). Phones: the finale's
   cover card was 320px in a 350px column (a ragged right edge); the magazine bar's three buttons
   were 40px; the frames' plan card kept its square aspect around two lines of text (350×354 of
   paper); the contents' links were 17px tall inside 43px rows. */
@media(max-width:700px){.jpr-cover-card{max-width:none}.jlb-bar-actions button{min-width:44px}.jlb-frame.jlb-frame-plan{aspect-ratio:auto}}
@media(max-width:900px){.jlb-bar-actions button{min-height:44px}.jlb-contents li{padding:0;align-items:center}.jlb-contents a{display:flex;flex:1;align-items:center;min-height:44px}}