/* All additions are scoped. Existing site CSS and original pages are untouched. */
.ramen-draft { --ramen-paper:#fffaf0; --ramen-ink:#33281f; --ramen-line:#d6c4a9; min-width:0; }
.ramen-draft a { text-underline-offset:.22em; }
.ramen-draft :is(.ramen-prose,.ramen-intro,.ramen-toc,.ramen-source-list,.ramen-figure) a {color:var(--primary); text-decoration:underline;}
.ramen-draft :target {scroll-margin-top:24px;}
.ramen-local-nav {padding:10px 20px; border-bottom:1px solid #d6c4a9; background:#eee3d0; color:#4e3c2c; text-align:center; font-size:13px; line-height:1.7;}
.ramen-local-nav a {color:#92351f; text-decoration:underline; text-underline-offset:3px; margin-left:12px;}
.ramen-draft .ramen-heading {max-width:896px; margin:auto; padding:32px 32px 0;}
.ramen-draft .ramen-breadcrumb {display:flex; flex-wrap:wrap; gap:8px; font-size:12px; color:var(--muted-foreground); margin-bottom:30px;}
.ramen-draft .ramen-breadcrumb a:hover {color:var(--primary);}
.ramen-draft .ramen-eyebrow {display:block; color:var(--primary); font-size:12px; font-weight:700; letter-spacing:.13em;}
.ramen-draft h1 {font-family:var(--font-serif); font-size:clamp(1.9rem, 2.4vw + 1rem, 3.3rem); line-height:1.42; font-weight:600; margin:16px 0 26px; text-wrap:pretty; overflow-wrap:anywhere;}
.ramen-draft .ramen-intro {font-size:17px; line-height:1.95; color:#4f4239;}
.ramen-draft .ramen-intro p+p {margin-top:16px;}
.ramen-draft .ramen-meta {margin-top:26px; padding-top:16px; border-top:1px solid var(--border); display:flex; flex-wrap:wrap; gap:8px 24px; font-size:12px; color:var(--muted-foreground);}
.ramen-draft .ramen-reading {max-width:800px; padding:0 32px; margin:32px auto 0;}
.ramen-draft .ramen-toc {border-block:1px solid var(--border); padding:16px 0; font-size:14px;}
.ramen-draft .ramen-toc summary {cursor:pointer; font-weight:700; padding:4px 0;}
.ramen-draft .ramen-toc ol {list-style:decimal; padding:18px 0 5px 22px; columns:2; column-gap:36px;}
.ramen-draft .ramen-toc li {break-inside:avoid; margin-bottom:10px; line-height:1.7;}
.ramen-draft .ramen-figure {max-width:1024px; margin:40px auto; background:var(--ramen-paper); border:1px solid var(--ramen-line); border-radius:12px; padding:28px; color:var(--ramen-ink);}
.ramen-draft .ramen-figure figcaption {margin-bottom:24px;}
.ramen-draft .ramen-figure-title {font-family:var(--font-serif); font-size:clamp(1.4rem,2.5vw,1.9rem); font-weight:700; line-height:1.5; margin:6px 0;}
.ramen-draft .ramen-figure-subtitle {color:#665447; font-size:14px; line-height:1.8;}
.ramen-draft .ramen-figure svg {width:100%; height:auto; overflow:visible; font-family:var(--default-font-family);}
.ramen-draft .ramen-flavor-grid {display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px;}
.ramen-draft .ramen-flavor-card {border:1px solid #e5d6c0; border-radius:8px; padding:12px 10px 16px; background:#f8f0de; position:relative; text-align:center; display:flex; flex-direction:column; align-items:center;}
.ramen-draft .ramen-card-number {align-self:flex-start; font:600 13px var(--font-mono); color:#965335;}
.ramen-draft .ramen-flavor-card svg {height:134px; margin:-4px 0 3px;}
.ramen-draft .ramen-card-title {font-size:18px; font-weight:700; line-height:1.6;}
.ramen-draft .ramen-flavor-card .ramen-card-title {margin-top:auto; font-size:16px;}
.ramen-draft .ramen-flavor-card p:not(.ramen-card-title) {font-size:12px; line-height:1.8; color:#70533d; margin-top:3px;}
.ramen-draft .ramen-flavor-card small {font-size:10px; line-height:1.7; margin-bottom:8px;}
.ramen-draft .ramen-mini-labels {display:flex; justify-content:space-around; width:100%; font-size:11px; font-weight:600; margin:0 0 8px;}
.ramen-draft .ramen-key-note {text-align:center; padding:15px 12px; margin-top:20px; background:#eee4cc; border-radius:6px; font-weight:700; font-size:15px; line-height:1.8;}
.ramen-draft .ramen-figure-note {font-size:12px; color:#6e5948; line-height:1.8; margin:16px 0 0;}
.ramen-draft .ramen-anatomy-mobile {display:none;}
.ramen-draft .ramen-adjustments {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-block:1px solid #dccbb3; padding:18px 0; gap:16px;}
.ramen-draft .ramen-adjustments>div {display:grid; grid-template-columns:30px 1fr; column-gap:8px; align-items:center;}
.ramen-draft .ramen-adjustments strong {font-size:16px;}
.ramen-draft .ramen-adjustments span:last-child {grid-column:2; font-size:12px; color:#70533d;}
.ramen-draft .ramen-adjust-mark {font:12px var(--font-mono); color:#a4361a; border:1px solid #c3a783; border-radius:50%; width:28px; height:28px; display:grid; place-items:center; grid-row:span 2;}
.ramen-draft .ramen-shop-bowl {max-width:265px; margin:0 auto 10px;}
.ramen-draft .ramen-shop-grid,.ramen-draft .ramen-comparison-grid {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px;}
.ramen-draft .ramen-shop-card {text-align:center; padding:20px; background:#f8f0de; border:1px solid #dccbb3; border-radius:8px;}
.ramen-draft .ramen-icon {max-width:105px; margin:0 auto 10px;}
.ramen-draft .ramen-shop-card small {font-size:11px; letter-spacing:.12em; color:#8b5033;}
.ramen-draft .ramen-shop-card>p:last-child {font-size:15px; margin-top:12px;}
.ramen-draft .ramen-ticket-flow {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px; margin-top:25px;}
.ramen-draft .ramen-ticket-flow .ramen-icon {width:60px; margin:0;}
.ramen-draft .ramen-ticket-flow>span {font-size:28px; color:#986649;}
.ramen-draft .ramen-comparison-card {padding:16px; text-align:center; background:#f8f0de; border:1px solid #dccbb3; border-radius:8px;}
.ramen-draft .ramen-comparison-card>p:not(.ramen-card-title) {font-size:15px; line-height:1.8;}
.ramen-draft .ramen-comparison-card>.ramen-card-title {font-size:24px;}
.ramen-draft .ramen-ingredient-detail {margin-top:20px; padding-top:14px; border-top:1px solid #dccbb3;}
.ramen-draft .ramen-ingredient-detail svg {max-width:200px; height:90px; margin:0 auto;}
.ramen-draft .ramen-ingredient-detail p {font-size:14px; font-weight:600;}
.ramen-draft .ramen-steps {display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:26px; list-style:none;}
.ramen-draft .ramen-steps li {position:relative; padding:16px; background:#f8f0de; border:1px solid #dccbb3; border-radius:8px; display:flex; flex-direction:column; align-items:flex-start;}
.ramen-draft .ramen-steps li:not(:last-child):after {content:'→'; position:absolute; right:-24px; top:42%; font-size:23px; color:#9c5736;}
.ramen-draft .ramen-step-number {font:600 20px var(--font-serif); color:#a4361a;}
.ramen-draft .ramen-steps .ramen-card-title {font-size:17px; margin:8px 0;}
.ramen-draft .ramen-steps p:not(.ramen-card-title) {font-size:13px; line-height:1.8; margin-bottom:16px;}
.ramen-draft .ramen-timing {display:block; margin-top:auto; border-top:1px solid #d8c4a3; padding-top:10px; font-size:12px; color:#7c432a; font-weight:700;}
.ramen-draft .ramen-step-context {font-size:13px; line-height:1.9; margin-top:14px;}
.ramen-draft :is(.ramen-step-context,.ramen-key-note) a {white-space:nowrap;}
.ramen-draft .ramen-prose {font-size:17px; line-height:1.95; overflow-wrap:anywhere;}
.ramen-draft .ramen-prose p {margin:20px 0;}
.ramen-draft .ramen-prose h2 {font-family:var(--font-serif); font-size:clamp(1.4rem,1.8vw,1.9rem); font-weight:700; line-height:1.6; margin:50px 0 20px; padding-top:8px;}
.ramen-draft .ramen-prose h3 {font-family:var(--font-serif); font-size:1.3rem; line-height:1.6; margin:32px 0 16px; font-weight:700;}
.ramen-draft .ramen-prose strong {font-weight:700;}
.ramen-draft .ramen-prose ul {list-style:disc; padding-left:1.5em;}
.ramen-draft .ramen-ref {margin-left:4px; font-size:11px; font-weight:700; white-space:nowrap;}
.ramen-draft .ramen-table {overflow-x:auto; border:1px solid var(--border); margin:24px 0; border-radius:6px;}
.ramen-draft table {border-collapse:collapse; width:100%; font-size:15px; min-width:580px; line-height:1.8;}
.ramen-draft th,.ramen-draft td {padding:14px; border-bottom:1px solid var(--border); border-right:1px solid var(--border); text-align:left; vertical-align:top;}
.ramen-draft th {background:#ede3d1; font-weight:700;}
.ramen-draft tbody tr:nth-child(even) {background:#fdf8ed;}
.ramen-draft tr:last-child td {border-bottom:0;}
.ramen-draft td:first-child {font-weight:600; width:24%;}
.ramen-draft th:last-child,.ramen-draft td:last-child {border-right:0;}
.ramen-draft .ramen-table-hint {font-size:12px; color:var(--muted-foreground);}
.ramen-draft .ramen-sources {border-top:1px solid var(--border); margin-top:44px; padding-top:20px;}
.ramen-draft .ramen-sources h2,.ramen-draft .ramen-related h2 {font-family:var(--font-serif); font-size:26px; font-weight:700; margin:12px 0;}
.ramen-draft .ramen-sources p {font-size:13px; line-height:1.85; margin:10px 0;}
.ramen-draft .ramen-source-list {list-style:none; margin-top:20px;}
.ramen-draft .ramen-source-list li {font-size:13px; line-height:1.9; padding:12px 0; border-bottom:1px solid #e2d8c6; overflow-wrap:anywhere;}
.ramen-draft .ramen-source-id {font-family:var(--font-mono); font-weight:700; margin-right:10px;}
.ramen-draft .ramen-source-back {display:inline-block; white-space:nowrap; padding:4px 0; margin-left:10px; font-size:12px;}
.ramen-draft .ramen-nowrap {white-space:nowrap;}
.ramen-draft .ramen-verification {background:#eee5d5; border-left:3px solid #ae7c4b; padding:12px 16px;}
.ramen-draft .ramen-related {max-width:1024px; padding:36px 0 0; margin:45px auto 0; border-top:1px solid var(--border);}
.ramen-draft .ramen-related ul {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:22px;}
.ramen-draft .ramen-related a {display:block; padding:18px 0; border-top:2px solid var(--primary); line-height:1.7; font-family:var(--font-serif); font-weight:700;}
.ramen-draft .ramen-related a:hover {color:var(--primary);}
.ramen-draft .ramen-related small {display:block; font:12px var(--default-font-family); color:var(--primary); margin-bottom:8px;}
.ramen-draft .ramen-series-list {list-style:none; max-width:1024px; margin:40px auto; padding:0 32px;}
.ramen-draft .ramen-series-list li {border-top:1px solid var(--border); padding:26px 0;}
.ramen-draft .ramen-series-list a {display:grid; grid-template-columns:44px 160px minmax(0,1fr); gap:20px; align-items:center;}
.ramen-draft .ramen-series-list .ramen-series-no {font:32px var(--font-serif); color:var(--primary);}
.ramen-draft .ramen-series-list h2 {font:600 clamp(1.15rem,1.7vw,1.5rem)/1.6 var(--font-serif); margin-bottom:8px;}
.ramen-draft .ramen-series-list p {font-size:15px; line-height:1.85; color:var(--muted-foreground);}
.ramen-draft .ramen-series-list a:hover h2 {color:var(--primary);}
.ramen-draft .ramen-heading.ramen-series-hero {max-width:1200px; display:grid; grid-template-columns:.95fr 1.2fr; align-items:center; gap:24px 36px;}
.ramen-draft .ramen-series-hero>.ramen-breadcrumb {grid-column:1 / -1; margin-bottom:0;}
.ramen-draft .ramen-series-hero h1 {font-size:clamp(30px,3.1vw,42px); line-height:1.55;}
.ramen-draft .ramen-series-hero .ramen-intro {font-size:15px;}
.ramen-draft .ramen-series-cover {margin:0; min-width:0;}
.ramen-draft .ramen-series-cover img {display:block; width:100%; height:auto; border-radius:9px; border:1px solid #e0c9a5;}
.ramen-draft .ramen-series-cover figcaption {font-size:11px; line-height:1.8; color:#75604c; margin-top:10px;}
.ramen-draft .ramen-series-thumbnail {display:block; width:160px; background:#f6ecd7; border-radius:8px;}
.ramen-draft .ramen-series-thumbnail svg {width:100%; height:auto;}
.ramen-draft .ramen-section {display:flow-root;}
.ramen-draft .ramen-section-illustration {float:right; width:238px; max-width:40%; margin:0 0 22px 30px; padding:8px 12px 14px; border-bottom:1px solid #dbc6a5; background:linear-gradient(145deg,#fbf4e5,#f3e8d1); border-radius:8px;}
.ramen-draft .ramen-section-illustration svg {width:100%; height:auto; display:block; font-family:var(--default-font-family);}
.ramen-draft .ramen-section-illustration figcaption {font-size:12px; line-height:1.8; color:#61462f; text-align:center; margin-top:8px;}
.ramen-draft .ramen-section-illustration figcaption small {display:block; font-size:10px; color:#796550; margin-top:6px;}
.ramen-draft .ramen-section-tags {display:flex; justify-content:space-around; gap:5px; font-size:11px; font-weight:600; line-height:1.7; color:#6e462a; text-align:center;}
.ramen-draft .ramen-section-tags span {flex:1;}
.ramen-draft .ramen-section-has-table .ramen-section-illustration {float:none; width:280px; max-width:100%; margin:0 auto 24px;}
.ramen-draft .ramen-section .ramen-table-hint {clear:both;}
.ramen-draft .ramen-review-link {font-size:13px; text-align:right; margin:12px auto; max-width:1024px;}
.ramen-draft .ramen-review-link a {text-decoration:underline; color:var(--primary);}
.ramen-promo {max-width:1200px; margin:32px auto; border:1px solid #cbbfb0; border-left:4px solid #a4361a; background:#fefbf6; padding:24px;}
.ramen-promo .ramen-promo-kicker {font-size:12px; color:#a4361a; font-weight:700;}
.ramen-promo h2 {font:600 24px/1.6 var(--font-serif); margin:5px 0 8px;}
.ramen-promo p {font-size:14px; line-height:1.8;}
.ramen-promo a {display:block; width:fit-content; margin-top:8px; padding:6px 0; color:#a4361a; text-decoration:underline; text-underline-offset:3px;}
@media(max-width:1080px) {.ramen-draft .ramen-figure,.ramen-draft .ramen-related,.ramen-draft .ramen-review-link {margin-left:24px; margin-right:24px;} .ramen-promo {margin-inline:24px;}}
@media(max-width:700px) {
 .ramen-draft .ramen-heading {padding:24px 20px 0;}
 .ramen-draft .ramen-breadcrumb {margin-bottom:22px;}
 .ramen-draft h1 {font-size:30px; line-height:1.5; margin-top:13px;}
 .ramen-draft .ramen-intro,.ramen-draft .ramen-prose {font-size:16px; line-height:1.95;}
 .ramen-draft .ramen-reading {padding:0 20px; margin-top:25px;}
 .ramen-draft .ramen-toc ol {columns:1;}
 .ramen-draft .ramen-figure {margin:30px 12px; padding:20px 14px;}
 .ramen-draft .ramen-figure figcaption {margin-bottom:18px;}
 .ramen-draft .ramen-figure-title {font-size:24px;}
 .ramen-draft .ramen-flavor-grid {grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;}
 .ramen-draft .ramen-flavor-card {padding:10px 8px 14px;}
 .ramen-draft .ramen-flavor-card svg {height:106px;}
 .ramen-draft .ramen-flavor-card .ramen-card-title {font-size:15px;}
 .ramen-draft .ramen-anatomy-wide {display:none;}
 .ramen-draft .ramen-anatomy-mobile {display:block;}
 .ramen-draft .ramen-adjustments {grid-template-columns:1fr; padding-left:18px;}
 .ramen-draft .ramen-shop-grid,.ramen-draft .ramen-comparison-grid {grid-template-columns:1fr; gap:16px;}
 .ramen-draft .ramen-shop-card {display:grid; grid-template-columns:84px 1fr; text-align:left; column-gap:14px; padding:16px;}
 .ramen-draft .ramen-shop-card .ramen-icon {grid-row:span 3; margin:0; align-self:center;}
 .ramen-draft .ramen-shop-card>p:last-child {margin-top:7px; font-size:14px;}
 .ramen-draft .ramen-ticket-flow {gap:7px;}
 .ramen-draft .ramen-ticket-flow .ramen-icon {width:35px;}
 .ramen-draft .ramen-ticket-flow strong {font-size:14px;}
 .ramen-draft .ramen-steps {grid-template-columns:1fr; gap:27px;}
 .ramen-draft .ramen-steps li {display:grid; grid-template-columns:80px 1fr; column-gap:14px; padding:15px;}
 .ramen-draft .ramen-step-number {grid-column:1;}
 .ramen-draft .ramen-steps .ramen-icon {grid-column:1; grid-row:2 / span 3; align-self:center;}
 .ramen-draft .ramen-steps .ramen-card-title {grid-column:2; grid-row:1 / span 2; font-size:18px; margin:0 0 8px;}
 .ramen-draft .ramen-steps p:not(.ramen-card-title) {grid-column:2; font-size:14px;}
 .ramen-draft .ramen-timing {grid-column:2;}
 .ramen-draft .ramen-steps li:not(:last-child):after {content:'↓'; right:auto; left:48%; top:auto; bottom:-29px; font-size:24px;}
 .ramen-draft .ramen-prose h2 {font-size:23px; margin-top:38px;}
 .ramen-draft .ramen-related {margin-inline:20px; padding-top:24px;}
 .ramen-draft .ramen-related ul {grid-template-columns:1fr; gap:6px;}
 .ramen-draft .ramen-related a {font-size:18px;}
 .ramen-draft .ramen-series-list {padding:0 20px;}
 .ramen-draft .ramen-series-list a {grid-template-columns:30px 90px minmax(0,1fr); gap:12px; align-items:start;}
 .ramen-draft .ramen-series-list .ramen-series-no {font-size:25px;}
 .ramen-draft .ramen-series-thumbnail {width:90px;}
 .ramen-draft .ramen-series-summary {display:contents;}
 .ramen-draft .ramen-series-summary h2 {grid-column:3; font-size:17px; line-height:1.6; margin-bottom:0;}
 .ramen-draft .ramen-series-summary p {grid-column:2 / -1; font-size:14px;}
 .ramen-draft .ramen-heading.ramen-series-hero {grid-template-columns:1fr; gap:16px;}
 .ramen-draft .ramen-series-copy {display:contents;}
 .ramen-draft .ramen-series-hero>.ramen-breadcrumb {order:0; margin:0 0 6px;}
 .ramen-draft .ramen-series-hero .ramen-eyebrow {order:1;}
 .ramen-draft .ramen-series-hero h1 {order:2; font-size:31px; margin:0;}
 .ramen-draft .ramen-series-cover {order:3;}
 .ramen-draft .ramen-series-hero .ramen-intro {order:4;}
 .ramen-draft .ramen-section-illustration,.ramen-draft .ramen-section-has-table .ramen-section-illustration {float:none; width:100%; max-width:100%; margin:0 0 22px; padding:10px 16px 16px;}
 .ramen-draft .ramen-section-illustration svg {max-width:260px; max-height:182px; margin:0 auto;}
 .ramen-draft .ramen-section-illustration figcaption {font-size:13px;}
 .ramen-draft .ramen-section-tags {max-width:280px; margin:0 auto; font-size:12px;}
 .ramen-promo {margin-inline:20px; padding:18px;}
}