/* OKABE MISHO — proposal v3 */

:root {
  --bg: #F5F1EA;
  --bg2: #EBE7DF;
  --text: #111111;
  --ink: #1A1A1A;
  --ivory: #F5F1EA;
  --muted: rgba(17, 17, 17, 0.56);
  --line: rgba(17, 17, 17, 0.14);
  --on-ink-muted: rgba(245, 241, 234, 0.66);
  --on-ink-line: rgba(245, 241, 234, 0.24);
  /* the grey of the large surfaces (ABOUT, the passing sheet, the footer, the chosen service).
     Misho chose it: beige, grey and only a little black */
  --wash: #C4C0BA;
  --on-wash-muted: rgba(17, 17, 17, 0.64);
  --mincho: 'Shippori Mincho', 'Yu Mincho', 'YuMincho', 'Hiragino Mincho ProN', serif;
  --gothic: 'Zen Kaku Gothic New', 'Hiragino Sans', 'Yu Gothic', 'Meiryo', sans-serif;
  --latin: 'Cormorant Garamond', 'Times New Roman', serif;
  --gutter: clamp(20px, 4.2vw, 56px);
  --ease: cubic-bezier(0.7, 0, 0.2, 1);
  /* height of the soft edge of the grey sections: the grey fades into the paper, with no brush mark */
  --edge-h: clamp(90px, 12vw, 170px);
  /* the fade itself, eased at both ends so it shows no line where it starts or stops */
  --fade: var(--wash) 0%, color-mix(in srgb, var(--wash) 93%, transparent) 15%, color-mix(in srgb, var(--wash) 78%, transparent) 30%,
    color-mix(in srgb, var(--wash) 50%, transparent) 50%, color-mix(in srgb, var(--wash) 22%, transparent) 70%,
    color-mix(in srgb, var(--wash) 7%, transparent) 85%, transparent 100%;
}

*, *::before, *::after { box-sizing: border-box; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--gothic);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.95;
  letter-spacing: 0.04em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; letter-spacing: inherit; }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }
:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
.sp { display: none; }

.skip {
  position: absolute;
  left: -9999px;
  top: 16px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--ivory);
}
.skip:focus { left: 16px; }

/* ---------- ink & paper ---------- */

/* a stage stays on screen while its section scrolls; the brush is written on its canvas */
.stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  /* the blend of the text inside needs paper behind it */
  background: var(--bg);
}
/* under the name: the drop of ink that opens the page, and the black it spreads into */
.drop-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.grain {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.075;
  mix-blend-mode: multiply;
  background-size: 220px;
}

/* moving inside the page: a grey sheet with the same soft edges passes over the screen (under the header) */
.veil {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 100vh;
  z-index: 38;
  background: var(--wash);
  visibility: hidden;
  pointer-events: none;
}
.veil.is-on { visibility: visible; pointer-events: auto; }
.veil::before, .veil::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: var(--edge-h);
}
.veil::before { bottom: calc(100% - 1px); background: linear-gradient(to top, var(--fade)); }
.veil::after { top: calc(100% - 1px); background: linear-gradient(to bottom, var(--fade)); }
/* a section reached through the menu takes the focus without drawing a frame around itself */
section[tabindex='-1']:focus { outline: none; }

.layer { position: relative; z-index: 2; }
.wrap { max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- common type ---------- */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--latin);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}
.eyebrow span {
  font-family: var(--gothic);
  font-size: 11px;
  letter-spacing: 0.24em;
  opacity: 0.6;
}

.section-title {
  margin-top: 28px;
  font-family: var(--mincho);
  font-size: clamp(30px, 3.5vw, 52px);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 0.14em;
}

.muted { color: var(--muted); }
.draft-note { font-size: 11px; letter-spacing: 0.08em; opacity: 0.6; }

.text-link {
  display: inline-flex;
  gap: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid currentColor;
  font-family: var(--mincho);
  font-size: 15px;
  letter-spacing: 0.12em;
}
.text-link span, .submit span, .service-ask span { transition: transform 0.5s var(--ease); display: inline-block; }
.text-link:hover span, .submit:hover span, .service-ask:hover span { transform: translateX(6px); }

.reveal { opacity: 0; transform: translateY(30px); transition: opacity 1.2s ease, transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1); }
.reveal.in, .no-js .reveal, .ink-static .reveal { opacity: 1; transform: none; }

/* ---------- header ---------- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 36px;
  padding: 26px var(--gutter);
  color: var(--ivory);
  mix-blend-mode: difference;
  transition: transform 0.6s var(--ease);
}
.header-hidden .site-header { transform: translateY(-110%); }
.site-header:focus-within { transform: none; }
.brand-ja {
  font-family: var(--mincho);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.34em;
}
.nav { display: flex; gap: 34px; margin-left: auto; }
.nav a {
  position: relative;
  font-family: var(--latin);
  font-size: 16px;
  letter-spacing: 0.1em;
}
.nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s var(--ease);
}
.nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.header-cta {
  padding: 8px 20px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 12.5px;
  letter-spacing: 0.14em;
  transition: letter-spacing 0.5s var(--ease);
}
.header-cta:hover { letter-spacing: 0.22em; }
.menu-btn {
  display: none;
  padding: 8px 0;
  border: 0;
  background: none;
  font-family: var(--latin);
  font-size: 16px;
  letter-spacing: 0.14em;
  cursor: pointer;
}

/* ---------- menu (mobile) ---------- */

