/* Shared look for every page: tokens, navigation, buttons. */
:root{
 --ink:#1b1c19;
 --muted:#5b5d56;
 --cream:#f1ebdf;
 --paper:#f8f5ee;
 --line:rgba(27,28,25,.14);
 --blue:#1442c4;
 --blue-deep:#0b2f97;
 --gold:#b98a32;
 --serif:"Noto Serif JP","Hiragino Mincho ProN",serif;
 --latin:"Cormorant Garamond","Noto Serif JP",serif;
 --sans:Inter,"Hiragino Kaku Gothic ProN",sans-serif;
 --gutter:clamp(20px,5vw,72px);
 --nav-h:72px;
 --grain:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
html{scroll-padding-top:var(--nav-h)}
/* Smooth scrolling only after load, so opening a page at an anchor jumps straight there. */
html.smooth{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html,html.smooth{scroll-behavior:auto}}
body.site{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
body.site *,body.site *::before,body.site *::after{box-sizing:border-box}

.skip{position:fixed;left:12px;top:-60px;z-index:200;padding:10px 16px;background:var(--ink);color:var(--paper);border-radius:999px;text-decoration:none;font-size:.875rem}
.skip:focus{top:12px}

/* Navigation: white over dark scenes, ink on paper. */
.site-nav{position:fixed;inset:0 0 auto;z-index:120;height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 var(--gutter);padding-top:env(safe-area-inset-top,0px);color:#fff;transition:color .4s ease,background-color .4s ease,backdrop-filter .4s ease,box-shadow .4s ease}
.site-nav[data-theme="light"]{color:var(--ink)}
.site-nav[data-solid]{backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2)}
.site-nav[data-solid="light"]{background:rgba(248,245,238,.82);box-shadow:0 1px 0 var(--line);color:var(--ink)}
.site-nav[data-solid="dark"]{background:rgba(8,22,78,.45);box-shadow:0 1px 0 rgba(255,255,255,.12);color:#fff}
.site-brand{font-family:var(--serif);font-weight:300;font-size:1.375rem;letter-spacing:.24em;color:inherit;text-decoration:none;display:inline-flex;align-items:center;min-height:44px;white-space:nowrap}
.site-links li{margin:0;padding:0}
.site-links{font-size:1rem;display:flex;align-items:center;gap:clamp(14px,2.4vw,36px);list-style:none;margin:0;padding:0}
.site-links a{position:relative;display:inline-flex;align-items:center;min-height:44px;color:inherit;text-decoration:none;font-size:.875rem;letter-spacing:.06em}
.site-links a::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.site-links a:hover::after,.site-links a[aria-current="true"]::after{transform:scaleX(1);transform-origin:left}
.site-links .site-links-en{display:none}
.menu-toggle{display:none;appearance:none;border:1px solid currentColor;background:transparent;color:inherit;border-radius:999px;min-height:44px;min-width:44px;padding:0 18px;font:inherit;font-family:var(--latin);font-style:italic;font-size:1.0625rem;cursor:pointer}
.site-nav a:focus-visible,.menu-toggle:focus-visible{outline:2px solid currentColor;outline-offset:4px}

@media(max-width:860px){
 :root{--nav-h:64px}
 .menu-toggle{display:inline-flex;align-items:center;position:relative;z-index:2}
 .site-brand{position:relative;z-index:2}
 .site-nav > nav{position:absolute;width:0;height:0}
 .site-links{position:fixed;inset:0;z-index:1;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;padding:96px var(--gutter) 48px;background:linear-gradient(170deg,#0b2f97,#1442c4 70%,#2559d6);color:#fff;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s linear .35s}
 .site-nav.menu-open .site-links{opacity:1;visibility:visible;transition:opacity .35s ease}
 .site-nav.menu-open{color:#fff;background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
 .site-links a{font-family:var(--serif);font-weight:200;font-size:clamp(1.75rem,8vw,2.5rem);letter-spacing:.06em;min-height:60px;gap:14px}
 .site-links .site-links-en{display:inline;font-family:var(--latin);font-style:italic;font-weight:300;font-size:1rem;opacity:.7}
 .site-links a::after{bottom:10px}
}
body.menu-locked{overflow:hidden}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:14px;min-height:48px;padding:12px 24px;border-radius:999px;text-decoration:none;font-size:.9375rem;letter-spacing:.04em;transition:background .35s ease,color .35s ease,border-color .35s ease,transform .35s ease}
.btn span{transition:transform .35s ease}
.btn:hover span{transform:translateX(4px)}
.btn-light{background:rgba(255,255,255,.92);color:var(--ink)}
.btn-light:hover{background:#fff}
.btn-dark{background:var(--ink);color:var(--paper)}
.btn-dark:hover{background:var(--blue)}
.btn:focus-visible{outline:2px solid currentColor;outline-offset:4px}

/* Shared headings */
.site .eyebrow{font-family:var(--latin);font-style:italic;font-weight:400;font-size:1.0625rem;letter-spacing:.04em;margin:0 0 18px;opacity:.9}
.site .section-title{font-family:var(--serif);font-weight:200;font-size:clamp(2.5rem,6vw,5rem);line-height:1.2;letter-spacing:.04em;margin:0}
.site .section-title em{display:block;font-family:var(--latin);font-style:italic;font-weight:300;font-size:.42em;letter-spacing:.01em;margin-top:.5em;opacity:.75}
.site .copy{font-family:var(--serif);font-size:1.0625rem;line-height:2.05;color:#45473f}

[class*="ph-"]{--ph:var(--ph-img,none) center/cover no-repeat,var(--ph-grad)}
/* Scenes further down fetch their art only when they come close (see site.js). */
.js .scene:not(.scene-hero):not(.near) .scene-media{--ph-img:none}
/* Placeholder art, shown until the matching file in images/ exists: a painted
   stand-in from images/placeholder/, over a gradient while it loads. */
.scene-media.is-placeholder::after,.cover.is-placeholder::after{content:"";position:absolute;inset:0;background:radial-gradient(rgba(255,255,255,.22) 1px,transparent 1.6px) 0 0/7px 7px;mix-blend-mode:soft-light}
.ph-hero{--ph-img:url("images/placeholder/hero.jpg");--ph-grad:radial-gradient(circle at 74% 30%,rgba(255,236,190,.95) 0 6%,rgba(255,230,180,.35) 16%,transparent 34%),radial-gradient(ellipse 34% 9% at 24% 62%,rgba(255,255,255,.92),transparent 72%),radial-gradient(ellipse 22% 7% at 36% 58%,rgba(255,255,255,.8),transparent 72%),radial-gradient(ellipse 30% 8% at 78% 76%,rgba(255,255,255,.75),transparent 72%),linear-gradient(180deg,#0f3fbf 0%,#2f6ad8 38%,#86aee9 72%,#efe4cf 100%)}
.ph-think,.ph-philosophy{--ph-img:url("images/placeholder/think.jpg");--ph-grad:radial-gradient(circle at 68% 42%,#f6dc96 0 5%,#c99a3e 10%,rgba(185,138,50,.0) 22%),radial-gradient(ellipse 26% 8% at 22% 80%,rgba(255,255,255,.85),transparent 72%),linear-gradient(165deg,#081f6e 0%,#1442c4 55%,#4f86e0 100%)}
.ph-body,.ph-making{--ph-img:url("images/placeholder/body.jpg");--ph-grad:radial-gradient(circle at 34% 56%,rgba(185,138,50,.65) 0 9%,rgba(185,138,50,.2) 20%,transparent 32%),radial-gradient(circle at 34% 56%,transparent 0 24%,rgba(120,84,36,.18) 24.3% 24.8%,transparent 25.2%),linear-gradient(135deg,#f4ddc2 0%,#e8c6a1 50%,#f7eadb 100%)}
.ph-food{--ph-img:url("images/placeholder/food.jpg");--ph-grad:radial-gradient(ellipse 4% 6% at 22% 30%,#d9ae4c 60%,transparent 64%),radial-gradient(ellipse 3.5% 5.5% at 72% 24%,#c99a3e 60%,transparent 64%),radial-gradient(ellipse 4% 6% at 58% 64%,#e0b75a 60%,transparent 64%),radial-gradient(ellipse 3% 4.5% at 86% 70%,#c39438 60%,transparent 64%),radial-gradient(ellipse 3% 5% at 12% 76%,#b98a32 60%,transparent 64%),radial-gradient(ellipse 60% 40% at 50% 50%,#2c63d6 0,transparent 70%),linear-gradient(160deg,#1d2716 0%,#384a26 45%,#1c2a15 100%)}
.ph-about,.ph-books{--ph-img:url("images/placeholder/about.jpg");--ph-grad:radial-gradient(circle at 70% 38%,rgba(255,240,205,.9) 0 7%,transparent 30%),linear-gradient(180deg,#d9e4f3 0%,#efe8da 60%,#e7dcc8 100%)}


/* ---------- Site information: footer links, notes, author ---------- */
.footer-links{display:flex;flex-wrap:wrap;gap:4px 22px}
.footer-links a{display:inline-flex;align-items:center;min-height:44px;color:inherit;text-underline-offset:4px;font-size:.8125rem;letter-spacing:.06em}
.footer-note{flex-basis:100%;margin:8px 0 0;font-size:.75rem;line-height:1.8}
.mini-footer{display:flex;flex-direction:column;align-items:center;gap:8px;padding:48px 20px calc(48px + env(safe-area-inset-bottom,0px));text-align:center;color:#5b5d56;font-family:Inter,"Hiragino Kaku Gothic ProN",sans-serif}
.mini-footer .footer-links{justify-content:center}
.mini-footer-copy{margin:0;font-size:.75rem;letter-spacing:.16em}
.article-note{margin:56px 0 0;padding:22px 24px;border-left:3px solid var(--gold);background:#fff;font-family:"Noto Serif JP",serif}
.article-note p{margin:0;font-size:.9375rem;line-height:1.95}
.article-note .article-note-title{font-family:Inter,sans-serif;font-size:.75rem;letter-spacing:.14em;color:#5b5d56;margin-bottom:8px}
.article-pr{margin:32px 0 0;font-size:.8125rem;line-height:1.9;color:#5b5d56}
.pr-label{display:inline-block;margin-left:8px;padding:0 6px;border:1px solid currentColor;border-radius:3px;font-size:.6875rem;line-height:1.6;letter-spacing:.06em;vertical-align:middle;opacity:.8}
.ad-slot{margin:48px 0 0;padding-top:16px;border-top:1px solid var(--line)}
.ad-label{margin:0 0 8px;font-size:.6875rem;letter-spacing:.14em;color:#5b5d56}
.author-box{display:grid;grid-template-columns:64px minmax(0,1fr);gap:20px;margin:56px 0 0;padding:28px;background:#fff;border:1px solid var(--line)}
.author-mark{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--blue);color:var(--paper);font-family:"Noto Serif JP",serif;font-size:1.625rem}
.author-box p{margin:0}
.author-label{font-size:.75rem;letter-spacing:.14em;color:#5b5d56;font-family:Inter,sans-serif}
.author-name{font-family:"Noto Serif JP",serif;font-size:1.25rem;margin:4px 0 10px!important}
.author-bio{font-family:"Noto Serif JP",serif;font-size:.9375rem!important;line-height:1.95!important}
.author-links{display:flex;flex-wrap:wrap;gap:0 18px;margin-top:8px!important}
.author-links a{display:inline-flex;align-items:center;min-height:44px;font-size:.875rem;color:var(--blue);text-underline-offset:4px}
.author-dates{font-size:.75rem;color:#5b5d56;letter-spacing:.06em;font-family:Inter,sans-serif}
@media(max-width:600px){.author-box{grid-template-columns:1fr;padding:22px}.author-mark{width:52px;height:52px;font-size:1.375rem}}

/* ---------- Document pages (operator, privacy, contact, 404) ---------- */
.doc-cover{height:clamp(240px,40vh,380px);background:var(--img,none) center/cover no-repeat,var(--ph)}
.doc{position:relative;width:min(840px,100%);margin:calc(-1 * clamp(80px,14vh,140px)) auto 0;padding:clamp(32px,6vw,72px) clamp(22px,6vw,72px) clamp(48px,7vw,80px);background:var(--paper);box-shadow:0 -40px 90px rgba(10,20,60,.12)}
.doc-title{font-family:var(--serif);font-weight:200;font-size:clamp(1.625rem,6.2vw,3rem);line-height:1.45;letter-spacing:.04em;margin:0 0 32px}
.doc h2{font-family:var(--serif);font-weight:300;font-size:clamp(1.25rem,2.4vw,1.5rem);line-height:1.6;margin:48px 0 14px;padding-top:24px;border-top:1px solid var(--line)}
.doc p,.doc li{font-family:var(--serif);font-size:1rem;line-height:2.05;color:#2c2d29}
.doc p{margin:0 0 16px}
.doc ul{padding-left:1.3em;margin:0 0 16px}
.doc li{margin:6px 0}
.doc a{color:var(--blue);text-underline-offset:4px}
.doc-table{margin:0;border-top:1px solid var(--line)}
.doc-table div{display:grid;grid-template-columns:8em minmax(0,1fr);gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
.doc-table dt{font-size:.875rem;color:#5b5d56}
.doc-table dd{margin:0;font-family:var(--serif)}
.doc-date{margin-top:40px!important;font-size:.875rem!important;color:#5b5d56!important}
.doc-small{font-size:.875rem!important;color:#5b5d56!important}
.contact-list{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0}
.btn-outline{border:1px solid rgba(27,28,25,.3);color:var(--ink)}
.btn-outline:hover{border-color:var(--ink)}
.doc .btn{color:inherit;text-decoration:none}
.doc .btn-dark{color:var(--paper)}
@media(max-width:600px){.doc-table div{grid-template-columns:1fr;gap:4px}}

/* Project cards that link out */
.card-link{text-decoration:none;color:#fff;transition:background .35s,transform .5s cubic-bezier(.2,.7,.2,1)}
.card-link:hover{background:rgba(20,66,196,.45);transform:translateY(-4px)}
.card-link:focus-visible{outline:2px solid #fff;outline-offset:4px}
.card-more{margin-top:14px;font-family:var(--latin);font-size:1.0625rem}

/* Japanese headings break only between phrases: the build marks phrase
   boundaries with <wbr>, and keep-all stops breaks anywhere else. */
h1,h2,h3,.journal-title,.topic-title,.reading-card{word-break:keep-all;overflow-wrap:anywhere;text-wrap:pretty}
.lede,.scene-text,.site .copy,.newsletter-text{word-break:keep-all;overflow-wrap:anywhere}

/* ---------- Topic pages ---------- */
.doc.topic{width:min(980px,100%)}
.topic-count{font-size:.875rem!important;color:#5b5d56!important;letter-spacing:.06em}
.topic-list{margin:24px 0 40px;border-top:1px solid var(--line)}
.doc .topic-item{color:var(--ink);text-decoration:none}
.topic-item{display:grid;grid-template-columns:110px minmax(0,1fr);gap:6px 28px;padding:26px 0;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none}
.topic-item:hover .topic-title{color:var(--blue)}
.topic-item:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
.topic-date{grid-row:1/span 3;font-family:var(--latin);font-size:1.0625rem;color:#5b5d56;padding-top:4px}
.topic-title{font-family:var(--serif);font-weight:300;font-size:clamp(1.25rem,2.2vw,1.625rem);line-height:1.6;transition:color .3s}
.topic-excerpt{font-family:var(--serif);font-size:1rem;line-height:1.9;color:#45473f}
.topic-time{font-size:.75rem;color:#5b5d56;letter-spacing:.06em}
.topic-others{display:flex;flex-wrap:wrap;gap:4px 22px;margin:0 0 8px}
.topic-others a{display:inline-flex;align-items:center;min-height:44px;color:var(--blue);text-underline-offset:4px}
@media(max-width:600px){.topic-item{grid-template-columns:1fr}.topic-date{grid-row:auto;padding:0;font-size:1rem}}
.topic-links{display:flex;flex-wrap:wrap;align-items:center;gap:4px 22px;margin:0 0 8px;font-size:.875rem}
.topic-links > span{color:var(--muted);letter-spacing:.06em}
.topic-links a{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--ink);text-underline-offset:4px}
.topic-links a:hover{color:var(--blue)}
.section-more{margin:-24px 0 32px}
.section-more a{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:#fff;text-underline-offset:4px;font-size:.9375rem}
.reading-returns{display:flex;flex-wrap:wrap;gap:0 24px;margin:24px 0 0}
.reading-returns .reading-return{margin-top:0}

/* ---------- Newsletter ---------- */
.newsletter{margin:56px 0 0;padding:clamp(26px,4vw,40px);background:linear-gradient(160deg,#0b2f97,#1442c4 70%,#2559d6);color:#fff;font-family:Inter,"Hiragino Kaku Gothic ProN",sans-serif}
.newsletter p{margin:0}
.newsletter-eyebrow{font-family:var(--latin);font-style:italic;font-size:1.0625rem;opacity:.85}
.newsletter-title{font-family:var(--serif);font-weight:300;font-size:clamp(1.375rem,2.6vw,1.875rem);line-height:1.5;margin:8px 0 10px;color:#fff;border:0;padding:0}
.newsletter-text{font-family:var(--serif);font-size:1rem!important;line-height:1.9!important;color:rgba(255,255,255,.88)!important}
.newsletter-form{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 12px}
.newsletter-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.newsletter-form input[type=email]{flex:1 1 240px;min-height:48px;padding:10px 16px;border:1px solid rgba(255,255,255,.5);border-radius:999px;background:rgba(255,255,255,.12);color:#fff;font:inherit;font-size:1rem}
.newsletter-form input[type=email]::placeholder{color:rgba(255,255,255,.65)}
.newsletter-form button{min-height:48px;padding:0 26px;border:0;border-radius:999px;background:#fff;color:var(--ink);font:inherit;font-size:.9375rem;cursor:pointer}
.newsletter-form button:hover{background:var(--paper)}
.newsletter-form input:focus-visible,.newsletter-form button:focus-visible{outline:2px solid #fff;outline-offset:3px}
.newsletter-note{font-size:.75rem!important;line-height:1.8!important;color:rgba(255,255,255,.75)!important}
.newsletter-note a{color:#fff!important}
.home-newsletter .newsletter{margin:0}

/* ---------- Motion polish (skipped entirely with reduced motion) ---------- */
@media (prefers-reduced-motion: no-preference) {
 /* Pages fade into each other where the browser supports cross-document view transitions. */
 @view-transition { navigation: auto; }
 ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .45s; animation-timing-function: cubic-bezier(.2,.7,.2,1); }
 .site-nav { view-transition-name: site-nav; }

 /* Lists and cards rise in as they scroll into view (see site.js). */
 .js [data-rise]:not(.risen) { opacity: 0; translate: 0 24px; }
 .js [data-rise].risen { transition: opacity .8s cubic-bezier(.2,.7,.2,1) calc(var(--rise-i, 0) * 70ms), translate .8s cubic-bezier(.2,.7,.2,1) calc(var(--rise-i, 0) * 70ms), background .4s, transform .6s cubic-bezier(.2,.7,.2,1); }

 /* The article cover drifts slightly as the page scrolls. */
 @supports (animation-timeline: scroll()) {
  .cover, .doc-cover { animation: cover-drift linear both; animation-timeline: scroll(root); animation-range: 0 80vh; }
  @keyframes cover-drift { from { background-position: center 50%; } to { background-position: center 70%; } }
 }
}

@media print { [data-rise] { opacity: 1 !important; translate: none !important; } }
.links h2 + .topic-list{border-top:0}
.pr-notice{margin:0 0 20px!important;font-family:Inter,"Hiragino Kaku Gothic ProN",sans-serif!important;font-size:.75rem!important;line-height:1.8!important;letter-spacing:.04em;color:#5b5d56!important;opacity:1!important}
.pr-notice a{color:inherit!important;text-underline-offset:3px}

/* MAKING (making.html, making-*.html): project cards + dated log. Data: _data/projects.json, _data/makingLog.json */
/* MAKING: project status cards + dated log. Data lives in _data/projects.json and _data/makingLog.json. */
.making { display:grid; grid-template-columns:minmax(0,1fr); }
.making > * { min-width:0; }
.making .mk-eyebrow { font-family:Inter,sans-serif; font-size:.75rem; line-height:1.8; letter-spacing:.1em; color:#53584f; margin:0 0 10px; }
.making h2,.making h3 { font-family:"Noto Serif JP",serif; font-weight:400; color:var(--ink); }
.making h2 { font-size:clamp(1.25rem,2.5vw,1.6rem); line-height:1.8; margin:0 0 20px; }
.making h3 { font-size:1.25rem; line-height:1.7; margin:12px 0 8px; }
.making p,.making li,.making dd { font-size:1rem; line-height:1.95; color:#444740; overflow-wrap:anywhere; }
.making p { margin:0 0 16px; }
.mk-head { padding:0 0 28px; border-bottom:1px solid var(--line); }
.mk-section { padding:32px 0; border-top:1px solid var(--line); }
.mk-section:first-of-type { border-top:0; }
.mk-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.mk-card { min-width:0; padding:24px; border:1px solid var(--line); border-radius:8px; background:rgba(255,255,255,.42); scroll-margin-top:96px; }
.mk-top { display:flex; flex-wrap:wrap; gap:8px 12px; justify-content:space-between; align-items:center; font-size:.6875rem; line-height:1.7; color:#53584f; }
.mk-state { padding:3px 9px; border-radius:99px; background:#e5eae1; color:#344b3d; }
.making .mk-lead { font-family:"Noto Serif JP",serif; color:#252724; }
.mk-card dl { margin:0; padding-top:14px; border-top:1px solid var(--line); }
.mk-card dt { font-size:.75rem; color:#53584f; margin:0 0 4px; }
.mk-card dd { margin:0 0 12px; }
.mk-card ul { margin:0; padding-left:1.2em; }
.mk-log { list-style:none; margin:0; padding:0; }
.mk-log li { display:grid; grid-template-columns:7.5em minmax(0,1fr); gap:4px 16px; padding:18px 0; border-top:1px solid var(--line); }
.mk-log li:first-child { border-top:0; }
.mk-log time { font-family:Inter,sans-serif; font-size:.8125rem; color:#53584f; padding-top:4px; }
.making .mk-log h3 { margin:0 0 4px; font-size:1.0625rem; }
.making .mk-log p { margin:0; }
.mk-tag { font-size:.6875rem; color:#53584f; letter-spacing:.06em; }
@media(max-width:760px) {
 .mk-grid { grid-template-columns:minmax(0,1fr); gap:16px; }
 .mk-card { padding:20px 18px; }
 .mk-section { padding:26px 0; }
 .mk-log li { grid-template-columns:minmax(0,1fr); }
}
.mk-more { display:inline-flex; align-items:center; gap:10px; min-height:44px; margin-top:4px; font-size:.875rem; color:#303c35; text-decoration:underline; text-underline-offset:5px; }
.mk-more:hover { text-decoration-thickness:2px; }
.mk-card { display:flex; flex-direction:column; }
.mk-card > .mk-more { margin-top:auto; }
.mk-back { display:inline-flex; align-items:center; gap:8px; min-height:44px; font-size:.875rem; color:#303c35; }
.mk-others { display:flex; flex-wrap:wrap; gap:8px 20px; }
.mk-media { margin:32px 0 8px; display:flex; flex-direction:column; align-items:center; gap:14px; }
.mk-phone { width:min(300px,78vw); aspect-ratio:390/844; border-radius:28px; overflow:hidden; background:#0b0b0c; border:6px solid #1c1d1b; box-shadow:0 24px 60px rgba(25,31,28,.22); }
.mk-phone video,.mk-phone img { display:block; width:100%; height:100%; object-fit:cover; }
.mk-media figcaption { font-size:.8125rem; line-height:1.8; color:#53584f; text-align:center; max-width:32em; }
.mk-thumb { display:block; margin:-24px -24px 18px; height:200px; overflow:hidden; border-radius:8px 8px 0 0; background:#0b0b0c; }
.mk-thumb img { display:block; width:100%; height:100%; object-fit:cover; object-position:top; }
.mk-audio { margin:8px 0 0; }
.mk-audio audio { width:100%; max-width:420px; }
@media(max-width:760px){ .mk-thumb { margin:-20px -18px 16px; } }
@media(prefers-reduced-motion:reduce){ .mk-phone video { display:none; } .mk-phone { background:center/cover no-repeat; } }

/* Contrast (Issue #30): the per-article .pull-label used opacity .55 (3.8:1); raise it to pass 4.5:1. */
.pull .pull-label{opacity:.75}
/* guides.html */
.guide-policy{margin:28px 0 8px;padding:20px 22px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.45)}
.doc .guide-policy-head{margin:0 0 8px;font-size:.8125rem;letter-spacing:.06em;color:#53584f}
.guide-policy ul{margin:0;padding-left:1.2em}
.doc .guide-policy li{font-size:.9375rem;line-height:1.9;margin:0 0 4px}
.guide-jump{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 8px}
.guide-jump a{display:inline-flex;align-items:center;min-height:40px;padding:6px 16px;border:1px solid var(--line);border-radius:999px;font-size:.875rem;color:var(--ink);text-decoration:none;background:rgba(255,255,255,.5)}
.guide-group{scroll-margin-top:96px}
.doc .guide-group-title{margin:40px 0 0;font-size:1.25rem}
.guide-group .topic-list{margin-top:16px}
.guide-new{font-style:normal;font-size:.6875rem;letter-spacing:.08em;padding:2px 7px;margin-left:4px;border-radius:999px;background:#1b1c19;color:#fff}
/* Non-guide articles: one related guide, just before "次に読む" */
.guide-callout{margin:40px 0 8px}
.guide-callout-eyebrow{margin:0 0 8px;font-size:.75rem;letter-spacing:.1em;color:#53584f}
.guide-callout-link{display:grid;gap:6px;padding:22px 24px;border:1px solid rgba(27,28,25,.2);border-radius:10px;background:rgba(255,255,255,.6);color:#1b1c19;text-decoration:none}
.guide-callout-link:hover .guide-callout-title{text-decoration:underline;text-underline-offset:4px}
.guide-callout-title{font-family:"Noto Serif JP",serif;font-size:1.125rem;line-height:1.7}
.guide-callout-text{font-size:.875rem;line-height:1.8;color:#444740}
.guide-callout-more{font-size:.8125rem;color:#303c35;margin-top:4px}
/* Before/after slider on making-*.html */
.mk-cmp{position:relative;border-radius:10px;overflow:hidden;border:1px solid var(--line);aspect-ratio:1280/800;background:#ddd}
.mk-cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.mk-cmp .mk-cmp-before{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.mk-cmp::after{content:"";position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.25);pointer-events:none}
.mk-cmp-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.mk-cmp-tag{position:absolute;top:10px;padding:3px 10px;border-radius:999px;font-size:.6875rem;letter-spacing:.06em;background:rgba(27,28,25,.78);color:#fff;pointer-events:none}
.mk-cmp-tag-b{left:10px}.mk-cmp-tag-a{right:10px}
.doc .mk-cmp-hint{margin:8px 0 20px;font-size:.75rem;color:#53584f;text-align:center}
.mk-cmp-phones{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:460px;margin:0 auto 20px}
.mk-cmp-phones figure{margin:0;text-align:center}
.mk-cmp-phones img{width:100%;height:auto;border-radius:16px;border:4px solid #1c1d1b}
.mk-cmp-phones figcaption{font-size:.75rem;color:#53584f;margin-top:6px}