/* うちがわ — INSIDE */

:root {
  --paper: #ece8e0;
  --paper-2: #e3ded4;
  --ink: #1c1b19;
  --graphite: #5f5b54;
  --faint: #a29c90;
  --red: #e10c1d;
  --fg: var(--ink);
  --bg: var(--paper);
  --serif: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --mono: "JetBrains Mono", "Zen Kaku Gothic New", "Hiragino Sans", monospace;
  --gothic: "Zen Kaku Gothic New", "Hiragino Sans", sans-serif;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: var(--bg); color: var(--fg);
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}
body {
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
  touch-action: none;
  user-select: none; -webkit-user-select: none;
  transition: background-color 2.4s ease, color 2.4s ease;
  word-break: keep-all;
  line-break: strict;
}
body[data-theme="red"]   { --bg: var(--red); --fg: var(--paper); }
body[data-theme="white"] { --bg: #ffffff; --fg: #8a8780; transition: none; }
body[data-theme="dark"]  { --bg: #141312; --fg: #d8d3c9; }
body[data-theme="black"] { --bg: #000; --fg: #6a665f; transition: background-color 9s ease, color 9s ease; cursor: none; }
body[data-theme="black"] * { cursor: none; }
body.instant { transition: none !important; }

button { font: inherit; color: inherit; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

#world { position: fixed; inset: 0; overflow: hidden; }
#layer, #texts, #ripples { position: absolute; inset: 0; }
#ripples { pointer-events: none; z-index: 6; }
#texts { pointer-events: none; z-index: 5; }
#texts > * { pointer-events: auto; }
#texts > .say { pointer-events: none; }
.cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* 紙の肌理 */
#grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 20;
  opacity: .35; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .45  0 0 0 0 .42  0 0 0 0 .38  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  transition: opacity 2s;
}
body[data-theme="red"] #grain { opacity: .22; }
body[data-theme="white"] #grain, body[data-theme="black"] #grain { opacity: 0; transition: none; }
body[data-theme="dark"] #grain { opacity: .12; mix-blend-mode: screen; }

/* 文節：この単位の内側では、決して折り返さない */
.p { display: inline-block; white-space: nowrap; }
em { font-style: normal; font-family: var(--mono); font-weight: 400; letter-spacing: .02em; font-size: .92em; }

/* 言葉 */
.say {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(calc(100vw - 40px), 34em);
  text-align: center;
  font-size: clamp(17px, 0.9vw + 13px, 25px);
  line-height: 2.05; letter-spacing: .14em;
  opacity: 0; transition: opacity 1.6s ease, filter 1.6s ease;
  filter: blur(3px);
  text-wrap: balance;
  font-feature-settings: "palt" 0;
}
.say.on { opacity: 1; filter: blur(0); }
.say.upper { top: 24%; }
.say.top { top: 15%; }
.say.lower { top: 84%; }
.say.s-s { font-size: clamp(14px, .5vw + 12px, 17px); letter-spacing: .12em; }
.say.s-l { font-size: clamp(22px, 2vw + 14px, 38px); letter-spacing: .2em; }
.say.machine { font-family: var(--mono); font-size: clamp(14px, .4vw + 12.5px, 17px); letter-spacing: .04em; line-height: 2; }
.say.dim { color: var(--graphite); }
.say.ink { color: var(--ink); }
.say.paper { color: var(--paper); }

/* 展示ラベル */
.label {
  position: absolute; left: max(16px, 4.5vw); bottom: max(26px, 6vh);
  width: min(calc(100vw - 32px), 31em);
  padding-top: 14px;
  border-top: 1px solid currentColor;
  font-size: clamp(13.5px, .3vw + 12.5px, 15.5px); line-height: 2; letter-spacing: .07em;
  opacity: 0; transform: translateY(8px);
  transition: opacity 1.2s ease, transform 1.2s ease;
  pointer-events: none;
}
.label.on { opacity: 1; transform: none; }
.label .tag {
  display: inline-block; font-family: var(--gothic); font-size: 11px; letter-spacing: .38em;
  padding: 2px 4px 2px 9px; border: 1px solid currentColor; margin-bottom: 10px;
}
.label .lx { margin-top: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: .04em; opacity: .7; line-height: 1.7; }
.label.right { left: auto; right: max(16px, 4.5vw); }
.label.bg { background: var(--bg); box-shadow: 0 -12px 24px 6px var(--bg); }

/* 選択肢 */
.choices {
  position: absolute; left: 0; right: 0; bottom: max(64px, 13vh);
  display: flex; justify-content: center; flex-wrap: wrap; gap: 12px 14px;
  padding: 0 16px;
  opacity: 0; transition: opacity .9s ease;
}
.choices.on { opacity: 1; }
.choices.mid { bottom: auto; top: 62%; }
.ch, .btn {
  appearance: none; background: transparent; cursor: pointer;
  border: 1px solid currentColor; border-radius: 999px;
  padding: 11px 24px 12px 26px; min-height: 46px;
  font-size: 15.5px; letter-spacing: .16em;
  transition: background-color .4s, color .4s, opacity .6s;
}
.ch:focus-visible, .btn:focus-visible { background: var(--fg); color: var(--bg); outline: none; }
@media (hover: hover) { .ch:hover, .btn:hover { background: var(--fg); color: var(--bg); } }
.ch.picked { background: var(--fg); color: var(--bg); }
.ch:disabled { cursor: default; }
.machine-ch .ch { font-family: var(--mono); letter-spacing: .06em; border-radius: 2px; }

.btn {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: max(40px, 8vh); opacity: 0; white-space: nowrap;
}
.btn.on { opacity: 1; }
.btn.quiet { border-color: transparent; font-size: 14px; color: var(--graphite); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.btn.quiet:hover, .btn.quiet:focus-visible { background: transparent; color: var(--fg); }
.btn.mono { font-family: var(--mono); font-size: 13px; letter-spacing: .1em; border-radius: 2px; }

/* 進むための点 */
.next {
  position: absolute; left: 50%; bottom: max(28px, 5.5vh); width: 7px; height: 7px; margin-left: -3.5px;
  border-radius: 50%; background: currentColor; opacity: 0; transition: opacity 1.2s;
  pointer-events: none;
}
.next.on { opacity: .75; animation: breathe 3.2s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { transform: scale(.7); opacity: .35; } 50% { transform: scale(1.25); opacity: .85; } }

/* 触れた跡 */
.ripple {
  position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  border: 1px solid currentColor; opacity: .45; pointer-events: none;
  animation: ripple 1.3s cubic-bezier(.2, .7, .2, 1) forwards;
}
@keyframes ripple { to { transform: scale(7); opacity: 0; } }

/* HUD */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 30; font-family: var(--gothic); }
#mark {
  position: absolute; left: max(16px, 2.6vw); top: max(14px, 2.4vh);
  font-size: 11.5px; letter-spacing: .3em; color: var(--fg); opacity: 0; transition: opacity 1.4s;
}
#mark.on { opacity: .62; }
#mark .n { font-family: var(--serif); margin-right: 1.1em; letter-spacing: 0; }
#snd {
  position: absolute; right: max(10px, 2.2vw); top: max(6px, 1.6vh);
  pointer-events: auto; background: none; border: 0; cursor: pointer;
  font-family: var(--gothic); font-size: 11.5px; letter-spacing: .2em; padding: 10px 8px;
  color: var(--fg); opacity: .55; transition: opacity .6s;
}
#snd[aria-pressed="false"] { text-decoration: line-through; opacity: .35; }
#snd:hover { opacity: 1; }
#count {
  position: absolute; right: max(16px, 2.6vw); bottom: max(12px, 2vh);
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: var(--fg);
  opacity: 0; transition: opacity 3s;
}
#count.on { opacity: .28; }
body.nohud #hud > * { opacity: 0 !important; pointer-events: none; }