.menu {
  position: fixed;
  inset: 0;
  z-index: 35;
  display: flex;
  align-items: center;
  padding: 96px var(--gutter) 48px;
  background: var(--wash);
  color: var(--text);
  clip-path: circle(0 at calc(100% - 44px) 44px);
  transition: clip-path 0.7s var(--ease);
}
.menu.open { clip-path: circle(150% at calc(100% - 44px) 44px); }
.menu nav { width: 100%; }
.menu a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--mincho);
  font-size: 22px;
  letter-spacing: 0.16em;
}
.menu a span {
  order: 2;
  font-family: var(--latin);
  font-size: 14px;
  font-style: italic;
  color: var(--on-wash-muted);
}
.menu-open { overflow: hidden; }

/* ---------- TOP ---------- */

/* the opening: a drop of ink → it spreads and fades to a pale grey → back to the paper,
   and in the centre her seal, with 「Japanese Calligrapher」 and the name under it (her Canva design, 2026.11) */
/* the name stays while the grey rises over it like a curtain */
.prologue { height: 200vh; }
.ink-static .prologue, .no-js .prologue { height: 100vh; }
.hero-inner {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 var(--gutter);
  text-align: center;
  /* inverted against the ink as it passes underneath */
  color: var(--ivory);
  mix-blend-mode: difference;
}
.hero-name { font-weight: 400; display: flex; flex-direction: column; align-items: center; }
/* in the middle of the screen; the fade of the grey below the first screen does not move it */
.ink-static .hero-inner { padding-bottom: var(--edge-h); }
/* once the ink has fallen, the seal, then the title and the name come up slowly out of the paper, one after
   the other: a slow fade, as she asked (2026.11), without the press of a stamp */
.js:not(.ink-static) .hero-name > span {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 3s cubic-bezier(0.4, 0, 0.3, 1), transform 3s cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* (the same weight as the rule above, so that the delays are not lost under it: in v40 they were) */
.js:not(.ink-static) .hero-name > .hero-seal { transform: none; }
.js:not(.ink-static) .hero-name > .hero-kicker { transition-delay: 0.9s; }
.js:not(.ink-static) .hero-name > .hero-en { transition-delay: 1.5s; }
.js .is-ready .hero-name > span { opacity: 1; transform: none; }
/* her 落款印. The picture is black on clear; turned light here, so that the blend shows it dark on the paper */
.hero-seal {
  display: block;
  width: clamp(112px, 21vh, 210px);
  margin-bottom: clamp(30px, 6vh, 60px);
}
.hero-seal img { width: 100%; height: auto; filter: invert(0.96); }
.hero-kicker {
  display: block;
  margin-bottom: 0.4em;
  font-family: var(--latin);
  font-size: clamp(18px, 2.2vw, 36px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.1em;
  word-spacing: 0.2em;
}
.hero-en {
  display: block;
  font-family: var(--latin);
  font-size: clamp(40px, 4.4vw, 76px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.08em;
  word-spacing: 0.12em;
  /* the letter spacing would push it off centre */
  margin-right: -0.08em;
}
/* not shown in her design; kept for search engines and screen readers */
.hero-ja {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- ABOUT ---------- */

/* ABOUT is a grey wash; it rises and leaves with a soft edge, the grey fading into the paper (no brush mark, as she asked) */
/* only the faint start of the fade shows at the bottom of the first screen */
.about { position: relative; height: 230vh; margin-top: calc(-100vh + var(--edge-h) * 0.5); color: var(--text); background: var(--wash); }
.about::before, .about::after, .site-footer::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: var(--edge-h);
  pointer-events: none;
}
/* it arrives and leaves with the same fade */
.about::before, .site-footer::before { bottom: calc(100% - 1px); background: linear-gradient(to top, var(--fade)); }
.about::after { top: calc(100% - 1px); z-index: 1; background: linear-gradient(to bottom, var(--fade)); }
.about-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 6vw;
  padding: 120px calc(var(--gutter) + 6vw) 72px;
}
.about-meta { align-self: end; display: grid; gap: 40px; color: var(--on-wash-muted); }
.about-words { display: flex; gap: 40px; }
.about-words li { display: grid; gap: 4px; white-space: nowrap; }
.about-words b {
  font-family: var(--mincho);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--text);
}
.about-words span { font-family: var(--latin); font-size: 15px; font-style: italic; }

.about-text {
  writing-mode: vertical-rl;
  height: min(68vh, 640px);
  font-family: var(--mincho);
}
.about-title {
  margin-left: 0.9em;
  /* the largest size; js/main.js (fitAbout) makes it smaller where a line would break or the text would run off
     the screen. Smaller and closer set than before, as she asked (2026.11; was clamp(30px, 3.4vw, 50px), 0.22em) */
  font-size: clamp(26px, 2.9vw, 42px);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 0.12em;
}
.about-title .ln { display: block; }
.about-text p.ln {
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 2.7;
  letter-spacing: 0.32em;
}
/* an empty line in js/content.js: the space of one line between paragraphs */
.about-text p.ln:empty { block-size: 2.7em; }
.ln {
  clip-path: inset(0 0 calc((1 - var(--w, 0)) * 100%) 0);
  opacity: calc(0.25 + var(--w, 0) * 0.75);
}
.ink-static .about, .no-js .about { height: auto; margin-top: 0; background: var(--wash); }
.ink-static .about-sticky, .no-js .about-sticky { position: relative; min-height: 100vh; opacity: 1; }
.no-js .ln { clip-path: none; opacity: 1; }

/* ---------- WORKS ---------- */

/* her design (2026.11): the title on the left, her two lines on the right, and one column per category.
   The works start below the fading edge of the grey, not on top of it */
.works { margin-top: var(--edge-h); }
.works-inner { padding-top: 120px; padding-bottom: 110px; }
.works-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 44px;
}
.works-title {
  margin-top: 18px;
  font-family: var(--mincho);
  font-size: clamp(48px, 6.2vw, 96px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.works-copy {
  margin-bottom: 0.4em;
  font-family: var(--mincho);
  font-size: 15px;
  line-height: 2.1;
  letter-spacing: 0.14em;
}
.works-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  align-items: start;
}
.works-cat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 92px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(17, 17, 17, 0.78);
  text-align: center;
  font-weight: 400;
}
.works-cat-ja { font-family: var(--mincho); font-size: 14px; letter-spacing: 0.1em; line-height: 1.4; }
.works-cat-en { font-family: var(--latin); font-size: 22px; font-style: italic; line-height: 1; white-space: nowrap; }
/* a place kept for a work to come: the size of a tile and its caption, so the rows still line up */
.works-empty {
  display: grid;
  place-items: center;
  aspect-ratio: 1.28;
  margin: 0 0 calc(22px + var(--cap-h, 32px));
  border: 1px dashed var(--line);
  font-family: var(--mincho);
  font-size: 13px;
  letter-spacing: 0.3em;
  color: var(--muted);
}
.sample-note {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 11.5px;
  line-height: 1.8;
  color: var(--muted);
}
.sample-note b {
  display: block;
  font-family: var(--latin);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text);
}

