:root{--paper:#f2efe8;--ink:#23313b;--mustard:#c0a04d;--rose:#ad747e;--line:#23313b35;--serif:Georgia,'Times New Roman',serif;--sans:'Yu Gothic','Hiragino Kaku Gothic ProN',sans-serif;--mincho:'Yu Mincho','Hiragino Mincho ProN',serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:1rem}body{margin:0;background:#d9d8d3;color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.9}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline;text-underline-offset:6px}a:focus-visible,button:focus-visible{outline:3px solid var(--rose);outline-offset:4px}button{font:inherit}h1,h2,h3,p,figure{margin:0}em{font-family:var(--serif);font-weight:400}img{display:block;width:100%;height:100%;object-fit:cover}[hidden]{display:none!important}.skip{position:fixed;top:-100px;left:10px;z-index:1000;background:var(--ink);color:#fff;padding:10px 14px}.skip:focus{top:10px}.site-shell{min-height:100vh}.site-column{width:100%;max-width:430px;margin-inline:auto;background:var(--paper);container-type:inline-size;box-shadow:0 0 45px #22303b19}.desktop-hero,.desktop-menu{display:none}.topbar{position:relative;z-index:20;padding:15px 7%;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);background:#f2efe8e8;backdrop-filter:blur(8px);font-size:12px}.wordmark{font:italic 21px var(--serif)}main{overflow:hidden}section{scroll-margin-top:1rem}.scene{position:relative;isolation:isolate;overflow:hidden}.scene::before,.scene::after{content:'';position:absolute;inset:0;z-index:-2}.scene::before{background-repeat:no-repeat;background-size:cover;background-position:center}.scene::after{z-index:-1;pointer-events:none}.hero{min-height:760px;padding:28px 7% 25px;display:flex;flex-direction:column;color:#182a38}.hero::before{background-image:url('assets/sky-sea.png');background-position:center 55%;filter:saturate(.78)}.hero::after{background:linear-gradient(180deg,#f3f0e8e8 0%,#f3f0e8a8 31%,#dce4e582 54%,#18374a8f 100%)}.hero-kicker{display:flex;justify-content:space-between;gap:12px;font-size:10px;letter-spacing:.14em}.hero-kicker span:last-child{display:none}.hero h1{font:400 clamp(80px,23cqw,99px)/.84 var(--serif);letter-spacing:-.06em;text-align:center;margin:60px -3% 0}.hero h1 em{display:block;color:var(--ink)}.portrait-stage{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:15px -2% 0;padding-bottom:44px;align-items:start}.portrait{min-width:0;position:relative}.portrait-one{margin-top:28px;transform:rotate(-4deg)}.portrait-two{transform:rotate(2deg)}.portrait-three{margin-top:45px;transform:rotate(-2deg)}.portrait-media{aspect-ratio:2/3;overflow:hidden;background:#d9d9d2}.portrait figcaption{padding-top:7px;font-size:9px;letter-spacing:.08em}.handnote{position:absolute;right:2px;bottom:0;color:#f3eee3;font-family:var(--mincho);font-size:15px;transform:rotate(-5deg)}.hero.has-people h1{margin-top:35px}.hero-bottom{margin-top:auto;padding-top:40px;display:flex;align-items:end;justify-content:space-between;gap:12px;color:#f8f4eb}.hero-bottom p{font:14px/2 var(--mincho);letter-spacing:.05em}.hero-bottom a{font-size:10px;letter-spacing:.1em;text-align:right}.hero-bottom a span{display:block;font-size:23px}.draft-note{margin-top:26px;color:#f8f4ebc9;font-size:9px;line-height:1.6;letter-spacing:.04em}.index{margin:20px 7%;border-block:1px solid var(--ink);display:grid;grid-template-columns:1fr 1fr}.index a{display:flex;align-items:center;gap:10px;padding:13px 0;font-size:12px}.index span{font:italic 17px var(--serif);color:#876b25}.section{padding:72px 8%}.eyebrow{margin-bottom:32px;font-size:10px;letter-spacing:.18em}.prologue{min-height:920px}.prologue::before{background-image:url('assets/sky-sea.png');background-position:center 30%}.prologue::after{background:linear-gradient(180deg,#f2efe8b8,#f2efe8f2 45%,#f2efe8de)}.road-photo{width:88%;margin:0 0 42px 6%;transform:rotate(-4deg);position:relative}.road-photo img{aspect-ratio:4/3}.road-photo figcaption{margin-top:9px;color:var(--rose);font:italic 18px var(--serif);text-align:right}.prologue h2{font:500 24px/1.95 var(--mincho);letter-spacing:.07em}.copy{margin-top:28px;font:15px/2.15 var(--mincho)}.copy p+p{margin-top:22px}.margin-note{display:block;margin-top:35px;color:var(--rose);font:italic 25px var(--serif);text-align:right}.playlist{min-height:880px;color:#172b37}.playlist::before{background-image:url('assets/cassette.png');background-position:center bottom}.playlist::after{background:linear-gradient(180deg,#c4a755f2 0%,#c4a755dd 46%,#263a4799 100%)}.playlist-heading h2{font:400 44px/1.04 var(--serif);letter-spacing:-.035em}.playlist-heading h2 em{font-size:40px}.playlist-heading p{margin-top:22px;font-size:13px}.services{display:grid;gap:11px;margin-top:31px}.service{display:grid;grid-template-columns:25px 1fr auto;gap:10px;align-items:center;padding:15px 17px;border-radius:4px;background:#315c60;color:#fff;font:22px var(--serif);box-shadow:0 8px 24px #26323b19}.service:nth-child(2){background:#9f5a3d}.service:nth-child(3){background:#a86973}.service-number{font-size:13px;opacity:.85}.service-state{font:12px var(--sans)}.service-note{margin-top:15px;font-size:10px}.playlist-script{position:absolute;right:8%;bottom:45px;color:#fff;font:italic 27px/1.25 var(--serif);text-align:right;transform:rotate(-7deg);text-shadow:0 2px 10px #152b3e}.memories{background:var(--paper)}.memories h2{font:500 27px/1.6 var(--mincho)}.memories h2 em{font:inherit}.memories-head>p{margin-top:16px;font-size:12px}.sample-label{margin:27px 0;font-size:10px;color:#5c6570}.chapter-media,.track-media{position:relative;overflow:hidden;aspect-ratio:var(--media-ratio);background:#dedbd3}.chapter-media{margin:0 0 42px}.track{display:grid;grid-template-columns:47px minmax(0,1fr);gap:14px;padding:31px 0 42px;border-top:1px solid var(--line)}.track-number span{font-size:9px;letter-spacing:.1em}.track-number strong{display:block;font:italic 43px var(--serif);color:var(--mustard)}.track:nth-child(2) .track-number strong{color:var(--rose)}.track-media{margin-bottom:20px;border-radius:2px}.member{margin:5px 0 13px;font-size:10px;letter-spacing:.14em}.track h3{font:500 20px/1.65 var(--mincho);overflow-wrap:anywhere}.artist{margin-top:3px;font-size:12px}.when{margin:21px 0 15px;padding:10px 0;border-block:1px solid var(--line);font-size:12px}.memory{font:14px/2.05 var(--mincho);white-space:pre-line;overflow-wrap:anywhere}.media-image{object-fit:cover}.motion-toggle{position:absolute;right:9px;bottom:9px;z-index:5;padding:6px 10px;border:1px solid #fff9;border-radius:100px;background:#172c39cc;color:#fff;font-size:10px;line-height:1.3;cursor:pointer}.interlude{min-height:650px;padding:75px 8%;background:var(--ink);color:var(--paper)}.interlude::before{background-image:url('assets/road.png');background-position:center}.interlude::after{background:#102c3bdd}.section-media--background{position:absolute;inset:0;z-index:-2}.section-media--background img{object-fit:cover}.section-media--background::after{content:'';position:absolute;inset:0;background:#0d2a3de2}.section-media--background .motion-toggle{z-index:4}.interlude-copy{position:relative;z-index:1}.interlude-copy>span{display:block;color:#f0eadc;font-size:9px;letter-spacing:.2em}.interlude p{margin:34px 0 62px;color:#f6f0e5;font:18px/2.25 var(--mincho);letter-spacing:.07em}.tape-side{width:130px;margin:0 auto 40px;padding-top:22px;border-top:1px solid #f2eee36b;text-align:center;font-family:var(--serif);letter-spacing:.16em}.tape-side strong{display:block;font-size:35px;font-weight:400;letter-spacing:0}.interlude-copy>span:last-child{text-align:center;line-height:2}.letter{min-height:820px}.letter::before{background-image:url('assets/sky-sea.png');background-position:center 62%}.letter::after{background:linear-gradient(180deg,#f2efe8f3 0%,#f2efe8dc 52%,#d9e2e1a8 100%)}.letter h2{margin:45px 0 53px;font:400 clamp(70px,21cqw,90px)/.93 var(--serif);letter-spacing:-.055em;transform:rotate(-4deg)}.letter h2 em{color:var(--rose)}.letter .copy{margin-top:0}.letter .copy br{display:none}.sign{margin-top:33px;color:#8a535d}.back-top{display:inline-block;margin-top:35px;padding:10px 0;border-bottom:1px solid var(--ink);font-size:12px}.back-top span{margin-left:22px}.ending{min-height:680px;padding:70px 8%;display:flex;flex-direction:column;justify-content:flex-end;color:#172c39}.ending::before{background-image:url('assets/tide.png');background-position:center}.ending::after{background:linear-gradient(180deg,#f2efe8e8 0%,#f2efe894 34%,#d6e2e3a0 68%,#f2efe8db 100%)}.ending-copy p{font:15px/2.15 var(--mincho)}.ending-copy>span{display:block;margin-top:55px;color:var(--rose);font:italic 48px/.95 var(--serif);text-align:right;transform:rotate(-6deg)}.ending-replay{align-self:center;margin-top:65px;padding:8px 0;border-bottom:1px solid;font-size:11px;letter-spacing:.12em}footer{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:21px 7%;border-top:1px solid var(--line);font-size:9px;letter-spacing:.08em}footer span:first-child{font:italic 19px var(--serif);letter-spacing:0}.will-reveal{opacity:0;transform:translateY(18px);transition:opacity .75s ease,transform .75s ease}.is-visible{opacity:1;transform:none}

@media(min-width:1024px){body{background:linear-gradient(90deg,#ece9e1,#d9d7d0 48%,#e7e3da)}.site-shell{display:grid;grid-template-columns:minmax(0,1fr) 390px minmax(0,1fr);align-items:start}.site-column{grid-column:2;width:390px;max-width:none;margin:0;box-shadow:0 0 0 1px #23313b2b,0 0 55px #23313b1d}.desktop-hero,.desktop-menu{display:flex;position:sticky;top:0;height:100vh;min-width:0}.desktop-hero{grid-column:1;grid-row:1;align-items:center;justify-content:center;padding:clamp(30px,5vw,85px)}.desktop-hero__inner{width:100%;max-width:360px}.desktop-hero p,.desktop-hero span{display:block;font-size:9px;letter-spacing:.2em}.desktop-hero h2{margin:32px 0 38px;font:400 clamp(58px,6.3vw,105px)/.83 var(--serif);letter-spacing:-.06em}.desktop-hero h2 em{color:var(--rose)}.desktop-menu{grid-column:3;grid-row:1;align-items:center;padding:40px clamp(28px,4.5vw,72px)}.desktop-menu nav{width:100%;max-width:330px;border-top:1px solid var(--line)}.desktop-menu a{position:relative;display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line);font:13px/1.5 var(--serif);transition:color .2s,padding-left .2s}.desktop-menu a::after{content:'';position:absolute;left:0;bottom:-1px;width:0;height:2px;background:var(--rose);transition:width .25s}.desktop-menu a span{font-size:10px;color:#7d6a34}.desktop-menu a.is-current{padding-left:7px;color:var(--rose)}.desktop-menu a.is-current::after{width:100%}.hero-kicker span:last-child{display:none}}

@media(max-width:374px){.hero{min-height:720px}.hero h1{font-size:78px}.section{padding-inline:7%}.service{font-size:20px}.track{grid-template-columns:43px minmax(0,1fr);gap:10px}.track-number strong{font-size:39px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.will-reveal{opacity:1;transform:none;transition:none}.desktop-menu a,.desktop-menu a::after{transition:none}}

/* v0.4: PLAY THE MEMORIES integrates the playlist and personal tracks. */
.media-video{display:block;width:100%;height:100%;object-fit:cover}
.section-media--background .media-video{position:absolute;inset:0}
.section-media--background img,.section-media--background video{object-fit:cover}
.interlude.has-background-media::before{background-image:none}
.interlude.has-background-media::after{background:transparent}
.interlude.has-background-media .section-media--background::after{background:linear-gradient(180deg,#0d2a3dbc 0%,#0d2a3d8f 46%,#0d2a3db5 100%)}
.playlist{min-height:0;padding-bottom:70px}.playlist-heading{margin-bottom:28px}.services{display:flex;justify-content:center;align-items:flex-start;gap:20px;margin-top:0}.service{display:grid!important;grid-template-columns:none!important;gap:5px!important;justify-items:center;padding:0!important;background:transparent!important;box-shadow:none!important;color:var(--ink)!important;font:inherit!important;text-align:center}.service-circle{display:grid;place-items:center;width:68px;height:68px;border-radius:50%;color:var(--paper);transition:transform .2s ease,box-shadow .2s ease}.service:hover .service-circle{transform:translateY(-3px);box-shadow:0 9px 17px #172c3930}.service--rose .service-circle{background:var(--rose)}.service--mustard .service-circle{background:var(--mustard)}.service--navy .service-circle{background:#315c78}.service-logo{width:35px;height:35px}.service-name{font:12px/1.3 var(--serif)}.service-state{font:9px/1.2 var(--sans)!important;color:#25333d!important}.service-note{margin:16px 0 0;text-align:center;font-size:10px}.track-player{position:relative;margin:32px -8% 0;padding:0 8% 28px;background:#f2efe8df;box-shadow:0 0 0 1px #f2efe85c,0 16px 38px #172c391c}.track-player .sample-label{padding-top:20px;margin:0 0 2px}.carousel-window{margin:0 -8%;overflow:hidden;outline:none}.track-carousel__list{display:flex;gap:13px;overflow-x:auto;overscroll-behavior-x:contain;padding:18px calc(50% - 111px) 20px;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}.track-carousel__list::-webkit-scrollbar{display:none}.cover-card{flex:0 0 222px;scroll-snap-align:center;border:0;background:transparent;padding:0;cursor:pointer;opacity:.56;transform:scale(.86);transition:opacity .28s ease,transform .28s ease}.cover-card.is-selected{opacity:1;transform:scale(1)}.cover-card:focus-visible{outline:3px solid var(--rose);outline-offset:5px}.cover-art{position:relative;aspect-ratio:1;overflow:hidden;background:#24323b;box-shadow:0 10px 22px #172c3938}.cover-image{width:100%;height:100%;object-fit:cover}.cover-fallback{display:flex;flex-direction:column;justify-content:space-between;width:100%;height:100%;padding:16px;color:var(--paper);text-align:left}.cover-fallback--0{background:linear-gradient(145deg,#385d70,#193141)}.cover-fallback--1{background:linear-gradient(145deg,#c19e4a,#806421)}.cover-fallback--2{background:linear-gradient(145deg,#b4767f,#70434e)}.cover-track{font:10px/1.2 var(--sans);letter-spacing:.14em}.cover-song{font:400 25px/1.12 var(--mincho);overflow-wrap:anywhere}.cover-motion{position:absolute;right:9px;bottom:9px;padding:5px 9px;border:1px solid #fff9;border-radius:20px;background:#172c39cc;color:#fff;font-size:10px;cursor:pointer}.carousel-controls{display:flex;align-items:center;justify-content:center;gap:22px;margin:3px 0 19px}.carousel-controls p{min-width:56px;text-align:center;font:13px var(--serif);letter-spacing:.08em}.carousel-arrow{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--ink);border-radius:50%;background:transparent;color:var(--ink);font-size:18px;cursor:pointer}.carousel-arrow:disabled{opacity:.25;cursor:default}.track-detail{min-height:240px;padding:22px;background:#f7f4eed9;border-top:1px solid var(--line);font-family:var(--mincho)}.detail-number{font:11px var(--serif);letter-spacing:.13em;color:#927523}.track-detail h3{margin-top:8px;font:500 21px/1.55 var(--mincho);overflow-wrap:anywhere}.detail-artist{font:13px/1.6 var(--sans);margin-top:3px}.detail-member{margin-top:17px;font:10px/1.4 var(--sans);letter-spacing:.14em}.detail-when{margin-top:14px;padding:9px 0;border-block:1px solid var(--line);font:12px/1.6 var(--sans)}.detail-memory{margin-top:14px;font:14px/2.05 var(--mincho);white-space:pre-line;overflow-wrap:anywhere}.carousel-empty{padding:28px 0;text-align:center;font:14px var(--mincho)}.playlist-script{position:static;margin:25px 0 0;color:#f8f4eb;font-size:24px;text-align:right;text-shadow:0 2px 10px #152b3e}.letter{min-height:620px;padding-bottom:70px}.ending-copy>.ending-sign{margin-top:25px;color:#8a535d;font:15px/2 var(--mincho)}.ending-copy>span{margin-top:42px}
@media(max-width:374px){.services{gap:14px}.service-circle{width:62px;height:62px}.service-logo{width:31px;height:31px}.track-carousel__list{padding-inline:calc(50% - 102px)}.cover-card{flex-basis:204px}.cover-song{font-size:22px}}
@media(prefers-reduced-motion:reduce){.service-circle,.cover-card{transition:none}}

/* v0.6: the letter title moves to ENDING; INTERLUDE returns to video. */
.ending{min-height:900px;justify-content:flex-end}
.ending-letter{position:absolute;z-index:1;top:72px;left:8%;right:8%}
.ending-letter>span{display:block;font-size:9px;letter-spacing:.2em}
.ending-letter h2{margin:34px 0 0;font:400 clamp(70px,21cqw,90px)/.93 var(--serif);letter-spacing:-.055em;transform:rotate(-4deg)}
.ending-letter h2 em{color:var(--rose)}
.ending-copy .ending-lead{margin-bottom:28px}

/* v0.7: fixed cinema frame, slow dissolves, warm film color and light leaks. */
.portrait-stage {
  position: relative;
  display: block;
  height: 468px;
  margin: 20px -3% 0;
  padding: 0;
  isolation: isolate;
}

.portrait {
  --flare-x: 10%;
  --flare-y: 8%;
  position: absolute;
  top: 7px;
  right: 0;
  bottom: auto;
  left: 0;
  z-index: 1;
  width: 82%;
  max-width: 282px;
  min-width: 0;
  margin: 0 auto;
  opacity: 0;
  pointer-events: none;
  transform: none;
  transition: opacity 2s ease-in-out;
}

.portrait-one {
  --flare-x: 8%;
  --flare-y: 10%;
}

.portrait-two {
  --flare-x: 92%;
  --flare-y: 26%;
}

.portrait-three {
  --flare-x: 48%;
  --flare-y: -4%;
}

.portrait.is-active {
  z-index: 2;
  opacity: 1;
  transform: none;
}

.portrait-media {
  position: relative;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: #d9d9d2;
  border: 7px solid #172c39;
  box-shadow: 0 18px 38px #172c3959, 0 0 0 1px #0c1c26;
}

.portrait-media::before,
.portrait-media::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.portrait-media::before {
  background-image:
    radial-gradient(circle at 17% 11%, #f7e4c8 0 1px, transparent 1.5px),
    radial-gradient(circle at 73% 64%, #172c39 0 1px, transparent 1.4px);
  background-size: 35px 35px, 47px 47px;
  opacity: .065;
  mix-blend-mode: overlay;
  animation: film-grain .7s steps(1) infinite;
}

.portrait-media::after {
  background:
    radial-gradient(ellipse 78% 58% at var(--flare-x) var(--flare-y), #fff6dca8 0%, #ffc48a52 25%, transparent 64%),
    radial-gradient(circle at var(--flare-x) var(--flare-y), #fffdf0a6 0%, transparent 19%),
    linear-gradient(108deg, #e7845730 0%, transparent 31%);
  opacity: .7;
  mix-blend-mode: screen;
}

.portrait-media img {
  filter: saturate(1.03) sepia(.09) contrast(.96) brightness(1.035);
  transform: none;
}

.portrait figcaption {
  display: none;
}

.portrait-progress {
  position: absolute;
  bottom: 8px;
  left: 50%;
  z-index: 4;
  display: flex;
  gap: 7px;
  transform: translateX(-50%);
}

.portrait-progress span {
  width: 17px;
  height: 2px;
  background: #f2efe866;
  transition: background-color .35s ease, width .35s ease;
}

.portrait-progress span.is-active {
  width: 28px;
  background: var(--paper);
}

/* HEROは自動再生のまま、閲覧者向けの操作ボタンを表示しない。 */
.portrait-stage .motion-toggle,
.portrait-stage .portrait-pause {
  display: none !important;
}

.handnote {
  right: 1%;
  bottom: 40px;
  z-index: 4;
  font-size: 14px;
  text-shadow: 0 2px 9px #173044c9;
}

.hero-bottom {
  padding-top: 27px;
}

@keyframes film-grain {
  0% { background-position: 0 0, 0 0; }
  25% { background-position: 11px -7px, -13px 9px; }
  50% { background-position: -8px 13px, 15px -5px; }
  75% { background-position: 7px 5px, -6px -12px; }
}

@media(max-width:374px) {
  .portrait-stage {
    height: 435px;
  }

  .portrait {
    width: 81%;
  }
}

@media(prefers-reduced-motion:reduce) {
  .portrait {
    transition: none;
  }

  .portrait-media::before {
    animation: none;
  }

  .portrait-progress span {
    transition: none;
  }
}

/* The same unhurried reveal rhythm carries through the page. */
.will-reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 1.4s ease, transform 1.4s cubic-bezier(.215, .61, .355, 1);
}

.will-reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media(prefers-reduced-motion:reduce) {
  .will-reveal,
  .will-reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Handnote typography studies. Default: flowing handwritten script. */
:root[data-handnote="script"] .handnote {
  right: -2%;
  bottom: 25px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #f7efe2;
  font-family: "Segoe Script", "Snell Roundhand", "Bradley Hand", "Brush Script MT", cursive;
  font-size: 34px;
  font-weight: 400;
  font-style: italic;
  line-height: 1;
  letter-spacing: .015em;
  text-shadow: 0 2px 12px #102b3bd9;
  box-shadow: none;
  transform: rotate(-6deg);
}

/* Hero lead typography studies. */
:root[data-lead="ryumin"] .hero-bottom p {
  font-family: "A-OTF Ryumin Pr6N", "A-OTF Ryumin Pro", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 400;
  letter-spacing: .09em;
}

:root[data-lead="kozuka"] .hero-bottom p {
  font-family: "Kozuka Mincho Pro", "Kozuka Mincho Pr6N", "BIZ UDPMincho", "Yu Mincho", serif;
  font-weight: 400;
  letter-spacing: .055em;
}

/* DVD chapter-menu selection treatment for the mobile index. */
.index a {
  position: relative;
  isolation: isolate;
  transition: color .18s ease, background-color .18s ease, padding-left .18s ease, box-shadow .18s ease;
}

.index a::before {
  content: "▶";
  position: absolute;
  left: 8px;
  top: 50%;
  z-index: 1;
  color: #d7b558;
  font-size: 8px;
  line-height: 1;
  opacity: 0;
  transform: translate(-5px, -50%);
  filter: drop-shadow(0 0 3px #e6c66c99);
  transition: opacity .18s ease, transform .18s ease;
}

.index a:focus-visible {
  padding-left: 24px;
  color: #f7f1e6;
  text-decoration: none;
  outline: 1px solid #d7b558;
  outline-offset: -1px;
  background:
    repeating-linear-gradient(0deg, #ffffff05 0 1px, transparent 1px 4px),
    linear-gradient(180deg, #314955, #172d38 48%, #203945 52%, #132832);
  box-shadow: inset 0 0 15px #071923b8, 0 0 0 1px #23313b33;
}

.index a:focus-visible::before {
  opacity: 1;
  transform: translate(0, -50%);
}

.index a:focus-visible span {
  color: #d7b558;
}

@media (hover: hover) {
  .index a:hover {
    padding-left: 24px;
    color: inherit;
    text-decoration: none;
    background: transparent;
    box-shadow: none;
  }

  .index a:hover::before {
    opacity: 1;
    transform: translate(0, -50%);
  }

  .index a:hover span {
    color: #d7b558;
  }
}

@media (prefers-reduced-motion: reduce) {
  .index a,
  .index a::before {
    transition: none;
  }
}

.service-name--other {
  white-space: nowrap;
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: .045em;
}

a:hover {
  text-decoration: none;
}