/* 序 */
.title {
  position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%);
  text-align: center; transition: opacity 2.2s ease, filter 2.2s ease;
}
.title h1 { margin: 0; font-weight: 400; font-size: clamp(34px, 3.4vw + 20px, 62px); letter-spacing: .62em; margin-right: -.62em; }
.title .en { margin-top: 18px; font-family: var(--mono); font-weight: 300; font-size: 11px; letter-spacing: .9em; margin-right: -.9em; opacity: .6; }
.title .sub { margin-top: 30px; font-size: clamp(14px, .4vw + 13px, 17px); letter-spacing: .32em; margin-right: -.32em; opacity: .8; }
.title.gone { opacity: 0; filter: blur(6px); }
.hint {
  position: absolute; left: 0; right: 0; bottom: max(26px, 5vh); text-align: center;
  font-family: var(--gothic); font-size: 11.5px; letter-spacing: .3em; opacity: .5; transition: opacity 1.6s;
}

/* 標本の孔 */
.pore {
  position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%;
  background: transparent; border: 0; cursor: pointer; padding: 0;
}
.pore:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }
.pore .nm {
  position: absolute; left: 34px; top: 50%; transform: translateY(-50%);
  font-family: var(--gothic); font-size: 11px; letter-spacing: .3em; white-space: nowrap;
  opacity: 0; transition: opacity .6s; pointer-events: none;
}
.pore:hover .nm, .pore:focus-visible .nm { opacity: .7; }
.pore.done .nm { opacity: .5; }
.pore.left .nm { left: auto; right: 34px; }
.pore.seed { width: 56px; height: 56px; margin: -28px 0 0 -28px; }