.work { position: relative; margin-bottom: 22px; }
.work-open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
/* every work is shown whole (never cropped) on a slightly darker paper. All the tiles are the same size,
   as in her design, so the rows line up and a tall scroll does not stretch its column */
.work-frame {
  display: block;
  aspect-ratio: 1.28;
  overflow: hidden;
  background: #ECE7DE;
}
/* on the page the works are in black and white; enlarged, they show their colour */
.work-frame img {
  width: 100%;
  height: 100%;
  padding: 7%;
  object-fit: contain;
  filter: grayscale(1);
  transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.5s ease;
}
.work-frame img:not([src]) { visibility: hidden; }
/* under the pointer a little of the colour comes back, as in her design: a hint of what a click shows */
/* only with a real pointer: on a phone a tap would leave the tile half in colour after closing the enlarged view */
@media (hover: hover) { .work-open:hover img { transform: scale(1.035); filter: grayscale(0.65); } }
.work-open:focus-visible img { transform: scale(1.035); filter: grayscale(0.65); }
.work figcaption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding-top: 10px;
}
.work-title { min-width: 0; font-family: var(--mincho); font-size: 13.5px; line-height: 1.6; letter-spacing: 0.08em; }
/* the prize the work received, in the red of a seal */
.work-award { flex: none; font-family: var(--mincho); font-size: 12px; letter-spacing: 0.12em; color: #A8432C; }
.sample-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 3px 10px;
  background: rgba(245, 241, 234, 0.88);
  font-family: var(--latin);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  pointer-events: none;
}
@media (max-width: 900px) {
  .works-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 16px; }
  .works-cat { height: 78px; }
  .works-cat-en { font-size: 19px; }
}

/* ---------- NEWS：案内はがき ---------- */

.news { background: var(--bg2); padding: 140px 0; }
/* the heading on the left, the postcards beside it */
.news-inner { display: grid; grid-template-columns: minmax(300px, 1fr) auto; gap: 5vw; align-items: center; }
.news-head { display: grid; gap: 22px; justify-items: start; max-width: 440px; }
.news-head .section-title { margin: 6px 0 0; font-size: clamp(30px, 3.1vw, 44px); line-height: 1.5; white-space: nowrap; }
.news-lead { font-size: 14.5px; }
.news-head .sample-note { margin-top: 6px; }
/* each piece of news is a postcard, like a small poster. As she drew it (2026.11): the photograph is the main
   thing and is never cut, so the card takes the shape of the photo; the theme and the title run down a narrow
   strip at the right edge; the date and 「読む →」 at the foot. The newest on the right */
