/* =====================================================================
   ATELIER Onn ～音の頁～  共通の世界
   ---------------------------------------------------------------------
   霧の森と、刻まれた石。
   どの頁も <body data-scene="…"> で景色を選びます（空の色はこの紙、
   山並み・木々・星・蛍は onn-world.js が描きます）。
     grove   … 森の入口（はじめの頁）
     pine    … ᚐ Ailm    マツ         ソルフェジオ手帖
     gorse   … ᚑ Onn     ハリエニシダ 作曲卓
     heather … ᚒ Úr      ヒース       朝のヒグラシ
     aspen   … ᚓ Eadhadh ポプラ       音のオガム
     yew     … ᚔ Iodhadh イチイ       音の記憶
   ===================================================================== */
:root{
  color-scheme:dark;
  --night:#071012;
  --ink:#ECE5CF; --ink-soft:#BDB6A0; --ink-faint:#8C8775;
  --gold:#DDAE52; --gold-deep:#B98A34; --gorse:#F2C766; --ember:#FBE2A0;
  --moss:#A3C08F; --mist:#B3C6C8; --danger:#EA8C73;
  --line:rgba(236,229,207,.2); --line-soft:rgba(236,229,207,.1);
  --panel:rgba(8,14,15,.7); --panel-soft:rgba(8,14,15,.5);
  --field:rgba(0,0,0,.34);
  --mincho:"Shippori Mincho","Noto Sans Ogham","Yu Mincho","YuMincho","Hiragino Mincho ProN","Hiragino Mincho Pro","Noto Serif JP",serif;
  --serif:"Cormorant Garamond","Noto Sans Ogham","EB Garamond","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --ogham:"Noto Sans Ogham","Segoe UI Symbol","Segoe UI Historic",sans-serif;
  /* 空（頁ごとに下で上書き） */
  --sky-0:#04090b; --sky-1:#0a1618; --sky-2:#142628; --sky-3:#2b3d38;
}
body[data-scene="pine"]   { --sky-0:#03060f; --sky-1:#091027; --sky-2:#172042; --sky-3:#344163; }
body[data-scene="gorse"]  { --sky-0:#0a0710; --sky-1:#1b1326; --sky-2:#3f2638; --sky-3:#a0623a; }
body[data-scene="heather"]{ --sky-0:#0e1327; --sky-1:#232a4a; --sky-2:#4f5073; --sky-3:#c48954; }
body[data-scene="aspen"]  { --sky-0:#040b0b; --sky-1:#0b1918; --sky-2:#18302c; --sky-3:#3b5650; }
body[data-scene="yew"]    { --sky-0:#030504; --sky-1:#080d0b; --sky-2:#111a15; --sky-3:#27332a; }

*{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html,body{ margin:0; padding:0; }
body{
  font-family:var(--mincho); color:var(--ink);
  background-color:var(--night);
  background-image:linear-gradient(180deg,var(--sky-0) 0%,var(--sky-1) 34%,var(--sky-2) 70%,var(--sky-3) 100%);
  background-attachment:fixed;
  line-height:1.9; -webkit-font-smoothing:antialiased; min-height:100vh;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
  overflow-x:hidden;
}
::selection{ background:rgba(242,199,102,.35); color:#fff; }
a{ color:var(--gorse); }
:focus-visible{ outline:2px solid var(--gorse); outline-offset:3px; }

/* =========================== 景色の層 =========================== */
.world{ position:fixed; left:0; top:0; width:100%; height:100vh; height:100lvh;
  z-index:0; overflow:hidden; pointer-events:none;
  background:linear-gradient(180deg,var(--sky-0) 0%,var(--sky-1) 34%,var(--sky-2) 70%,var(--sky-3) 100%); }
.world > *{ position:absolute; left:0; top:0; width:100%; height:100%; }
.world .w-layer{ will-change:transform; }
.world svg{ display:block; width:100%; height:100%; overflow:visible; }
.w-glow{ background:radial-gradient(ellipse var(--gw,70%) var(--gh,45%) at var(--gx,50%) var(--gy,100%),
  rgba(var(--glow-rgb,255,200,140),var(--ga,.3)), transparent 72%); }
.w-mist{ position:absolute; left:0; bottom:var(--mb,20%); height:var(--mh,24%); width:200%;
  opacity:var(--mo,.8);
  background-image:
    radial-gradient(ellipse 30% 46% at 22% 56%, rgba(var(--mist-rgb,180,200,200),.16), transparent 72%),
    radial-gradient(ellipse 34% 40% at 60% 44%, rgba(var(--mist-rgb,180,200,200),.12), transparent 72%),
    radial-gradient(ellipse 26% 52% at 88% 60%, rgba(var(--mist-rgb,180,200,200),.14), transparent 72%);
  background-size:50% 100%; background-repeat:repeat-x;
  animation:w-drift var(--ms,120s) linear infinite; }
.w-mist.slow{ --ms:190s; animation-direction:reverse; }
@keyframes w-drift{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.w-vignette{ background:radial-gradient(ellipse 120% 90% at 50% 38%, transparent 55%, rgba(0,0,0,.5) 100%); }
.w-grain{ opacity:.07; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1.6 0 0 0 -.62'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
.world .rune{ animation:w-rune 6s ease-in-out infinite; }
@keyframes w-rune{ 0%,100%{ opacity:.25; } 50%{ opacity:.9; } }

/* =========================== 紙面 =========================== */
.sheet{ position:relative; z-index:1; margin:0 auto; max-width:760px;
  padding:clamp(14px,3vw,24px) clamp(16px,5vw,48px) 64px; }

/* ---- 廊下（頁のあいだの小径） ---- */
.wnav{ display:flex; flex-wrap:wrap; align-items:center; gap:.15em .05em;
  margin:0 0 clamp(30px,6vw,52px); padding:0 0 12px; position:relative;
  font-size:.84rem; letter-spacing:.08em; }
.wnav::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg, rgba(221,174,82,.55), rgba(236,229,207,.14) 40%, rgba(236,229,207,.06) 100%); }
.wnav a{ display:inline-flex; align-items:center; gap:.45em; color:var(--ink-soft); text-decoration:none;
  padding:.35em .6em; border-radius:4px; white-space:nowrap;
  transition:color .2s ease, background .2s ease, text-shadow .2s ease; }
.wnav a:hover{ color:var(--ink); background:rgba(236,229,207,.06); }
.wnav a[aria-current="page"]{ color:var(--gorse); text-shadow:0 0 12px rgba(242,199,102,.45); }
.wnav .home{ padding:.3em .7em .3em .2em; }
.ng{ width:24px; height:12px; flex:none; overflow:visible; }
.ng line{ stroke:currentColor; stroke-width:1.1; stroke-linecap:round; opacity:.8; }
.ng .k{ stroke-width:1.7; opacity:1; }
.wnav a[aria-current="page"] .ng, .wnav a:hover .ng{ filter:drop-shadow(0 0 3px rgba(242,199,102,.7)); }

/* ---- 署名の刻み（᚛ᚑ᚜ / 幹に二本、両端に羽根） ---- */
.navmark{ height:16px; width:auto; flex:none; overflow:visible; vertical-align:middle;
  filter:drop-shadow(0 0 4px rgba(242,199,102,.5)); }
.navmark .d{ stroke:var(--gold); stroke-width:1.6; }
.navmark .s{ stroke:var(--gorse); stroke-width:2.8; stroke-linecap:round; }
.navmark .f{ stroke:var(--gold); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; fill:none; }

/* ---- 頁の標（オガムの一字・木の名・言葉のオガム） ---- */
.crest{ position:relative; }
.glyph{ display:block; height:clamp(50px,10vw,70px); width:auto; overflow:visible; margin:0 0 16px -4px;
  filter:drop-shadow(0 0 7px rgba(242,199,102,.45)); }
.glyph .druim{ stroke:var(--gold); stroke-width:2; stroke-linecap:round; }
.glyph .flesc{ stroke:var(--gorse); stroke-width:3.4; stroke-linecap:round; }
.glyph .feather{ stroke:var(--gold); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; fill:none; }
.meta{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.1em .7em; margin:0;
  font-family:var(--serif); font-size:.95rem; letter-spacing:.2em; color:var(--ink-soft); }
.meta .lt{ color:var(--gorse); font-weight:600; letter-spacing:.16em; }
.meta .jp{ font-family:var(--mincho); font-size:.84rem; letter-spacing:.12em; }
.meta .sep{ color:var(--ink-faint); letter-spacing:0; }
h1{ font-weight:500; font-size:clamp(2rem,7vw,2.9rem); letter-spacing:.16em; line-height:1.3;
  margin:.28em 0 .12em; text-shadow:0 0 28px rgba(242,199,102,.2), 0 2px 3px rgba(0,0,0,.45); }
.kenning{ margin:.2em 0 0; font-family:var(--serif); font-style:italic; font-size:1.08rem;
  letter-spacing:.06em; color:var(--mist); }
.kenning .jp{ font-family:var(--mincho); font-style:normal; font-size:.86rem; letter-spacing:.14em; margin-left:.6em; }
.kenning small{ display:block; font-family:var(--mincho); font-style:normal; font-size:.74rem; letter-spacing:.14em; color:var(--ink-soft); opacity:.8; }
.lede{ color:var(--ink-soft); font-size:.97rem; max-width:54ch; margin:1.1em 0 0; }
/* 行末に一、二文字だけ取り残さない */
.lede, .aside, .fine, .hint, .desc, .note, .pnote, .prose p{ text-wrap:pretty; }

/* ---- 屋号から母屋への戻り口 ---- */
a.onn{ color:inherit; text-decoration:none; border-bottom:1px solid transparent;
  transition:color .2s ease, border-color .2s ease; }
a.onn:hover{ color:var(--gorse); border-bottom-color:rgba(242,199,102,.6); }

/* =========================== 道具 =========================== */
.veil{ background:var(--panel); border:1px solid var(--line-soft); border-radius:8px;
  box-shadow:0 10px 40px rgba(0,0,0,.28), inset 0 1px 0 rgba(236,229,207,.05); }

.tabs{ display:flex; flex-wrap:wrap; margin:36px 0 0; border-bottom:1px solid var(--line); }
.tab{ appearance:none; background:transparent; border:0; cursor:pointer;
  font-family:var(--mincho); color:var(--ink-soft); font-size:1rem; letter-spacing:.12em;
  padding:.55em 1.05em .5em; border-bottom:2px solid transparent; margin-bottom:-1px;
  transition:color .25s ease, border-color .25s ease, text-shadow .25s ease; text-shadow:inherit; }
.tab:hover{ color:var(--ink); }
.tab[aria-selected="true"]{ color:var(--ink); border-bottom-color:var(--gorse);
  text-shadow:0 0 14px rgba(242,199,102,.4); }
.tab .en{ display:block; font-family:var(--serif); font-style:italic; font-size:.78rem;
  letter-spacing:.14em; opacity:.75; margin-top:.05em; }
.pane{ display:none; padding-top:28px; }
.pane.active{ display:block; animation:w-fade .6s ease both; }
@keyframes w-fade{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

.aside{ font-size:.86rem; color:var(--ink-soft); border-left:2px solid rgba(221,174,82,.5);
  padding:.1em 0 .1em 1em; margin:0 0 24px; max-width:60ch; }
.aside b{ color:var(--ink); font-weight:500; }

.bar{ display:flex; flex-wrap:wrap; align-items:center; gap:.55em; margin:20px 0 0; padding:14px 16px;
  background:var(--panel); border:1px solid var(--line-soft); border-radius:8px; }
.bar .sep{ width:1px; align-self:stretch; background:var(--line-soft); margin:0 .3em; }

.btn{ appearance:none; cursor:pointer; font-family:var(--mincho); font-size:.9rem; letter-spacing:.12em;
  color:var(--ink); background:rgba(242,199,102,.07); border:1px solid rgba(221,174,82,.7); border-radius:4px;
  padding:.52em 1.15em; white-space:nowrap; text-shadow:none;
  transition:background .2s ease, color .2s ease, box-shadow .2s ease, border-color .2s ease; }
.btn:hover{ background:rgba(242,199,102,.18); color:#FFF6DE; box-shadow:0 0 16px rgba(242,199,102,.28); }
.btn.ghost{ background:transparent; border-color:var(--line); }
.btn.ghost:hover{ background:rgba(236,229,207,.08); border-color:rgba(236,229,207,.45); box-shadow:none; }
.btn:disabled{ opacity:.35; cursor:not-allowed; box-shadow:none; }

.fld{ display:flex; align-items:center; gap:.4em; font-size:.8rem; color:var(--ink-soft); letter-spacing:.06em; }
.fld input[type=number], .fld select{ font-family:var(--serif); font-size:.98rem; font-weight:500; color:var(--ink);
  background:var(--field); border:1px solid var(--line); border-radius:4px; padding:.26em .5em; }
.fld input[type=number]{ width:5.4rem; text-align:right; padding-right:1.4em;
  font-variant-numeric:lining-nums tabular-nums; }
.fld select option{ background:#101a1b; color:var(--ink); }
.fld.check{ cursor:pointer; }
.fld.check input{ accent-color:var(--gold); width:15px; height:15px; }

/* 見える線は2px、指の掛かる幅は28px */
input[type=range]{ -webkit-appearance:none; appearance:none; height:28px; flex:1; margin:0;
  background:transparent; outline-offset:2px; cursor:pointer; touch-action:pan-y; }
input[type=range]::-webkit-slider-runnable-track{ height:2px; border-radius:2px;
  background:linear-gradient(90deg, rgba(221,174,82,.7), rgba(236,229,207,.25)); }
input[type=range]::-moz-range-track{ height:2px; border-radius:2px;
  background:linear-gradient(90deg, rgba(221,174,82,.7), rgba(236,229,207,.25)); }
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:16px; height:16px; margin-top:-7px; border-radius:50%;
  background:var(--gorse); border:2px solid #1a1510; box-shadow:0 0 10px rgba(242,199,102,.7); cursor:pointer; }
input[type=range]::-moz-range-thumb{ width:16px; height:16px; border-radius:50%; background:var(--gorse);
  border:2px solid #1a1510; box-shadow:0 0 10px rgba(242,199,102,.7); cursor:pointer; }

.chip{ appearance:none; cursor:pointer; font-family:var(--mincho); font-size:.86rem; letter-spacing:.08em;
  color:var(--ink); background:var(--field); border:1px solid var(--line); border-radius:4px;
  padding:.42em 1em; line-height:1.4; text-shadow:none; text-align:left;
  transition:border-color .2s ease, background .2s ease, box-shadow .2s ease; }
.chip small{ display:block; font-family:var(--serif); font-size:.76rem; font-weight:500;
  color:var(--ink-faint); letter-spacing:.06em; }
.chip:hover{ border-color:rgba(221,174,82,.65); }
.chip[aria-pressed="true"]{ border-color:var(--gold); background:rgba(242,199,102,.13);
  box-shadow:inset 0 0 14px rgba(242,199,102,.12), 0 0 12px rgba(242,199,102,.14); }
.chip[aria-pressed="true"] small{ color:var(--gorse); }

.status{ font-size:.86rem; margin:16px 2px 0; min-height:1.3em; color:var(--ink-soft); }
.status.err{ color:var(--danger); } .status.ok{ color:var(--moss); }

.hint{ font-size:.8rem; color:var(--ink-soft); margin:10px 2px 0; }
.hint b, .hint strong{ color:var(--ink); font-weight:500; }

.fine{ font-size:.8rem; color:var(--ink-soft); margin-top:34px; border-left:2px solid var(--line);
  padding:.1em 0 .1em 1em; max-width:62ch; }
.fine b{ color:var(--ink); font-weight:500; }

/* ---- 結び ---- */
.wfoot{ margin-top:56px; padding-top:18px; border-top:1px solid var(--line-soft);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.6em 1em;
  font-family:var(--serif); font-size:.86rem; letter-spacing:.12em; color:var(--ink-soft); }
.oghamline{ font-family:var(--ogham); font-size:1.35rem; line-height:1; letter-spacing:0; color:var(--gold);
  text-shadow:0 0 10px rgba(242,199,102,.45); white-space:nowrap; }

/* ---- 入りの気配（ふわりと現れ、刻みは彫られていく） ---- */
html.js .rise{ opacity:0; transform:translateY(16px);
  transition:opacity 1s ease, transform 1s cubic-bezier(.2,.7,.2,1); transition-delay:var(--rd,0s); }
html.js .rise.seen{ opacity:1; transform:none; }
html.js .carve .cv{ stroke-dasharray:var(--len,120) 9999; stroke-dashoffset:var(--len,120); }
html.js .carve.seen .cv{ animation:w-carve .7s cubic-bezier(.45,0,.25,1) var(--d,0s) forwards; }
@keyframes w-carve{ to{ stroke-dashoffset:0; } }

@media (max-width:640px){
  .sheet{ padding-left:14px; padding-right:14px; }
  .wnav{ font-size:.8rem; }
  .wnav a{ padding:.3em .5em; }
  .bar{ padding:12px; gap:.45em; }
  .btn{ padding:.6em .95em; font-size:.88rem; }
  .tab{ padding:.5em .7em; font-size:.94rem; }
}
@media (max-width:400px){
  .wnav a{ padding:.3em .38em; gap:.35em; }
}
/* 指で触る端末では、廊下の一つひとつを押しやすい高さに */
@media (pointer:coarse){
  .wnav a{ min-height:38px; }
}
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ animation:none !important; transition:none !important; }
  html.js .rise{ opacity:1; transform:none; }
  html.js .carve .cv{ stroke-dasharray:none; stroke-dashoffset:0; }
}