/* Day by Day Japan Releases (releases.pen, frames "Day by Day Japan · Releases · index" a3qkJ, "· page" UGol5, phone ZZ9UY and Z98m1; approved by the owner 2026-10-12;
   values read from ops/review/releases-2026-10-12/design/meguri-releases-*.png and DESIGN.md, because releases.pen was not
   the active Pencil file). The six shared-layout frames are one layout themed per magazine: this sheet is Uchi's
   (sites/uchi/theme/pages/releases.css) with Day by Day Japan's tokens. Fonts are the magazine's locked set: Bricolage Grotesque (--display) 800 for heads, Instrument Sans for text, IBM Plex Mono for the caps.
   The markup is the engine's releases step (engine/releases.py); every rule sits under .xr. */
main.xpage-releases{display:block;max-width:none;width:auto;margin:0;padding:0!important}
.xr{--rl-acc:#D9302A;--rl-on:#FFFFFF;--rl-dim:var(--muted);--rl-rule:var(--rule);--rl-tile:var(--panel);
  --rl-line:var(--rule);--rl-head:var(--display);--rl-hw:800;--rl-hls:-.045em;--rl-cap:var(--mono);--rl-capw:700;--rl-ls:.1em;--rl-r:16px;--rl-gut:32px;--rl-h1:152px;--rl-chip:13px;
  max-width:1440px;margin:0 auto;padding:0 var(--rl-gut) 72px;color:var(--ink);overflow-x:clip;font-family:var(--sans)}
.xr *{box-sizing:border-box}
:where(.xr) :where(h1,h2,p,ol,dl,dd,figure){margin:0}
:where(.xr) ol{padding:0;list-style:none}
:where(.xr) a{color:inherit;text-decoration:none}
.xr i{font-style:normal}
.xr svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:block}
.xr .xr-k,.xr .xr-cap{font:var(--rl-capw) 13px/1.3 var(--rl-cap);letter-spacing:var(--rl-ls);text-transform:uppercase}
.xr .xr-n-p{display:none}

/* ---------------------------------------------------------------- the crumb bar (both pages) */
.xr-crumb{display:flex;align-items:center;gap:12px;margin:0 calc(-1 * var(--rl-gut));padding:12px var(--rl-gut);border-top:1px solid var(--rl-rule);border-bottom:1px solid var(--rl-rule);font:var(--rl-capw) 13px/1.3 var(--rl-cap);letter-spacing:.2em;text-transform:uppercase}
.xr-crumb .xr-back{display:none}
.xr-cr-d{display:inline-flex;gap:12px;color:var(--rl-dim)}
.xr-cr-d a:first-child{color:var(--rl-acc)}
.xr-cr-d i{color:var(--rl-dim)}
.xr-cr-b{color:var(--ink)}

/* ---------------------------------------------------------------- the type tile: our colour block, the maker in the head face */
.xr-tile{position:relative;display:flex;flex-direction:column;justify-content:flex-end;flex:none;width:160px;height:106px;padding:10px 10px 12px;background:var(--rl-tile);color:var(--ink);border-radius:var(--rl-r);overflow:hidden}
.xr-tile::before{content:"";position:absolute;left:10px;top:10px;width:6px;height:6px;border-radius:50%;background:var(--rl-acc)}
.xr-tile small{display:none}
.xr-tile b{font:var(--rl-hw) 20px/1.05 var(--rl-head);letter-spacing:var(--rl-hls);overflow-wrap:anywhere}