.dm-list { display: flex; flex-direction: row-reverse; justify-content: center; align-items: flex-start; gap: 26px; }
.dm {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: 10px;
  width: clamp(220px, 19vw, 270px);
  padding: 16px 12px 14px 16px;
  background: var(--bg);
  box-shadow: 0 1px 2px rgba(17, 17, 17, 0.05), 0 24px 44px -30px rgba(17, 17, 17, 0.45);
}
.dm-list li:nth-child(even) { margin-top: 56px; }
/* a photograph shorter than the title beside it sits in the middle of the card (her request, 2026.11) */
.dm-photo { grid-column: 1; grid-row: 1; align-self: center; background: var(--bg2); font-size: 11px; letter-spacing: 0.3em; color: var(--muted); }
/* the whole photograph, at its own proportions; a very tall one is shown whole inside a limit */
.dm-photo img { display: block; width: 100%; height: auto; max-height: 380px; object-fit: contain; filter: grayscale(0.15); }
/* a card still without its photograph keeps the place of an upright one */
.dm-photo > span { display: grid; place-items: center; aspect-ratio: 3 / 4; }
/* one thin line down the right edge: the theme, small and grey, then the title */
.dm-text { grid-column: 2; grid-row: 1; min-height: 0; padding-top: 2px; writing-mode: vertical-rl; line-height: 1.5; }
.dm-text > * { display: inline; }
.dm-type { margin-inline-end: 0.9em; font-family: var(--mincho); font-size: 12px; font-weight: 500; letter-spacing: 0.24em; color: var(--muted); }
.dm-title { font-family: var(--mincho); font-size: 16px; font-weight: 500; letter-spacing: 0.16em; }
.dm-place { margin-block-start: 10px; font-family: var(--mincho); font-size: 12px; letter-spacing: 0.2em; color: var(--muted); }
.dm-date { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); font-family: var(--latin); font-size: 15px; letter-spacing: 0.06em; white-space: nowrap; }
.dm .sample-tag { top: 10px; left: 10px; background: var(--bg); font-size: 10.5px; }
.dm-title button { padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; text-align: inherit; cursor: pointer; }
.dm.has-body { cursor: pointer; transition: transform 0.6s var(--ease); }
.dm.has-body:hover { transform: translateY(-4px); }
.dm-read { font-family: var(--mincho); font-size: 13px; letter-spacing: 0.12em; }
.dm.has-body:hover .dm-read { text-decoration: underline; text-underline-offset: 4px; }
/* a piece of news read in the lightbox */
.lightbox.is-article .lb-figure { max-width: 640px; }
.lightbox.is-article .lb-figure img { max-height: calc(100vh - 420px); }
.lightbox.is-article .lb-desc { display: grid; gap: 22px; justify-items: start; max-width: 580px; font-size: 15px; line-height: 2.2; text-align: left; color: var(--text); }
/* the recommended item: a card with its photo, marked as an advertisement (PR) and linked to the shops */
.lb-item { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 22px; align-items: start; width: 100%; padding: 20px; background: var(--bg2); font-size: 13px; line-height: 1.7; color: var(--muted); }
.lb-item-photo { display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; background: var(--bg); font-size: 11px; letter-spacing: 0.2em; }
.lb-item-photo img { width: 100%; height: 100%; object-fit: cover; box-shadow: none; }
.lb-item-text { display: grid; gap: 6px; justify-items: start; }
.lb-item-kind { font-size: 12px; }
.lb-item-name { font-family: var(--mincho); font-size: 17px; letter-spacing: 0.1em; color: var(--text); }
.lb-item-desc { font-size: 13px; }
.lb-item-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.pill { display: inline-flex; gap: 10px; padding: 9px 22px; border: 1px solid currentColor; border-radius: 999px; font-size: 12.5px; letter-spacing: 0.12em; color: var(--text); white-space: nowrap; transition: background 0.4s, color 0.4s; }
a.pill:hover { background: var(--ink); color: var(--ivory); }
/* in the sample the buttons show where they go, but lead nowhere yet */
.pill.is-sample { border-style: dashed; color: var(--muted); }
.lb-item .pr { margin-right: 10px; padding: 1px 6px; border: 1px solid currentColor; font-family: var(--latin); font-size: 11px; font-weight: 400; letter-spacing: 0.1em; }

/* ---------- SERVICE：お品書き ---------- */

/* no empty space before PROFILE (she asked, 2026.11) */
.service { padding: 170px 0 30px; }
.service-grid { display: grid; grid-template-columns: 4fr 7fr; gap: 6vw; align-items: start; }
.service-side { display: grid; gap: 14px; justify-items: start; max-width: 440px; }
.service-side .section-title { margin: 4px 0 2px; font-size: clamp(28px, 2.7vw, 40px); white-space: nowrap; }
.service-lead { font-size: 13.5px; }
.service-detail {
  display: grid;
  gap: 8px;
  justify-items: start;
  width: 100%;
  margin-top: 8px;
}
/* a photograph of the work for the chosen service */
.detail-photo { position: relative; width: 100%; aspect-ratio: 21 / 9; margin-bottom: 8px; overflow: hidden; background: var(--bg2); }
.detail-photo img { width: 100%; height: 100%; object-fit: cover; }
.detail-no { font-family: var(--mincho); font-size: 13px; letter-spacing: 0.3em; color: var(--muted); }
.service-detail h3 { font-family: var(--mincho); font-size: 24px; font-weight: 500; letter-spacing: 0.14em; }
.service-detail p { font-size: 14px; }
/* a line break written in the text (\n in js/content.js) starts a new line */
.service-detail [data-detail-desc] { white-space: pre-line; }
.service-ask {
  margin-top: 8px;
  padding: 10px 20px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: none;
  font-size: 12.5px;
  letter-spacing: 0.14em;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.4s, color 0.4s;
}
.service-ask:hover { background: var(--ink); color: var(--ivory); }

/* the menu board: columns read from the right, ruled like a お品書き */
.oshinagaki {
  display: flex;
  flex-direction: row-reverse;
  height: min(74vh, 640px);
  border-top: 1px solid var(--text);
  border-bottom: 1px solid var(--text);
}
.oshinagaki li { flex: 1; min-width: 0; }
.oshinagaki li + li { border-right: 1px solid var(--line); }
.menu-item {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  cursor: pointer;
}
.menu-face,
.menu-ink {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 26px 0 22px;
}
/* the chosen column is written from the top: the grey stroke and its text arrive together */
.menu-ink {
  color: var(--text);
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.9s cubic-bezier(0.6, 0, 0.25, 1);
}
/* her vertical line (線_素材, option ② of her last request), turned to the grey of the wash */
.menu-ink::before {
  content: '';
  position: absolute;
  inset: 8px 6%;
  z-index: -1;
  background: url(../assets/service-line.png) center / 100% 100% no-repeat;
}
.is-inked .menu-item.is-active .menu-ink { clip-path: inset(0 0 0 0); }
.ink-static .menu-ink { transition: none; }
.menu-item:focus-visible { outline-offset: -6px; }
.menu-no { font-family: var(--mincho); font-size: 15px; letter-spacing: 0.2em; opacity: 0.7; }
.menu-name { writing-mode: vertical-rl; font-family: var(--mincho); font-size: clamp(19px, 1.75vw, 25px); font-weight: 500; letter-spacing: 0.22em; white-space: nowrap; }