/* Ⅴ 機械の声 */
.machine-col {
  position: absolute; left: max(16px, 7vw); top: max(56px, 10vh);
  width: min(calc(100vw - 32px), 36em);
  font-family: var(--mono); font-size: clamp(13.5px, .35vw + 12.5px, 16px); line-height: 2; letter-spacing: .03em;
  transition: transform 1.2s cubic-bezier(.3, .7, .2, 1);
}
.machine-col .ln { margin: 0 0 .7em; min-height: 1em; }
.machine-col .ln.past { color: var(--graphite); }
.machine-col .caret { display: inline-block; width: .55em; height: 1.1em; background: currentColor; vertical-align: -0.2em; margin-left: 2px; animation: caret 1.1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.records { font-size: 11.5px; line-height: 1.85; color: var(--graphite); margin: 0 0 1.4em; }
.records div { padding-left: 4.6em; text-indent: -4.6em; word-break: keep-all; overflow-wrap: anywhere; opacity: 0; transition: opacity .3s; }
.records div.on { opacity: 1; }
.records b { font-weight: 400; color: var(--faint); display: inline-block; width: 4.6em; text-indent: 0; }
.records div.strike { text-decoration: line-through; opacity: .35; }

.code {
  position: absolute; right: 0; top: 0; bottom: 0; width: min(46vw, 640px);
  background: var(--paper-2); border-left: 1px solid rgba(0,0,0,.12);
  font-family: var(--mono); font-size: 11.5px; line-height: 1.75; color: #4a4741;
  overflow: hidden; transform: translateX(102%); transition: transform 1.4s cubic-bezier(.3, .7, .2, 1);
  padding: 9vh 0 0;
}
.code.on { transform: none; }
.code .head { position: absolute; top: 0; left: 0; right: 0; z-index: 2; padding: 14px 22px 10px; background: var(--paper-2); font-size: 10.5px; letter-spacing: .12em; color: var(--faint); border-bottom: 1px solid rgba(0,0,0,.06); }
.code pre { margin: 0; white-space: pre; transition: transform 1s cubic-bezier(.3, .7, .2, 1); }
.code .l { display: block; padding: 0 22px 0 0; }
.code .l i { display: inline-block; width: 4.4em; padding-right: 1.2em; text-align: right; color: var(--faint); font-style: normal; }
.code .l.hl { background: var(--ink); color: var(--paper); }
.code .l.hl i { color: var(--faint); }
.code .l.br { box-shadow: inset 3px 0 0 var(--red); }
@media (max-aspect-ratio: 1/1) {
  .code { left: 0; width: auto; top: auto; height: 42vh; transform: translateY(102%); border-left: 0; border-top: 1px solid rgba(0,0,0,.12); padding-top: 48px; font-size: 10.5px; }

}

/* Ⅳ */
.depth-rail {
  position: absolute; right: max(14px, 2.4vw); top: 50%; transform: translateY(-50%);
  height: min(52vh, 420px); width: 30px; pointer-events: auto; cursor: ns-resize; touch-action: none;
}
.lenses {
  position: absolute; left: 0; right: 0; bottom: max(70px, 11vh);
  display: flex; justify-content: center; gap: clamp(10px, 3vw, 26px); flex-wrap: wrap; padding: 0 12px;
  opacity: 0; transition: opacity 1.2s;
}
.lenses.on { opacity: 1; }
.lens {
  width: clamp(68px, 17vw, 94px); height: clamp(68px, 17vw, 94px); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.16), rgba(255,255,255,.02) 60%);
  border: 1px solid currentColor; cursor: pointer; font-family: var(--serif);
  font-size: clamp(12.5px, .4vw + 11px, 14.5px); letter-spacing: .12em; padding: 0 0 0 .12em;
  display: grid; place-items: center; transition: background .5s, transform .5s;
}
.lens:focus-visible { background: rgba(225, 12, 29, .14); outline: none; }
@media (hover: hover) { .lens:hover { background: rgba(225, 12, 29, .14); transform: translateY(-3px); } }
.lens:active { background: rgba(225, 12, 29, .22); }
.lens.used { border-style: dashed; opacity: .75; }