/* ---------------------------------------------------------------- index: hero */
.xr-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:48px;padding:44px 0 36px}
.xr-hero-l{flex:1 1 auto;min-width:0;padding-top:46px}
.xr .xr-h1{font:var(--rl-hw) min(var(--rl-h1),11.8vw)/.9 var(--rl-head);letter-spacing:calc(var(--rl-hls) * 1.6)}
.xr-intro{display:flex;flex-direction:column;gap:22px;margin-top:30px;max-width:640px}
.xr .xr-kick{display:none}
.xr-lede{font:400 20px/1.4 var(--sans);color:var(--rl-dim)}
.xr .xr-count{color:var(--rl-acc);order:2}
.xr-latest{position:relative;flex:0 0 516px;height:300px;display:flex;flex-direction:column;justify-content:space-between;padding:24px;background:var(--rl-acc);color:var(--rl-on);border-radius:var(--rl-r)}
.xr-latest-top{display:block}
.xr-latest-top small{font:var(--rl-capw) 13px/1.3 var(--rl-cap);letter-spacing:var(--rl-ls);text-transform:uppercase}
.xr-latest .xr-pill,.xr-latest-b>small,.xr-latest-d{display:none}
.xr-latest-b{display:flex;flex-direction:column;gap:14px}
.xr-latest-b>b{font:var(--rl-hw) 32px/1.12 var(--rl-head);letter-spacing:var(--rl-hls);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.xr-latest-b>small.xr-latest-w{display:block;font:var(--rl-capw) 13px/1.3 var(--rl-cap);letter-spacing:var(--rl-ls);text-transform:uppercase}
.xr-latest .xr-btn{position:absolute;inset:0;min-height:0;padding:0;border-radius:var(--rl-r);background:transparent}
.xr-latest .xr-btn span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.xr-latest .xr-btn svg{display:none}
.xr-latest:has(.xr-btn:hover) .xr-latest-b>b{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}

/* ---------------------------------------------------------------- index: filters and the makers strip */
.xr-filters{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 calc(-1 * var(--rl-gut));padding:15px var(--rl-gut);border-top:1px solid var(--rl-rule);border-bottom:1px solid var(--rl-rule)}
.xr-filters>.xr-k{display:none}
.xr-chips{display:flex;flex-wrap:wrap;gap:10px}
.xr-chip{appearance:none;background:transparent;color:var(--ink);border:1px solid var(--rl-line);border-radius:30px;padding:8px 14px;font:var(--rl-capw) 13px/1.3 var(--rl-cap);letter-spacing:var(--rl-ls);text-transform:uppercase;cursor:pointer;white-space:nowrap;font-size:var(--rl-chip)}
.xr-chip .xr-c{color:var(--rl-acc);margin-left:4px}
.xr-chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.xr-chip[aria-pressed="true"] .xr-c{color:var(--bg)}
.xr-chip:not([aria-pressed="true"]):hover{border-color:var(--ink)}
.xr-sp{flex:1 1 0}
.xr-selects{display:flex;gap:10px}
.xr-sel{position:relative;display:flex;align-items:center;gap:10px;border:1px solid var(--rl-line);border-radius:30px;padding:0 14px}
.xr-sel .xr-k{color:var(--rl-dim)}
.xr-sel select{appearance:none;-webkit-appearance:none;background:transparent;border:0;color:var(--ink);font:var(--rl-capw) 13px/1.3 var(--rl-cap);letter-spacing:var(--rl-ls);text-transform:uppercase;padding:8px 26px 8px 0;margin:0;cursor:pointer;max-width:220px;field-sizing:content;font-size:var(--rl-chip)}
.xr-sel select option{text-transform:none;color:#1E1A15;background:#F4EFE6}
.xr-sel svg{position:absolute;right:12px;top:50%;width:14px;height:14px;margin-top:-7px;pointer-events:none}
.xr-makers{display:flex;align-items:center;flex-wrap:wrap;gap:8px 22px;margin:0 calc(-1 * var(--rl-gut));padding:12px var(--rl-gut);border-bottom:1px solid var(--rl-rule)}
.xr-makers .xr-k{color:var(--rl-dim);margin-right:2px}
.xr-makers a,.xr-makers .xr-more-n{font:400 16px/1.3 var(--sans);color:var(--ink)}
.xr-makers a:hover,.xr-makers a.on{color:var(--rl-acc)}

/* ---------------------------------------------------------------- index: the list and the rail */
.xr-body{display:grid;grid-template-columns:minmax(0,1fr) 336px;gap:48px;padding-top:34px}
.xr-month{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:0 0 8px;border-bottom:2px solid var(--ink)}
.xr-month:not(:first-child){margin-top:30px}
.xr-month h2{font:var(--rl-hw) 42px/1.1 var(--rl-head);letter-spacing:var(--rl-hls)}
.xr-month small{font:var(--rl-capw) 13px/1.3 var(--rl-cap);letter-spacing:var(--rl-ls);text-transform:uppercase;color:var(--rl-dim);padding-bottom:6px}
.xr-month.xr-dim{opacity:.4}
.xr-row{border-bottom:1px solid var(--rl-rule)}
.xr-row-a{display:grid;grid-template-columns:70px 160px minmax(0,1fr);gap:24px;align-items:start;padding:18px 0 20px}
.xr-date{display:flex;gap:6px;padding-top:3px;font:var(--rl-capw) 13px/1.3 var(--rl-cap);letter-spacing:var(--rl-ls);text-transform:uppercase;color:var(--rl-dim)}
.xr-date b{font:inherit}
.xr-text{display:flex;flex-direction:column;gap:6px;min-width:0}
.xr-meta{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.xr-meta .xr-pill,.xr-pm{font:var(--rl-capw) 13px/1.3 var(--rl-cap);letter-spacing:var(--rl-ls);text-transform:uppercase;color:var(--rl-acc)}
.xr-feat{font:var(--rl-capw) 13px/1.3 var(--rl-cap);letter-spacing:var(--rl-ls);text-transform:uppercase;color:var(--ink)}
.xr-meta .xr-src{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.xr-pm{display:none}
.xr-t{font:var(--rl-hw) 26px/1.18 var(--rl-head);letter-spacing:var(--rl-hls);margin-top:2px}
.xr-t:lang(ja){font-family:"Shippori Mincho",var(--rl-head);font-size:23px;line-height:1.45}
.xr-line{font:400 16px/1.4 var(--sans);color:var(--rl-dim)}
.xr-src-p{font:var(--rl-capw) 12px/1.3 var(--rl-cap);letter-spacing:.2em;text-transform:uppercase;color:var(--rl-dim);margin-top:2px}
.xr-go{display:none}
.xr-row-a:hover .xr-t{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.xr-empty{padding:28px 0;color:var(--rl-dim)}
.xr-next{appearance:none;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:52px;margin-top:16px;background:transparent;color:var(--ink);border:1.5px solid var(--ink);border-radius:26px;font:var(--rl-capw) 13px/1 var(--rl-cap);letter-spacing:var(--rl-ls);text-transform:uppercase;cursor:pointer}
.xr-next svg{width:14px;height:14px}
.xr-next:hover{background:var(--ink);color:var(--bg)}
.xr-rail{display:flex;flex-direction:column;gap:30px}
.xr-rb{border-top:2px solid var(--ink);padding-top:16px}
.xr-rb h2.xr-k{color:var(--rl-dim);margin-bottom:8px}
.xr-rb li{border-bottom:1px solid var(--rl-rule)}
.xr-rb li>a,.xr-rb li>span{display:flex;align-items:center;gap:12px;padding:9px 0}
.xr-rb li b{flex:0 0 150px;font:400 15px/1.25 var(--sans)}
.xr-rb li small{font:500 13px/1 var(--sans);color:var(--ink)}
.xr-yb{display:block;height:4px;border-radius:2px;background:var(--rl-acc)}
.xr-bytype li>span{justify-content:space-between}
.xr-bytype li b{flex:1 1 auto}
.xr-bytype li small{color:var(--rl-acc)}
.xr-bar{display:none}
.xr-rb p{font:400 15px/1.4 var(--sans);color:var(--rl-dim)}
.xr-rb a:hover b{color:var(--rl-acc)}

/* ---------------------------------------------------------------- the release page */
.xr-main-p{display:grid;grid-template-columns:600px minmax(0,1fr);gap:48px;align-items:start;padding:40px 0 56px}
.xr-sleeve{position:relative;display:flex;flex-direction:column;justify-content:space-between;height:560px;padding:24px;background:var(--rl-tile);border-radius:var(--rl-r);overflow:hidden}
.xr-sleeve::before{content:"";width:14px;height:14px;border-radius:50%;background:var(--rl-acc);flex:none}
.xr-sl-top{display:none}
.xr-big{display:flex;flex-direction:column;font:var(--rl-hw) 120px/1 var(--rl-head);letter-spacing:var(--rl-hls);margin-top:-14px;overflow-wrap:anywhere}
.xr-sl-bot{display:block;font:var(--rl-capw) 14px/1.3 var(--rl-cap);letter-spacing:var(--rl-ls);text-transform:uppercase}
.xr-sl-sep,.xr-sl-bot small:last-child{display:none}
.xr-sleeve-img{padding:0;justify-content:flex-start}
.xr-sleeve-img::before{display:none}
.xr-sleeve-img img{width:100%;height:100%;object-fit:cover}
.xr-sleeve-img figcaption{position:absolute;left:12px;bottom:10px;color:#fff;text-shadow:0 1px 2px #000}
.xr-copy{display:flex;flex-direction:column;min-width:0}
.xr-tags{display:flex;flex-wrap:wrap;gap:10px;font:var(--rl-capw) 14px/1.3 var(--rl-cap);letter-spacing:var(--rl-ls);text-transform:uppercase;color:var(--rl-acc)}
.xr-tags .xr-pill:not(.xr-pill-hi):not(.xr-pill-b){display:none}
.xr-tags a:hover{text-decoration:underline}
.xr-h1p{font:var(--rl-hw) 52px/1.06 var(--rl-head);letter-spacing:var(--rl-hls);margin-top:18px}
.xr-brief{font:400 20px/1.42 var(--sans);margin-top:26px}
.xr-facts{margin-top:22px;border-top:2px solid var(--ink);padding-top:14px}
.xr-facts>h2.xr-k{color:var(--rl-dim)}
.xr-fact{display:grid;grid-template-columns:158px minmax(0,1fr);gap:0;padding:11px 0 12px;border-bottom:1px solid var(--rl-rule)}
.xr-fact:first-child{padding-top:6px}
.xr-fact dt{font:var(--rl-capw) 13px/1.6 var(--rl-cap);letter-spacing:var(--rl-ls);text-transform:uppercase;color:var(--rl-dim)}
.xr-fact dd{font:400 17px/1.4 var(--sans)}
.xr-links{display:flex;flex-direction:column;gap:12px;margin-top:22px}
.xr-btn{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:14px 22px;border-radius:28px;font:600 19px/1.2 var(--sans);transition:filter .2s}
.xr-btn svg{flex:none;width:18px;height:18px}
.xr-off{background:var(--rl-acc);color:var(--rl-on)}
.xr-kit{border:1.5px solid var(--ink)}
.xr-btn:hover{filter:brightness(1.08)}
.xr-note{font:400 13px/1.4 var(--sans);color:var(--rl-dim);margin-top:30px}
.xr-video{padding:0 0 48px}
.xr-sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding-bottom:10px;border-bottom:2px solid var(--ink);margin-bottom:18px}
.xr-sec-h h2{font:var(--rl-hw) 42px/1.1 var(--rl-head)}
.xr-sec-h small{color:var(--rl-dim)}
.xr-player{position:relative;aspect-ratio:16/9;background:var(--rl-tile);border-radius:var(--rl-r);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:20px;text-align:center;overflow:hidden}
.xr-player.on{padding:0}.xr-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.xr-play{appearance:none;width:72px;height:72px;border-radius:50%;border:0;background:var(--rl-acc);color:var(--rl-on);padding:22px;cursor:pointer}
.xr-play svg{fill:currentColor;stroke:none}
.xr-play-l{font:var(--rl-hw) 22px/1.2 var(--rl-head)}
.xr-legal{font:400 13px/1.4 var(--sans);color:var(--rl-dim);max-width:520px}.xr-legal a{text-decoration:underline}
.xr-morefrom{margin:0 calc(-1 * var(--rl-gut)) -72px;padding:44px var(--rl-gut) 56px;background:color-mix(in srgb,var(--bg) 82%,#000)}
.xr-mf-h{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding-bottom:8px;border-bottom:2px solid var(--ink)}
.xr-mf-h br{display:none}
.xr-mf-h h2{font:var(--rl-hw) 46px/1.1 var(--rl-head);letter-spacing:var(--rl-hls)}
.xr-mf-h .xr-k{color:var(--rl-acc);padding-bottom:8px;white-space:nowrap}
.xr-more-note{font:400 16px/1.4 var(--sans);color:var(--rl-dim);margin-top:24px}
.xr-cards{display:grid;grid-template-columns:repeat(3,minmax(0,442px));gap:24px;margin-top:24px}
.xr-card{display:flex;flex-direction:column;gap:12px}
.xr-tile-c{width:100%;height:200px}
.xr-card small.xr-k{color:var(--rl-acc);margin-top:6px}
.xr-card-t{font:var(--rl-hw) 24px/1.15 var(--rl-head);letter-spacing:var(--rl-hls)}
.xr-card-t:lang(ja){font-family:"Shippori Mincho",var(--rl-head);font-size:21px;line-height:1.45}
.xr-card:hover .xr-card-t{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}

/* ---------------------------------------------------------------- between the frames */
@media (max-width:1240px){
  .xr-latest{flex-basis:420px}
  .xr-body{grid-template-columns:minmax(0,1fr) 280px;gap:36px}
  .xr-main-p{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .xr-big{font-size:clamp(64px,8.4vw,120px)}
}
@media (max-width:900px){
  .xr-hero{flex-direction:column;gap:28px}
  .xr-hero-l{padding-top:10px}
  .xr-latest{flex:none;width:100%;height:auto;min-height:220px;gap:40px}
  .xr-body{grid-template-columns:minmax(0,1fr)}
  .xr-rail{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:28px}
  .xr-main-p{grid-template-columns:minmax(0,1fr)}
  .xr-sleeve{height:420px}
  .xr-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------------------------------------------------------------- the phone frames */
@media (max-width:600px){
  .xr{--rl-gut:16px;padding-bottom:40px}
  .xr .xr-n-d{display:none}.xr .xr-n-p{display:inline}
  .xr .xr-month .xr-n-d,.xr .xr-more-note .xr-n-d,.xr .xr-mf-h .xr-n-d{display:inline}.xr .xr-month .xr-n-p,.xr .xr-more-note .xr-n-p,.xr .xr-mf-h .xr-n-p{display:none}
  .xr-crumb{padding:12px var(--rl-gut)}
  .xr-hero{padding:24px 0 28px;gap:16px}
  .xr-hero-l{padding-top:0}
  .xr .xr-h1{font-size:76px}
  .xr-intro{gap:16px;margin-top:14px}
  .xr-lede{font-size:17px}
  .xr .xr-count{line-height:1.5}
  .xr-latest{min-height:0;padding:16px;gap:14px}
  .xr-latest-b{gap:8px}
  .xr-latest-b>b{font-size:22px}
  .xr-filters{padding:14px var(--rl-gut);gap:12px}
  .xr-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * var(--rl-gut));padding:0 var(--rl-gut);width:calc(100% + 2 * var(--rl-gut))}
  .xr-chips::-webkit-scrollbar{display:none}
  .xr-sp{display:none}
  .xr-selects{width:100%}
  .xr-sel{flex:1 1 0;min-width:0}
  .xr-sel select{width:100%;max-width:none}
  .xr-makers{display:none}
  .xr-body{padding-top:28px;display:block}
  .xr-rail{display:none}
  .xr-month h2{font-size:30px}
  .xr-month:not(:first-child){margin-top:24px}
  .xr-row-a{grid-template-columns:96px minmax(0,1fr);gap:12px;padding:14px 0}
  .xr-date{display:none}
  .xr-tile{width:96px;height:64px;padding:6px 8px 8px}
  .xr-tile::before{left:9px;top:10px}
  .xr-tile b{font-size:12px;line-height:1.15}
  .xr-meta{display:none}
  .xr-pm{display:block}
  .xr-t{font-size:19px;margin-top:0}
  .xr-t:lang(ja){font-size:17px}
  .xr-line{display:none}
  .xr-next{border:0;height:44px;margin-top:8px;color:var(--rl-acc)}
  .xr-next:hover{background:transparent;color:var(--rl-acc)}
  .xr-main-p{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:20px 0 32px}
  .xr-copy{display:contents}
  .xr-tags{order:1;font-size:12px;letter-spacing:.14em;gap:8px}
  .xr-h1p{order:2;font-size:28px;margin:12px 0 18px}
  .xr-sleeve{order:3;height:240px;padding:24px}
  .xr-big{font-size:min(76px,calc(600px / var(--n, 6)));margin-top:0}
  .xr-brief{order:4;font-size:17px;margin-top:22px}
  .xr-facts{order:5}
  .xr-fact{grid-template-columns:108px minmax(0,1fr);padding:9px 0}
  .xr-fact dt{font-size:12px}
  .xr-fact dd{font-size:15px}
  .xr-links{order:6}
  .xr-btn{min-height:50px;font-size:16px;padding:12px 18px}
  .xr-note{order:7;margin-top:16px}
  .xr-page .xr-cr-d a:first-child,.xr-page .xr-cr-d a:first-child+i{display:none}
  .xr-page .xr-cr-d a:nth-child(3){color:var(--rl-acc)}
  .xr-morefrom{margin-bottom:-40px;padding:28px var(--rl-gut) 32px}
  .xr-mf-h h2{font-size:24px}
  .xr-mf-h .xr-k{display:none}
  .xr-more-note{font-size:14px;margin-top:12px}
  .xr-cards{display:block;margin-top:8px}
  .xr-card{display:grid;grid-template-columns:96px minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:12px;row-gap:4px;padding:14px 0;border-bottom:1px solid var(--rl-rule)}
  .xr-tile-c{grid-row:1/3;width:96px;height:64px}
  .xr-card small.xr-k{margin-top:0}
  .xr-card-t{font-size:19px}
  .xr-sec-h h2{font-size:28px}
}
/* ---------------------------------------------------------------- Day by Day Japan: its own page shell (app/releases.py) */
:root[data-theme="dark"] .xr{--rl-acc:#FF6A5C}
.releases-page main{display:block}
.xr .xr-h1{letter-spacing:-.05em}
.xr-latest{border-radius:20px}
.xr-sleeve{border-radius:20px}
.xr-tile-c{border-radius:16px}
.xr-t:lang(ja),.xr-card-t:lang(ja){font-family:var(--jp);font-weight:700;letter-spacing:0}
.xr-crumb .xr-cr-d a:first-child{color:var(--rl-acc)}
@media (max-width:600px){.xr-tile{border-radius:10px}.xr-tile-c{border-radius:10px}.xr-sleeve{border-radius:16px}}