/* below the board: how the price is set and how a commission goes */
.service-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 40px; margin-top: 46px; padding-top: 24px; border-top: 1px solid var(--line); }
.flow-wrap { display: flex; align-items: center; gap: 22px; }
.flow-head { padding-right: 22px; border-right: 1px solid var(--line); font-family: var(--mincho); font-size: 13.5px; letter-spacing: 0.2em; color: var(--muted); white-space: nowrap; }
.flow { display: flex; flex-wrap: nowrap; white-space: nowrap; gap: 10px 0; font-family: var(--mincho); font-size: 13.5px; letter-spacing: 0.12em; }
.flow li { display: flex; align-items: center; gap: 8px; }
.flow li:not(:last-child)::after { content: ''; width: 18px; height: 1px; margin: 0 10px; background: var(--line); }
.flow span { font-family: var(--latin); font-size: 14px; font-style: italic; color: var(--muted); }
.small { font-size: 12.5px; }

/* ---------- PROFILE：掛け軸のように ---------- */

.profile { padding: 80px 0 60px; }
/* the portrait, and to its right her title, her name and the career, centred against it */
.profile-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 0 6vw; align-items: center; }
.portrait { position: relative; }
.portrait-frame {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 4;
  background: var(--bg2);
  box-shadow: 0 30px 60px -36px rgba(17, 17, 17, 0.45);
  font-family: var(--latin);
  font-size: 14px;
  letter-spacing: 0.24em;
  text-align: center;
  text-transform: uppercase;
  color: var(--muted);
  overflow: hidden;
}
.portrait-frame small { font-family: var(--gothic); font-size: 11px; letter-spacing: 0.2em; }
.portrait-frame img { width: 100%; height: 100%; object-fit: cover; }
.profile-body { display: grid; gap: 14px; justify-items: start; }
.profile-name { margin-top: -4px; font-family: var(--mincho); font-size: clamp(34px, 3.1vw, 46px); font-weight: 500; line-height: 1.3; letter-spacing: 0.2em; }
.profile-role { margin-top: 10px; font-family: var(--mincho); font-size: 22px; letter-spacing: 0.3em; }
.profile-role span { margin-left: 14px; font-family: var(--latin); font-size: 18px; font-style: italic; letter-spacing: 0.04em; color: var(--muted); }
.career { width: 100%; margin: 14px 0 10px; border-top: 1px solid var(--text); }
.career div { display: grid; grid-template-columns: 100px 1fr; align-items: baseline; gap: 20px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.career dt { font-family: var(--mincho); font-size: 14px; letter-spacing: 0.12em; }
.career dd { font-family: var(--mincho); font-size: 15px; line-height: 1.9; }
.career dd span { display: block; }
.career dd.pending { font-family: var(--gothic); font-size: 12.5px; color: var(--muted); }
.draft-note.dark { color: var(--muted); opacity: 1; }

.sns { margin-top: 120px; }
/* her accounts one at a time: a tab for each, a single featured video or account, and its QR code.
   Larger than before, now that the popular videos below are gone (she asked, 2026.11) */
.sns-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 18px 40px; }
.sns-sub { margin-top: 14px; font-family: var(--mincho); font-size: clamp(26px, 2.4vw, 34px); font-weight: 500; letter-spacing: 0.14em; }
/* as in her sketch: the tabs sit together on a band, each with the real logo of its service and its name;
   the chosen one is lifted onto the paper */