.illusion-ring {
  position: absolute; width: min(70vw, 70vh); height: min(70vw, 70vh); left: 50%; top: 50%;
  margin: calc(min(70vw, 70vh) / -2) 0 0 calc(min(70vw, 70vh) / -2);
  border-radius: 50%; pointer-events: auto; cursor: grab; touch-action: none;
  background: radial-gradient(circle, rgba(225,12,29,0) 52%, rgba(225,12,29,.22) 66%, rgba(225,12,29,.55) 70%, rgba(225,12,29,0) 71.5%);
  opacity: 0; transition: opacity 1.6s;
}
.illusion-ring.on { opacity: 1; }
.illusion-ring.snap { transition: transform .9s cubic-bezier(.2, 1.6, .4, 1), opacity 1.6s; }

/* 終わり */
.endnav {
  position: absolute; left: 0; right: 0; bottom: max(24px, 5vh); text-align: center;
  font-family: var(--gothic); font-size: 11.5px; letter-spacing: .26em; color: #55524c;
  opacity: 0; transition: opacity 6s; cursor: default;
}
.endnav.on { opacity: 1; }
.endnav a, .endnav button { color: inherit; text-decoration: none; background: none; border: 0; padding: 10px 12px; cursor: pointer !important; letter-spacing: inherit; font-size: inherit; font-family: inherit; }
.endnav a:hover, .endnav button:hover { color: #9a958c; }
.refs {
  position: absolute; inset: 0; overflow: auto; padding: 10vh max(20px, 8vw) 14vh; background: #000; color: #8d887f;
  font-family: var(--gothic); font-size: 12.5px; line-height: 2; letter-spacing: .04em; opacity: 0; transition: opacity 1.2s;
  touch-action: pan-y; user-select: text; -webkit-user-select: text;
}
.refs.on { opacity: 1; }
.refs * { cursor: auto !important; }
.refs h2 { font-family: var(--serif); font-weight: 400; font-size: 15px; letter-spacing: .3em; color: #b6b0a5; margin: 0 0 2em; }
.refs h3 { font-weight: 400; font-size: 11px; letter-spacing: .3em; color: #6a665f; margin: 2.4em 0 .6em; }
.refs p { margin: 0 0 .6em; max-width: 46em; }
.refs .close { position: fixed; right: 16px; top: 12px; background: none; border: 0; color: #8d887f; font-family: var(--gothic); letter-spacing: .2em; padding: 10px; cursor: pointer !important; }

.nos { position: fixed; inset: 0; display: grid; place-items: center; margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .say { filter: none; transition: opacity .6s; }
  .next.on { animation: none; opacity: .6; }
  .ripple { animation-duration: .6s; }
}

/* Ⅳ 降下の文字と操作 */
.dcap { position: absolute; font-family: var(--gothic); font-size: 11.5px; letter-spacing: .14em; line-height: 1.9; opacity: 0; transition: opacity .8s; pointer-events: none; color: var(--fg); }
.dcap.on { opacity: .8; }
.dcap .sc { font-size: 13px; letter-spacing: .2em; }
.dcap .sc span { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; margin-right: 1.2em; opacity: .7; }
.dcap .nt { opacity: .7; margin-top: 2px; }
.dctrls { position: absolute; left: 0; right: 0; bottom: max(26px, 5vh); display: flex; justify-content: center; gap: 12px; opacity: 0; transition: opacity 1.2s; pointer-events: none; }
.dctrls.on { opacity: 1; pointer-events: auto; }
.dctrls .btn { position: static; transform: none; opacity: 1; color: var(--fg); }
.dfound { position: absolute; left: 50%; bottom: calc(max(26px, 5vh) + 64px); transform: translateX(-50%); font-family: var(--mono); font-size: 12px; letter-spacing: .1em; opacity: 0; transition: opacity .6s; color: var(--fg); white-space: nowrap; pointer-events: none; }
.dfound span { margin-left: 1.4em; opacity: .55; }
.dfound.on { opacity: .9; }
.wake { position: absolute; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: transparent; border: 0; cursor: pointer; }
.wake:focus-visible { outline: 1px solid var(--fg); }
.say.lastline { color: rgba(236, 232, 224, .62); letter-spacing: .24em; }
.records { overflow: hidden; }
@media (max-aspect-ratio: 1/1) {
  .lenses { bottom: auto; top: calc(50% + 16px); }
}
body.showcursor, body.showcursor * { cursor: auto; }
body.showcursor .endnav a, body.showcursor .endnav button { cursor: pointer !important; }
.endnav { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 1.4em; letter-spacing: .2em; padding: 0 12px; }
.endnav a, .endnav button { white-space: nowrap; }

/* 押したあとも文字が見えるように */
.dctrls .btn:focus-visible { color: var(--bg); }
@media (hover: hover) { .dctrls .btn:hover { color: var(--bg); } }
.dctrls .btn:active { background: var(--fg); color: var(--bg); }

/* 見えていないものは、触れても反応しない（下のボタンを塞がない） */
#texts > .illusion-ring { z-index: 1; }
#texts > .illusion-ring:not(.on) { pointer-events: none; }
#texts > .lenses { z-index: 3; pointer-events: none; }
#texts > .lenses.on .lens { pointer-events: auto; }
#texts > .choices:not(.on), #texts > .btn:not(.on) { pointer-events: none; }

/* ダブルタップやピンチで拡大させない */
html, body, #world, #world *, #hud * { touch-action: none; }
.refs, .refs * { touch-action: pan-y; }

/* 右上：言語と音 */
#snd { font-family: var(--serif); font-size: 15px; letter-spacing: 0; padding: 8px 10px; line-height: 1; }
#snd[aria-pressed="false"] { text-decoration: none; }
#snd[aria-pressed="false"] span { position: relative; }
#snd[aria-pressed="false"] span::after { content: ""; position: absolute; left: -3px; right: -3px; top: 50%; border-top: 1px solid currentColor; transform: rotate(-35deg); }
#lng {
  position: absolute; right: calc(max(10px, 2.2vw) + 34px); top: max(6px, 1.6vh);
  pointer-events: auto; background: none; border: 0; cursor: pointer;
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; padding: 10px 8px; line-height: 1.3;
  color: var(--fg); opacity: .55; transition: opacity .6s;
}
#lng:hover, #lng:focus-visible { opacity: 1; outline: none; }

/* English */
html[lang="en"] { --serif: "EB Garamond", "Shippori Mincho", Georgia, serif; }
html[lang="en"] body { word-break: normal; }
html[lang="en"] .say { letter-spacing: .03em; line-height: 1.75; font-size: clamp(19px, 1vw + 14px, 28px); hyphens: none; }
html[lang="en"] .say.s-s { font-size: clamp(16px, .5vw + 13.5px, 19px); letter-spacing: .03em; }
html[lang="en"] .say.machine, html[lang="en"] .machine-col { letter-spacing: 0; }
html[lang="en"] .label { letter-spacing: .02em; font-size: clamp(15px, .3vw + 14px, 17px); line-height: 1.7; }
html[lang="en"] .label .tag { letter-spacing: .22em; text-transform: uppercase; font-size: 10px; }
html[lang="en"] .ch, html[lang="en"] .btn { letter-spacing: .05em; font-size: 16.5px; }
html[lang="en"] .machine-ch .ch, html[lang="en"] .btn.mono { font-size: 13px; }
html[lang="en"] .lens { letter-spacing: .02em; font-size: clamp(12px, .4vw + 10.5px, 14.5px); padding: 0 6px; line-height: 1.15; }
html[lang="en"] .title h1 { letter-spacing: .5em; margin-right: -.5em; font-weight: 400; font-size: clamp(38px, 3.6vw + 22px, 68px); }
html[lang="en"] .title .sub { letter-spacing: .14em; margin-right: -.14em; font-size: clamp(16px, .5vw + 14px, 20px); font-style: italic; }
html[lang="en"] .hint { letter-spacing: .2em; }
html[lang="en"] #mark { letter-spacing: .18em; font-family: var(--serif); font-size: 13px; }
html[lang="en"] .dcap { letter-spacing: .04em; font-family: var(--serif); font-size: 13px; }
html[lang="en"] .dcap .sc { letter-spacing: .08em; font-size: 14px; }
html[lang="en"] .endnav { letter-spacing: .14em; }
html[lang="en"] .records div { word-break: normal; }

/* 英語：一行ずつ、行の長さをそろえて折り返す（最後に一語だけ残さない） */
.bl { display: block; text-wrap: balance; }
.ch .bl, .btn .bl, .lens .bl, .dcap .bl { display: inline; }

/* Ⅴ：コードの窓と、問いへの答え */
.machine-ch .ch { background: var(--bg); }
.choices.machine-ch { justify-content: flex-start; left: max(16px, 7vw); right: auto; padding: 0; bottom: max(40px, 9vh); }
@media (max-aspect-ratio: 1/1) {
  .code { height: 42vh; height: 40dvh; }
  .choices.machine-ch { left: 0; right: 0; justify-content: center; padding: 0 16px; bottom: calc(42vh + 18px); bottom: calc(40dvh + 18px); }
}

/* 参考の画面だけは、指で縦にスクロールできる（全体の拡大防止より優先） */
#world .refs, #world .refs * { touch-action: pan-y; }
#world .refs { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.refs .links a { color: #b6b0a5; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.refs .links a:hover { color: #e6e0d4; }