.sns-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 5px; border-radius: 999px; background: var(--bg2); }
.sns-tab { display: inline-flex; align-items: center; gap: 10px; padding: 9px 22px 9px 16px; border: 1px solid transparent; border-radius: 999px; background: none; font-family: var(--latin); font-size: 18px; letter-spacing: 0.04em; color: var(--muted); cursor: pointer; transition: border-color 0.4s, background 0.4s, color 0.4s; }
.sns-tab svg { width: 19px; height: 19px; flex: none; }
.sns-tab:hover { color: var(--text); }
.sns-tab[aria-selected='true'] { border-color: var(--text); background: var(--bg); color: var(--text); }
/* every account keeps the height of the featured video, so the page does not jump between tabs */
.sns-panel { position: relative; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0 64px; min-height: calc(clamp(210px, 17vw, 270px) * 14 / 9 + 112px); margin-top: 28px; padding: 56px 64px; background: var(--bg2); }
.sns-panel.is-account { grid-template-columns: minmax(0, 1fr) auto; }
.sns-panel > .short { position: relative; z-index: 1; width: clamp(210px, 17vw, 270px); }
/* Facebook, Instagram: her chosen post, in the place of the video, on a white card like the post itself */
/* (drawn at a fixed width and scaled to the card in js/main.js) */
.sns-panel > .sns-post { position: relative; z-index: 1; width: clamp(320px, 28vw, 400px); max-width: 100%; background: #fff; overflow: hidden; }
.sns-post iframe { display: block; border: 0; transform-origin: 0 0; }
/* the title of the featured video is written beside it */
.sns-panel > .short .short-title { display: none; }
.sns-feature { position: relative; z-index: 1; display: grid; gap: 14px; justify-items: start; max-width: 560px; min-width: 0; }
.sns-kind { font-family: var(--latin); font-size: 14px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
.sns-feature h3 { font-family: var(--mincho); font-size: clamp(24px, 2.1vw, 32px); font-weight: 500; letter-spacing: 0.14em; white-space: pre; }
.sns-handle { font-family: var(--latin); font-size: 21px; letter-spacing: 0.03em; }
.sns-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.sns-links .pill { padding: 11px 26px; font-size: 13.5px; }
.sns-note { font-size: 14px; color: var(--muted); }
/* the short line above a video's title: darker and a little larger than a note, close to the title (she asked, 2026.11) */
.short-note { font-size: 16px; color: var(--text); }
.short-note + h3 { margin-top: -8px; }
/* the QR code of the account, on the paper, with a line under it saying what it is for */
.sns-qr { display: grid; gap: 14px; justify-items: center; width: clamp(170px, 14vw, 210px); text-align: center; }
.sns-qr svg { display: block; width: 100%; height: auto; box-shadow: 0 1px 2px rgba(17, 17, 17, 0.05), 0 18px 36px -26px rgba(17, 17, 17, 0.4); }
.sns-qr figcaption { display: grid; gap: 4px; font-family: var(--mincho); font-size: 14px; letter-spacing: 0.14em; }
.sns-qr figcaption span { font-family: var(--gothic); font-size: 11.5px; line-height: 1.7; letter-spacing: 0.06em; color: var(--muted); }

/* her YouTube Shorts: upright cards; the video plays in the lightbox */
.short { position: relative; display: block; width: 100%; padding: 0; border: 0; background: var(--bg2); cursor: pointer; overflow: hidden; }
.short img { display: block; width: 100%; aspect-ratio: 9 / 14; object-fit: cover; transition: transform 1.2s var(--ease); }
.short:hover img { transform: scale(1.03); }
.short-play { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%; background: rgba(26, 26, 26, 0.78); }
.short-play::after { content: ''; position: absolute; left: 16px; top: 13px; border-left: 12px solid var(--ivory); border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.short-title { position: absolute; left: 0; right: 0; bottom: 0; padding: 36px 16px 14px; background: linear-gradient(transparent, rgba(17, 17, 17, 0.62)); color: var(--ivory); font-family: var(--mincho); font-size: 13.5px; letter-spacing: 0.12em; text-align: left; }

/* ---------- CONTACT：申込書のように ---------- */

.contact { position: relative; padding: 150px 0 20px; }
/* laid out like the head of SERVICE: the eyebrow, the title across, the words; the steps on the right */
.contact-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px 44px; margin-bottom: 34px; }
.contact-words { display: grid; gap: 14px; justify-items: start; }
.contact-words .section-title { margin: 4px 0 2px; font-size: clamp(28px, 2.7vw, 40px); white-space: nowrap; }
.contact-lead { font-size: 15px; line-height: 2.1; white-space: nowrap; }
.contact-also { margin-top: 6px; font-size: 13px; color: var(--muted); }
.contact-also a { border-bottom: 1px solid currentColor; color: var(--text); }
.contact-mail { font-size: 13px; color: var(--muted); }
.contact-mail a { margin-left: 12px; border-bottom: 1px solid currentColor; font-family: var(--latin); font-size: 17px; letter-spacing: 0.04em; color: var(--text); }
/* the three steps of a consultation; the one in hand is filled with ink */
.steps { display: flex; gap: 30px; padding-bottom: 6px; font-family: var(--mincho); font-size: 14.5px; letter-spacing: 0.14em; }
.steps li { display: flex; align-items: center; gap: 12px; color: var(--muted); transition: color 0.5s; }
.steps li span { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; font-family: var(--latin); font-size: 17px; font-style: italic; letter-spacing: 0; transition: background 0.5s, color 0.5s; }
.steps li.is-done, .steps li.is-now { color: var(--text); }
.steps li.is-now span { border-color: var(--ink); background: var(--ink); color: var(--ivory); }

/* the form is ruled like an application sheet (申込書), across the whole width */
.sheet { display: grid; grid-template-columns: minmax(0, 1fr); }
.form, .form-done { display: contents; }
.form[hidden], .form-done[hidden] { display: none; }
.form-table, .done-table { grid-column: 1; grid-row: 1; border-top: 1px solid var(--text); border-bottom: 1px solid var(--text); }
.form-table { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.form-foot, .done-foot { grid-column: 1; grid-row: 2; display: flex; align-items: center; gap: 16px 28px; padding-top: 26px; }

/* one line of the sheet: what is asked on the left, the answer on the right */
.row { display: grid; grid-template-columns: 178px minmax(0, 1fr); align-items: center; min-height: 66px; border-bottom: 1px solid var(--line); transition: background 0.3s; }
.row:focus-within, .row-message:focus-within { background: rgba(17, 17, 17, 0.035); }
.row-label { padding: 0 18px; font-family: var(--mincho); font-size: 14.5px; letter-spacing: 0.08em; white-space: nowrap; }
.row-label em, .row-label small { display: block; margin-top: 2px; font-family: var(--gothic); font-size: 10.5px; font-style: normal; letter-spacing: 0.14em; color: var(--muted); }
.row-label em { color: #9A3B22; }
.row-services { grid-column: 1 / -1; padding: 16px 0; }
.row-pair { grid-template-columns: 112px minmax(0, 1fr) 96px minmax(0, 1fr); }
.row-pair .row-label + input { border-right: 1px solid var(--line); }
.rows { grid-column: 1; }
.rows .row:last-child { border-bottom: 0; }
.row-message { grid-column: 2; display: grid; grid-template-rows: auto 1fr; border-left: 1px solid var(--line); transition: background 0.3s; }
.row-message .row-label { padding: 20px 22px 8px; }

.form input[type='text'], .form input[type='email'], .form select, .form textarea {
  width: 100%;
  height: 100%;
  min-height: 64px;
  padding: 0 18px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font: 400 15.5px/1.7 var(--gothic);
  letter-spacing: 0.04em;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.form select { cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: right 24px center, right 18px center; background-size: 6px 6px; background-repeat: no-repeat; }
.form select option { color: var(--text); background: var(--bg); }
.form textarea { padding: 4px 22px 20px; resize: none; }
.form ::placeholder { color: rgba(17, 17, 17, 0.3); }

.chips { display: flex; flex-wrap: wrap; gap: 10px; padding-right: 18px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span {
  display: inline-block;
  padding: 8px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: 0.1em;
  transition: background 0.4s, color 0.4s, border-color 0.4s;
}
.chip:hover span { border-color: var(--text); }
.chip input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--ivory); }
.chip input:focus-visible + span { outline: 1px solid var(--text); outline-offset: 3px; }

.agree { display: flex; align-items: center; gap: 12px; font-size: 13px; cursor: pointer; }
.agree input { width: 16px; height: 16px; accent-color: var(--ink); }
.agree a { border-bottom: 1px solid currentColor; }
.form-error { font-size: 13px; color: #9A3B22; }
.form-error:empty { display: none; }

.submit {
  display: inline-flex;
  gap: 14px;
  margin-left: auto;
  padding: 18px 36px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--ivory);
  font-family: var(--mincho);
  font-size: 15px;
  letter-spacing: 0.16em;
  white-space: nowrap;
  cursor: pointer;
}
.ghost {
  padding: 17px 28px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: none;
  color: var(--text);
  font-size: 13px;
  letter-spacing: 0.12em;
  white-space: nowrap;
  cursor: pointer;
}
.ghost:hover { border-color: var(--text); }

/* read back inside the same rules */
.done-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 22px 18px; border-bottom: 1px solid var(--line); }
.done-head h3 { font-family: var(--mincho); font-size: 22px; font-weight: 500; letter-spacing: 0.14em; outline: none; }
.text-btn { padding: 0 0 3px; border: 0; border-bottom: 1px solid currentColor; background: none; font-size: 13px; letter-spacing: 0.12em; white-space: nowrap; cursor: pointer; }
.done-table dl div { display: grid; grid-template-columns: 178px minmax(0, 1fr); padding: 16px 0; border-bottom: 1px solid var(--line); }
.done-table dl div:last-child { border-bottom: 0; }
.done-table dt { padding: 0 18px; font-family: var(--mincho); font-size: 14px; letter-spacing: 0.1em; }
.done-table dd { padding: 0 18px; white-space: pre-wrap; font-size: 14.5px; }
.done-foot .draft-note { max-width: 420px; color: var(--muted); opacity: 1; }
.done-actions { display: flex; gap: 12px; margin-left: auto; }
.done-actions .submit { margin-left: 0; }
.done-actions [hidden], .done-foot [hidden] { display: none; }
.done-foot .form-error { max-width: 420px; }
.submit:disabled { opacity: 0.6; cursor: progress; }
/* after sending: a short thank-you inside the same rules */
.form-sent { grid-column: 1 / -1; display: grid; gap: 14px; padding: 46px 18px; border-top: 1px solid var(--text); border-bottom: 1px solid var(--text); }
.form-sent[hidden] { display: none; }
.form-sent h3 { font-family: var(--mincho); font-size: 22px; font-weight: 500; letter-spacing: 0.14em; outline: none; }
.form-sent p { font-size: 14.5px; }
/* the field only robots fill in */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.privacy { max-width: 760px; margin-top: 64px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.9; color: var(--muted); }
.privacy b { display: block; margin-bottom: 6px; font-weight: 500; color: var(--text); }

/* the page closes with the grey coming up once more, with the same torn edge */
.site-footer { position: relative; margin-top: calc(var(--edge-h) + 60px); background: var(--wash); color: var(--on-wash-muted); }
.site-footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px 32px;
  padding-top: 70px;
  padding-bottom: 44px;
  font-size: 12px;
}
.site-footer .muted { color: inherit; opacity: 0.7; }
.site-footer p:first-child { font-family: var(--latin); font-size: 14px; letter-spacing: 0.2em; color: var(--text); }
.site-footer a { font-family: var(--latin); font-size: 14px; letter-spacing: 0.2em; color: var(--text); }

/* ---------- lightbox ---------- */

.lightbox {
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(245, 241, 234, 0.97);
  color: var(--text);
}
.lightbox[open] { display: grid; grid-template-columns: 120px 1fr 120px; align-items: center; justify-items: center; }
.lightbox::backdrop { background: rgba(17, 17, 17, 0.4); }
.lb-figure { grid-column: 2; display: flex; flex-direction: column; align-items: center; gap: 22px; }
/* an article without a photo, or a video, hides the image of the work seen before */
.lb-figure img[hidden] { display: none; }
.lb-figure img { max-height: calc(100vh - 270px); max-width: min(100%, 1100px); width: auto; box-shadow: 0 40px 80px -40px rgba(50, 38, 24, 0.5); }
.lb-figure iframe { width: min(1000px, 78vw); aspect-ratio: 16 / 9; border: 0; }
/* a short stands upright */
.lb-figure iframe.is-short { width: auto; height: min(74vh, 720px); aspect-ratio: 9 / 16; }
.lightbox.is-single .lb-nav { visibility: hidden; }
.lb-figure figcaption { display: grid; gap: 4px; justify-items: center; text-align: center; font-size: 12px; color: var(--muted); }
.lb-index { font-family: var(--latin); font-size: 14px; letter-spacing: 0.2em; }
.lb-figure strong { font-family: var(--mincho); font-size: 22px; font-weight: 500; letter-spacing: 0.2em; color: var(--text); }
.lb-desc { max-width: 460px; margin-top: 6px; }
.lb-close {
  position: absolute;
  top: 24px;
  right: var(--gutter);
  border: 0;
  background: none;
  font-family: var(--latin);
  font-size: 16px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
}
.lb-nav {
  width: 54px;
  height: 54px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: none;
  font-size: 17px;
  cursor: pointer;
  transition: background 0.4s, color 0.4s;
}
.lb-nav:hover { background: var(--ink); color: var(--ivory); }
.lb-nav.prev { grid-column: 1; grid-row: 1; }
.lb-nav.next { grid-column: 3; grid-row: 1; }

/* ---------- responsive ---------- */

@media (max-width: 899px) {
  .nav { display: none; }
  .header-cta { margin-left: auto; padding: 6px 14px; font-size: 11.5px; }
  .menu-btn { display: block; }
  .site-header { gap: 18px; padding-top: 20px; padding-bottom: 20px; }

  .news-inner, .service-grid, .profile-grid, .contact-head, .sheet, .form-table { grid-template-columns: 1fr; }
  .profile-body { margin-top: 40px; }
  .contact-lead { white-space: normal; }
  .row-message { grid-column: 1; border-left: 0; border-top: 1px solid var(--line); }
  .form-foot, .done-foot { flex-wrap: wrap; }
  .service-grid { gap: 56px; }
  .service-side { position: static; }
  .news, .service { padding-top: 110px; }
  .profile { padding-top: 60px; }
  .news { padding-bottom: 110px; }
  .news-head { max-width: none; }
  .news-inner { gap: 48px; }
  .dm-list { flex-wrap: wrap; justify-content: center; gap: 22px 16px; }
  .dm-list li:nth-child(even) { margin-top: 0; }
  .dm { width: min(250px, calc(50vw - 30px)); padding: 12px 8px 12px 12px; column-gap: 6px; }
  .dm-photo img { max-height: 300px; }
  /* on a phone the card is small: only the title runs beside the photo, so the card keeps the photo's height */
  .dm-type { display: none; }
  .dm-title { font-size: 14px; letter-spacing: 0.1em; }


  .portrait { max-width: 420px; }
  .sns-panel, .sns-panel.is-account { grid-template-columns: 1fr; gap: 24px; padding: 28px 24px; }
  /* on a phone the QR code is no use: the links open the accounts directly */
  .sns-qr { display: none; }
  .sns-sub { font-size: 22px; }

  .lightbox[open] { grid-template-columns: 1fr; padding: 70px 16px 100px; }
  .lb-figure { grid-column: 1; }
  .lb-figure img { max-height: calc(100vh - 300px); }
  .lb-figure iframe { width: 100%; }
  .lb-nav { position: absolute; bottom: 24px; }
  .lb-nav.prev { left: 24px; }
  .lb-nav.next { right: 24px; }
}

@media (max-width: 640px) {
  body { font-size: 14px; }
  .sp { display: inline; }
  .hero-seal { width: clamp(104px, 30vw, 140px); }
  .hero-kicker { font-size: clamp(15px, 4.4vw, 18px); }
  .hero-en { font-size: clamp(32px, 9.6vw, 46px); letter-spacing: 0.06em; margin-right: -0.06em; }

  .about { height: 220vh; }
  .about-sticky { grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto; padding: 96px 24px 36px; gap: 28px; }
  /* the vertical text is wider than a phone: it scrolls sideways inside its box (it starts on the right, where it begins),
     so the page itself stays the width of the screen and the menu button stays on it */
  .about-text { justify-self: center; max-width: 100%; height: min(60vh, 470px); overflow-x: auto; overflow-y: hidden; }
  .about-title { font-size: 23px; }
  .about-text p.ln { font-size: 14.5px; line-height: 2.25; letter-spacing: 0.24em; }
  .about-meta { gap: 18px; }
  .about-words { gap: 26px; }
  .about-words b { font-size: 17px; }

  .works-inner { padding-top: 90px; padding-bottom: 80px; }
  .works-head { margin-bottom: 30px; gap: 16px; }
  .works-title { font-size: clamp(40px, 13vw, 58px); }
  .works-copy { font-size: 12px; letter-spacing: 0.1em; }
  .works-grid { gap: 26px 12px; }
  .works-cat { height: 70px; gap: 4px; }
  .works-cat-ja { font-size: 12px; }
  .works-cat-en { font-size: 15px; white-space: normal; line-height: 1.15; }
  .work-title { font-size: 12px; }
  .form { grid-template-columns: 1fr; gap: 30px; }
  .form-done dl div { grid-template-columns: 1fr; gap: 2px; }
  .career div { grid-template-columns: 96px 1fr; }
  .flow-wrap { flex-wrap: wrap; gap: 12px 22px; }
  .flow { flex-wrap: wrap; white-space: normal; font-size: 13px; }
  .flow li:not(:last-child)::after { width: 18px; margin: 0 10px; }
}