/* STUDIOFUU — static site styles.
   Principles: still, legible, sensory. No decorative motion. Photographs lead; type and margin carry the rest. */

:root {
  --paper: #ffffff;     /* pure white (trial; previous #fbfaf7) */
  --ink: #1d1c1a;
  --sub: #66635d;       /* 5.6:1 on --paper */
  --rule: #dcd9d2;
  --accent: var(--ink);  /* no coloured hover/focus states */
  --gutter: clamp(20px, 4.2vw, 64px);
  --measure: 34em;
  --serif: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", serif;
  --sans: "Cormorant Garamond", "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--serif); font-weight: 300; font-size: 15px; line-height: 2;
  letter-spacing: .04em; font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
}
body.lang-en { line-height: 1.8; letter-spacing: .01em; font-feature-settings: normal; font-size: 16px; }
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
.pf img, .proj-pair img { width: 100%; }
h1, h2 { font-weight: 300; margin: 0; word-break: auto-phrase; text-wrap: balance; }
.page-lead, .proj-intro p, .concept-text p { text-wrap: pretty; }
.concept-text p, .philosophy-text p { word-break: keep-all; overflow-wrap: anywhere; line-break: strict; }
p { margin: 0 0 1.4em; }
a { color: inherit; text-decoration: none; }
a:hover, a:focus-visible { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--paper); padding: .6em 1em; z-index: 100; }
.skip:focus { left: 0; }

/* header: only the logo and the three-dot icon stay on screen (no bar) --------- */
:root { --hdr: 64px; --hy: calc(12px + env(safe-area-inset-top, 0px)); --pane: calc(var(--hy) + 40px + 20px); }
.site-header { font-family: var(--sans); font-weight: 500; font-size: 14px; letter-spacing: .16em; color: var(--ink); }
/* Both marks are fixed on their own, white, and blended with `difference`: dark on paper, light on photographs. */
.logo { position: fixed; top: var(--hy); left: var(--gutter); z-index: 60; display: block; line-height: 0; mix-blend-mode: difference; }
.logo img { height: 40px; width: auto; }
.menu-btn { display: none; position: fixed; top: var(--hy); right: calc(var(--gutter) - 8px); z-index: 60; width: 44px; height: 44px; padding: 0; background: none; border: 0; color: #fff; cursor: pointer; align-items: center; justify-content: center; mix-blend-mode: difference; }
/* Three dots are one dashed line; opening turns the dashes solid and rotates two copies into a cross. */
.menu-btn .ico { fill: none; stroke: currentColor; stroke-width: 4.6; stroke-linecap: round; overflow: visible; }
.menu-btn .ico line { stroke-dasharray: 0 9; transform-box: view-box; transform-origin: 14px 14px; transition: stroke-dasharray .45s cubic-bezier(.65, 0, .35, 1), transform .45s cubic-bezier(.65, 0, .35, 1), stroke-width .45s ease; }
.menu-btn[aria-expanded="true"] .ico line { stroke-dasharray: 18.2 0; stroke-width: 2.7; }
.menu-btn[aria-expanded="true"] .ico-a { transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] .ico-b { transform: rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .menu-btn .ico line { transition: none; } }
.js .menu-btn { display: inline-flex; }
.site-nav { display: flex; flex-wrap: wrap; gap: 1.2em 2.2em; align-items: baseline; }
.site-nav > a { display: inline-flex; flex-direction: column; }
/* the bold width is reserved up front, so the band never changes size when the current entry changes */
.site-nav > a::after { content: attr(data-label); font-weight: 600; height: 0; overflow: hidden; visibility: hidden; pointer-events: none; }
.site-nav > a[aria-current] { font-weight: 600; transform: translateX(-14px); }
.site-nav > a { transition: transform .25s ease; }
@media (prefers-reduced-motion: reduce) { .site-nav > a { transition: none; } }
.lang { display: inline-flex; gap: .5em; color: var(--sub); }
.lang a[aria-current="true"] { color: var(--ink); }
.site-nav a:hover, .site-nav a:focus-visible { color: var(--accent); }
/* with JavaScript the menu is a white band with a vertical rule on its left, sliding out from the right edge, sized to its entries */
.js .site-nav {
  position: fixed; top: calc(var(--hy) + 56px); right: 0; z-index: 50; width: max-content; max-width: 90vw;
  background: var(--paper); color: var(--ink);
  border-left: 1px solid var(--ink);
  flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: flex-start; gap: .9em;
  padding: 1.25em clamp(28px, 4vw, 44px) 1.2em clamp(24px, 3.4vw, 36px); font-family: var(--sans); font-weight: 400; font-size: clamp(1.15rem, 1.7vw, 1.4rem); letter-spacing: .18em; text-transform: uppercase;
  transform: translateX(100%); visibility: hidden;
  transition: transform .55s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .55s;
}
.js .site-nav.open { transform: none; visibility: visible; transition: transform .55s cubic-bezier(.16, 1, .3, 1), visibility 0s; }
@media (prefers-reduced-motion: reduce) { .js .site-nav, .js .site-nav.open { transition: none; } }
.js .site-nav .lang { font-family: var(--sans); font-weight: 500; font-size: 14px; letter-spacing: .16em; margin-top: .8em; }
/* without JavaScript the links sit inline under the mark */
html:not(.js) .site-header { padding: calc(var(--hy) + 52px) var(--gutter) 0; }
html:not(.js) .logo, html:not(.js) .menu-btn { position: absolute; }
main { padding-top: 0; }
@media (max-width: 719px) { .logo img { height: 36px; } :root { --hdr: 60px; --pane: calc(var(--hy) + 36px + 18px); } }

/* shared -------------------------------------------------------------- */
main { padding-bottom: clamp(56px, 9vw, 120px); }
.eyebrow { font-family: var(--sans); font-weight: 500; font-size: 13px; letter-spacing: .24em; color: var(--sub); margin: 0 0 1.6em; text-transform: uppercase; }
.text-link { border-bottom: 1px solid var(--rule); padding-bottom: 2px; }
.text-link:hover { border-color: var(--accent); }
.meta { font-family: var(--sans); font-weight: 500; font-size: 13px; letter-spacing: .12em; color: var(--sub); margin: 0; }
.work-sub { font-family: var(--sans); font-weight: 500; font-size: 14px; letter-spacing: .08em; color: var(--sub); margin: .3em 0 0; }
.sec-head { font-size: 1.05rem; letter-spacing: .14em; margin-bottom: 1.4em; font-weight: 400; }
.note { font-family: var(--sans); font-weight: 500; font-size: 13px; letter-spacing: .12em; color: var(--sub); }

/* TOP ---------------------------------------------------------------- */
.hero { padding: clamp(28px, 5vw, 64px) var(--gutter) 0; }
.hero-fig img { width: 100%; height: min(74svh, 880px); min-height: 320px; object-fit: cover; object-position: 55% 55%; }
.hero-text { padding-top: clamp(22px, 3vw, 40px); display: grid; gap: .6em; }
.hero-title { font-size: clamp(1.6rem, 3.6vw, 2.8rem); letter-spacing: .1em; line-height: 1.5; }
body.lang-en .hero-title { letter-spacing: 0; }
.hero-sub { font-family: var(--sans); font-weight: 500; font-size: 14px; letter-spacing: .14em; color: var(--sub); margin: 0; }

.concept { padding: clamp(80px, 14vw, 200px) var(--gutter) 0; }
.concept-text { max-width: var(--measure); }
@media (min-width: 860px) { .concept { padding-left: calc(var(--gutter) + 16.66vw); } }
.concept-text p { margin-bottom: 1.8em; }
.concept-strong { font-weight: 400; }

.top-works { padding: clamp(90px, 14vw, 200px) var(--gutter) 0; }
.tw-grid { display: grid; gap: clamp(36px, 6vw, 80px); }
.tw { display: block; }
.tw img { width: 100%; }
.tw-cap { display: flex; flex-direction: column; gap: .2em; padding-top: 1em; }
.tw-name { font-size: 1.05rem; letter-spacing: .08em; }
.tw-meta { font-family: var(--sans); font-weight: 500; font-size: 13px; letter-spacing: .12em; color: var(--sub); }
@media (min-width: 860px) {
  .tw-grid { grid-template-columns: repeat(12, 1fr); align-items: end; }
  .tw-a { grid-column: 1 / span 8; }
  .tw-b { grid-column: 10 / span 3; }
  .tw-b img { aspect-ratio: 3 / 4; object-fit: cover; }
}
.more { margin-top: clamp(40px, 5vw, 64px); font-family: var(--sans); font-weight: 500; font-size: 14px; letter-spacing: .16em; }
.quiet-contact { padding: clamp(90px, 12vw, 160px) var(--gutter) 0; max-width: calc(var(--measure) + var(--gutter) * 2); }

/* pages --------------------------------------------------------------- */
.page-head { padding: clamp(60px, 10vw, 140px) var(--gutter) clamp(36px, 5vw, 64px); }
.page-title { font-size: clamp(1.4rem, 2.6vw, 2rem); letter-spacing: .24em; font-family: var(--sans); font-weight: 500; font-weight: 300; }
.page-lead { color: var(--sub); max-width: var(--measure); margin: 1.2em 0 0; }
.prose { padding: clamp(36px, 6vw, 80px) var(--gutter) 0; max-width: calc(var(--measure) + var(--gutter) * 2); }
@media (min-width: 860px) { .prose { margin-left: 16.66vw; } }
.concept-page { padding-top: 0; }

/* works list --------------------------------------------------------- */
.works-list { list-style: none; margin: 0; padding: 0 var(--gutter); }
.work-row { border-top: 1px solid var(--rule); padding: clamp(28px, 4vw, 52px) 0; display: grid; gap: 22px; }
.work-title { font-size: 1.25rem; letter-spacing: .08em; font-weight: 400; }
.work-meta { margin: 1.2em 0 0; font-family: var(--sans); font-weight: 500; font-size: 14px; letter-spacing: .1em; color: var(--sub); }
.work-meta div { margin: 0; } .work-meta dd { margin: 0; }
.tag { color: var(--sub); }
.row-media img { width: 100%; }
@media (min-width: 860px) {
  .work-row { grid-template-columns: repeat(12, 1fr); column-gap: 24px; }
  .row-text { grid-column: 1 / span 4; }
  .row-media { grid-column: 6 / span 7; }
  .work-row.has-media { padding-bottom: clamp(48px, 6vw, 88px); }
}

/* project ------------------------------------------------------------ */
.proj-hero { padding: clamp(28px, 5vw, 64px) var(--gutter) 0; }
.proj-hero figure img { width: 100%; height: min(78svh, 900px); min-height: 320px; object-fit: cover; object-position: 55% 55%; }
.proj-title { padding-top: clamp(22px, 3vw, 40px); }
.proj-title h1 { font-size: clamp(1.6rem, 3.2vw, 2.6rem); letter-spacing: .1em; line-height: 1.5; }
body.lang-en .proj-title h1 { letter-spacing: 0; }
.proj-intro { max-width: var(--measure); padding-top: clamp(48px, 7vw, 96px); }
@media (min-width: 860px) { .proj-intro { margin-left: 16.66vw; } }
.proj-sec { padding: clamp(80px, 12vw, 180px) var(--gutter) 0; display: grid; gap: 28px; }
.proj-sec .pt { max-width: var(--measure); }
@media (min-width: 860px) {
  .proj-sec { grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: start; }
  .layout-inset-r .pf { grid-column: 6 / span 7; grid-row: 1; }
  .layout-inset-r .pt { grid-column: 1 / span 4; grid-row: 1; }
  .layout-inset-l .pf { grid-column: 1 / span 6; grid-row: 1; }
  .layout-inset-l .pt { grid-column: 8 / span 4; grid-row: 1; padding-top: 4vw; }
  .layout-wide .pf { grid-column: 1 / -1; }
  .layout-wide .pt { grid-column: 4 / span 6; }
}
.proj-pair { padding: clamp(80px, 12vw, 180px) var(--gutter) 0; display: grid; gap: 20px; align-items: end; }
@media (min-width: 860px) { .proj-pair { grid-template-columns: 7fr 4fr; gap: 24px; } }
.proj-data { padding: clamp(80px, 12vw, 180px) var(--gutter) 0; max-width: calc(var(--measure) + var(--gutter) * 2); }
@media (min-width: 860px) { .proj-data { margin-left: 16.66vw; } }
.proj-data dl { margin: 0 0 2.4em; border-top: 1px solid var(--rule); }
.proj-data dl div { display: grid; grid-template-columns: 9em 1fr; gap: 1em; padding: .7em 0; border-bottom: 1px solid var(--rule); font-size: .9rem; }
.proj-data dt { font-family: var(--sans); font-weight: 500; font-size: 13px; letter-spacing: .14em; color: var(--sub); padding-top: .35em; }
.proj-data dd { margin: 0; }
.proj-next { padding: clamp(60px, 8vw, 100px) var(--gutter) 0; font-family: var(--sans); font-weight: 500; font-size: 14px; letter-spacing: .16em; }

/* form --------------------------------------------------------------- */
.form { display: grid; gap: 1.6em; max-width: 30em; }
.field { display: grid; gap: .5em; }
.field span { font-family: var(--sans); font-weight: 500; font-size: 13px; letter-spacing: .14em; color: var(--sub); }
.field input, .field textarea { font: inherit; font-size: 1rem; background: transparent; color: var(--ink); border: 0; border-bottom: 1px solid var(--ink); padding: .5em 0; border-radius: 0; }
.field textarea { border: 1px solid var(--rule); padding: .7em; }
.btn { justify-self: end; font-family: var(--sans); font-weight: 500; font-size: 14px; letter-spacing: .2em; background: transparent; color: var(--ink); border: 1px solid var(--ink); border-radius: 999px; padding: 1em 2.8em 1em calc(2.8em + .2em); cursor: pointer; transition: color .2s ease, border-color .2s ease, background-color .2s ease; }
.btn:hover, .btn:focus-visible { color: var(--accent); border-color: var(--accent); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* footer ------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--rule); margin: 0 var(--gutter); padding: 28px 0 40px; display: grid; gap: 1.6em; }
.footer-contact { font-family: var(--sans); font-weight: 500; font-size: 15px; letter-spacing: .18em; text-transform: uppercase; justify-self: start; }
.footer-row { justify-content: space-between; }
.footer-privacy:hover, .footer-contact:hover { color: var(--accent); }
.privacy h2 { font-size: 1rem; font-weight: 400; letter-spacing: .08em; margin: 2.2em 0 .4em; }
.privacy p { margin: 0; }
.footer-id { display: grid; gap: .3em; }
.footer-brand { font-family: "Cormorant Garamond", var(--serif); font-weight: 300; font-size: clamp(2.2em, 6vw, 3.2em); letter-spacing: .18em; line-height: 1.2; }
.footer-row { display: flex; flex-wrap: wrap; gap: .6em 2em; align-items: baseline; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }
.concept-close { margin-top: 2.6em; }
.concept-text .concept-sign { margin: 3.2em .83em 0 0; text-align: right; font-family: "Cormorant Garamond", var(--serif); font-weight: 300; font-size: .95em; letter-spacing: .22em; line-height: 1.2; color: var(--sub); }

/* TOP: the photograph stays fixed full-screen while the text scrolls over it ---- */
.stage { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: clamp(32px, 8vh, 88px) var(--gutter) 0; min-height: calc(100vh - var(--pane)); min-height: calc(100svh - var(--pane)); }
/* TOP opens on a square window (slideshow) and the tagline only; the concept text waits below the fold. */
.stage-win { position: relative; width: min(100%, 62vh, 62svh, 560px); aspect-ratio: 1 / 1; overflow: hidden; background: #ece9e2; }
.ss, .ss img { position: absolute; inset: 0; width: 100%; height: 100%; }
.ss img { object-fit: cover; display: block; }
.js .ss img { opacity: 0; transition: opacity 1.4s ease; }
.js .ss img.on { opacity: 1; }
.stage-first { display: flex; flex-direction: column; gap: .6em; width: min(100%, 62vh, 62svh, 560px); padding: clamp(84px, 12vw, 168px) 0 0; }
.stage-concept { padding: clamp(36px, 6vw, 80px) var(--gutter) 0; }
/* the concept text shares one column with the window and the tagline (same width, same left edge) */
.stage-concept .concept-text { container-type: inline-size; max-width: none; width: min(100%, 62vh, 62svh, 560px); margin: 0 auto; letter-spacing: .04em; line-height: 2.2; }
@media (min-width: 860px) { .stage-concept .concept-text { font-size: 17.5px; letter-spacing: .06em; } }
@media (max-width: 389px) { .stage-concept .concept-text { font-size: 14px; } }
/* every line is set exactly as written; a line longer than the column wraps between phrases, and on very narrow screens the lines simply flow */
@container (min-width: 320px) { .concept-text .ln { display: block; } }
.recent { padding-top: clamp(80px, 12vw, 160px); }
.recent .works-list { border-bottom: 1px solid var(--rule); }


/* long unbroken titles (e.g. the gym name) must never widen the page on phones */
.work-row { grid-template-columns: minmax(0, 1fr); }
.row-text, .work-title { min-width: 0; overflow-wrap: anywhere; }
@media (min-width: 860px) { .work-row { grid-template-columns: repeat(12, minmax(0, 1fr)); } }

/* The page canvas (what a phone browser tints its status bar from) follows the header:
   the photograph's edge colour on TOP, paper once the header turns solid. */
html { background: var(--paper); }



/* Sections stop below the logo: this strip takes the space under the mark, then stays put while the content slides beneath it. */
.curtain { position: sticky; top: 0; z-index: 30; height: var(--pane); background: var(--paper); pointer-events: none; }
html:not(.js) .curtain { position: static; }

/* A section's heading and rule scroll with the page (a sticky heading made iPhone Safari draw a white strip under the page). */
.curtain-bar { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); padding: 16px var(--gutter) 26px; }
.curtain-bar.on { display: block; }
.curtain-bar::after { content: ""; position: absolute; left: var(--gutter); right: var(--gutter); bottom: 12px; border-bottom: 1px solid var(--rule); }
.curtain-bar .eyebrow { margin: 0; }
.sec-bar { position: relative; z-index: 25; background: var(--paper); padding: 16px var(--gutter) 26px; margin: 0; }
.sec-bar::after { content: ""; position: absolute; left: var(--gutter); right: var(--gutter); bottom: 12px; border-bottom: 1px solid var(--rule); }
.sec-bar .eyebrow { margin: 0; }
.recent .works-list > .work-row:first-child { border-top: 0; }
.recent .more { padding: 0 var(--gutter); }

/* Marks the point where the first section's heading has settled under the logo (JS stops the scroll there once). */
.recent { position: relative; }
.snap-mark { position: absolute; left: 0; top: calc(clamp(80px, 12vw, 160px) - var(--pane)); width: 1px; height: 1px; pointer-events: none; }


/* Recent Works on TOP: photograph first, edge to edge; the words follow. Portrait photographs sit left.
   Photo and text drift in from the left and right as they arrive (JS adds .in; without JS nothing is hidden). */
.recent { overflow-x: clip; }
.recent .works-list { padding: 0; border-bottom: 0; }
.recent .work-row { display: block; border-top: 0; padding: 0 0 clamp(72px, 12vw, 150px); }
.recent .work-row:last-child { padding-bottom: clamp(40px, 6vw, 80px); }
.recent .row-media { margin: 0 var(--gutter); }
.recent .row-media a { display: block; }
.recent .row-media img { display: block; width: 100%; height: auto; max-height: 90svh; object-fit: cover; }
.recent .is-tall .row-media { width: calc((100% - 2 * var(--gutter)) * .8); margin: 0 auto 0 var(--gutter); }
.recent .work-row:nth-child(even).is-tall .row-media { margin: 0 var(--gutter) 0 auto; }
.recent .is-tall .row-media img { max-height: none; }
@media (min-width: 860px) { .recent .is-tall .row-media { width: min(54vw, 780px, calc(100% - 2 * var(--gutter))); } }
.recent .row-text { padding: clamp(18px, 2.4vw, 28px) var(--gutter) 0; }
.recent .work-title { font-size: clamp(1.15rem, 2.2vw, 1.5rem); }
.recent .work-row:not(.has-media) { padding-top: 8px; }

.recent .work-row:not(.has-media) { padding-bottom: clamp(36px, 6vw, 72px); }


/* Motion: photo and text of a row slide in together and fade in, from the left on odd rows and the right on even rows.
   The first row waits until the page has stopped (JS adds .in). Without JS nothing is hidden. */
.js .recent .work-row { --slide: clamp(48px, 16vw, 140px); }
.js .recent .row-media, .js .recent .row-text { opacity: 0; transform: translateX(calc(var(--slide) * -1)); transition: opacity 1.1s ease, transform 1.1s cubic-bezier(.2,.7,.2,1); }
.js .recent .row-text { transition-delay: .1s; }
.js .recent .work-row:nth-child(even) .row-media, .js .recent .work-row:nth-child(even) .row-text { transform: translateX(var(--slide)); }
.js .recent .work-row.in .row-media, .js .recent .work-row.in .row-text { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .recent .row-media, .js .recent .row-text { opacity: 1 !important; transform: none !important; transition: none; }
}


/* News ------------------------------------------------------------- */
.news-list { list-style: none; margin: 0; padding: 0 var(--gutter); max-width: 960px; }
.news-row { display: grid; grid-template-columns: 7.2em minmax(0, 1fr); gap: 1em; padding: 1.15em 0; border-top: 1px solid var(--rule); align-items: baseline; }
.news-row:last-child { border-bottom: 1px solid var(--rule); }
.news-date { font-family: var(--sans); font-weight: 500; font-size: 14px; letter-spacing: .14em; color: var(--sub); }
.news-title { margin: 0; overflow-wrap: anywhere; }
.news-title a:hover { color: var(--accent); }
.empty { padding: 0 var(--gutter) 80px; color: var(--sub); }

/* Journal ---------------------------------------------------------- */
.jr-list { list-style: none; margin: 0; padding: 0; }
.jr-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; padding-bottom: clamp(56px, 9vw, 120px); }
.jr-media img { display: block; width: 100%; height: auto; max-height: 86svh; object-fit: cover; }
.jr-text { padding: 20px var(--gutter) 0; min-width: 0; }
.jr-date { display: block; font-family: var(--sans); font-weight: 500; font-size: 14px; letter-spacing: .14em; color: var(--sub); margin-bottom: .6em; }
.jr-title { font-size: clamp(1.15rem, 2.2vw, 1.5rem); font-weight: 400; letter-spacing: .06em; margin: 0; overflow-wrap: anywhere; }
.jr-title a:hover { color: var(--accent); }
.jr-lead { color: var(--sub); max-width: var(--measure); margin: .9em 0 0; text-wrap: pretty; }
@media (min-width: 860px) {
  .jr-row { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; }
  .jr-media { grid-column: 1 / span 7; }
  .jr-text { grid-column: 8 / span 5; padding: 0 var(--gutter) 0 0; }
}
.jr-post .page-head { padding-bottom: clamp(24px, 4vw, 48px); }
.jr-post-title { font-size: clamp(1.4rem, 3vw, 2.1rem); font-weight: 400; letter-spacing: .06em; margin: 0; overflow-wrap: anywhere; }
.jr-post-fig { margin: 0; }
.jr-post-fig img { display: block; width: 100%; height: auto; max-height: 86svh; object-fit: cover; }
.jr-post-body { padding-top: clamp(32px, 5vw, 64px); }
.jr-back { padding: clamp(40px, 6vw, 80px) var(--gutter) 0; }


/* TOP: the sections after Works (Journal, Profile, Contact) share Works' sticky heading + rule */
.home-sec { position: relative; padding-top: clamp(80px, 12vw, 160px); }
.home-sec .more { padding: 0 var(--gutter); margin-top: clamp(28px, 4vw, 48px); }
.home-sec > .empty { padding-top: 28px; padding-bottom: 0; }
.home-sec .jr-list { padding-top: 28px; }
.home-prose { padding: 28px var(--gutter) 0; max-width: calc(var(--measure) + var(--gutter) * 2); }
.home-prose p { margin: 0 0 1em; text-wrap: pretty; }
.home-prose .more { padding: 0; margin-top: 1.6em; }
@media (min-width: 860px) { .home-prose { margin-left: 16.66vw; } }
.home-sec:last-of-type { padding-bottom: clamp(80px, 12vw, 160px); }

/* the last section is tall enough for its heading to settle under the logo like the others */
.home-sec:last-of-type { min-height: 100svh; }

.jr-ext { margin: .9em 0 0; font-family: var(--sans); font-weight: 500; font-size: 14px; letter-spacing: .16em; }
.jr-ext a:hover { color: var(--accent); }
.jr-all { padding: 0 var(--gutter); }
.jr-media { background: var(--rule); }
.jr-media img { aspect-ratio: 800 / 419; }

/* Journal / note: square cards in a sideways-scrolling rail */
.jr-rail-wrap { position: relative; padding-top: 28px; }
.jr-rail { list-style: none; margin: 0; padding: 0 var(--gutter) 10px; display: flex; gap: clamp(12px, 1.6vw, 20px); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-left: var(--gutter); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.jr-rail::-webkit-scrollbar { display: none; }
.jr-card { flex: 0 0 min(72vw, 300px); scroll-snap-align: start; min-width: 0; }
@media (min-width: 860px) { .jr-card { flex-basis: clamp(260px, 22vw, 340px); } }
.jr-card a { display: block; }
.jr-sq { display: block; aspect-ratio: 1 / 1; background: var(--rule); overflow: hidden; }
.jr-sq img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.jr-card a:hover .jr-sq img { transform: scale(1.03); }
.jr-card .jr-date { margin: 14px 0 .4em; }
.jr-ctitle { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: .98rem; line-height: 1.7; letter-spacing: .04em; overflow-wrap: anywhere; }
.jr-card a:hover .jr-ctitle { color: var(--accent); }
.jr-nav { display: none; }
@media (hover: hover) and (min-width: 860px) {
  .jr-nav { display: flex; gap: 8px; justify-content: flex-end; padding: 6px var(--gutter) 0; }
  .jr-nav button { width: 40px; height: 32px; border: 1px solid var(--rule); background: none; font-size: 15px; color: var(--ink); cursor: pointer; }
  .jr-nav button:hover { border-color: var(--accent); color: var(--accent); }
}

/* Contact form placed directly on TOP: sends in place, no page change */
.home-contact .form { margin-top: 2em; }
.form[hidden], .form-done[hidden], .form-error[hidden] { display: none; }
.form-error { margin: 0; color: var(--accent); font-size: .9rem; }
.form-done { margin: 2em 0 0; max-width: 30em; outline: none; animation: doneIn .9s ease both; }
@keyframes doneIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.btn[disabled] { opacity: .55; cursor: default; }
@media (prefers-reduced-motion: reduce) { .form-done { animation: none; } }

.field select { font: inherit; font-size: 1rem; width: 100%; background: transparent; color: var(--ink); border: 0; border-bottom: 1px solid var(--ink); padding: .5em 1.8em .5em 0; border-radius: 0; -webkit-appearance: none; appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2366635d' stroke-width='1.2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .2em center; }
.field select:invalid { color: var(--sub); }
.field select option { color: var(--ink); }
.field select:focus-visible, .field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Profile career list */
.career { margin: 1.8em 0 0; display: grid; grid-template-columns: 6.5em 1fr; gap: .7em 1em; font-size: .9em; color: var(--muted, inherit); }
.career dt { font-variant-numeric: tabular-nums; margin: 0; }
.career dd { margin: 0; }
@media (max-width: 600px) { .career { grid-template-columns: 5.5em 1fr; } }

/* Profile identity block */
.profile-id p { margin: 0; }
.pid-office { font-size: .7em; letter-spacing: .1em; }
.pid-brand { margin-top: .3em !important; font-family: "Cormorant Garamond", var(--serif); font-weight: 300; font-size: 1.8em; letter-spacing: .18em; line-height: 1.2; }
.pid-name { margin-top: 1.8em !important; font-size: 1.4em; letter-spacing: .12em; }
.pid-titles { margin-top: .5em !important; font-size: .85em; line-height: 1.9; }
.pid-career { margin-top: 2.2em !important; font-size: .75em; letter-spacing: .14em; }
.career { margin-top: .9em; font-size: .8em; }

/* Office address */
.office-addr { margin: clamp(72px, 10vw, 128px) 0 0; padding-top: 1.8em; border-top: 1px solid var(--rule); max-width: 33.3em; font-size: .9em; font-weight: 400; line-height: 2; color: var(--ink); }
.office-addr .meta { display: inline-block; margin-bottom: .7em; }
.office-text { margin: 0; }
.office-map { margin: 1.8em auto 0; aspect-ratio: 1 / 1; width: min(72%, 360px); background: var(--rule); }
.office-map iframe { display: block; width: 100%; height: 100%; border: 0; filter: grayscale(1) contrast(.95) brightness(1.04); }
.office-link { margin: .9em 0 0; font-family: var(--sans); font-weight: 500; font-size: 13px; letter-spacing: .12em; }

/* Office as its own home section: no divider needed */
.home-office .office-addr { margin-top: 0; padding-top: 0; border-top: 0; }

/* Office identity (home Office section) */
.office-id { display: grid; gap: .3em; margin-bottom: clamp(28px, 4vw, 44px); }
.office-reg { margin: .9em 0 0; font-size: .9em; letter-spacing: .06em; }
.office-id .footer-brand { font-size: 1.8em; }

/* Footer sign-off: much smaller than the Office wordmark */
.site-footer .footer-brand { font-size: clamp(1.15em, 2.2vw, 1.4em); letter-spacing: .2em; }
.footer-links { margin: 0; } .footer-links a:hover { color: var(--accent); }
.js .site-nav .lang { color: var(--sub); }

/* Contact lead */
.consult { max-width: var(--measure); }
.consult p { margin: 0 0 1.8em; word-break: auto-phrase; text-wrap: pretty; }
.consult-note { font-size: .85em; color: var(--sub); margin-bottom: 0 !important; }
.page-consult { margin-top: clamp(24px, 3.4vw, 40px); }
#news .news-row:first-child { border-top: 0; }
#news .news-list { padding-top: .6em; }

/* No grey flash on tap (mobile browsers draw a highlight box on links and buttons). Keyboard focus rings stay. */
* { -webkit-tap-highlight-color: transparent; }
.menu-btn:focus:not(:focus-visible), .site-nav a:focus:not(:focus-visible) { outline: none; }

/* Opening logo (TOP, once per browser session). Added to <html> by an inline script; never shown without JavaScript. */
.intro { display: none; }
html.intro-on { overflow: hidden; }
html.intro-on .intro { display: grid; place-items: center; position: fixed; inset: 0; z-index: 100; background: #ffffff; transition: opacity .9s ease; }
html.intro-on .intro img { width: clamp(150px, 22vw, 240px); height: auto; opacity: 0; animation: intro-logo 1s ease .15s forwards; }
html.intro-on .intro.out { opacity: 0; pointer-events: none; }
@keyframes intro-logo { to { opacity: 1; } }
html.intro-on .intro.replay { animation: intro-cover .45s ease both; }
@keyframes intro-cover { from { opacity: 0; } to { opacity: 1; } }

/* Contact page: the lead sits in the same column as the form, address and map */
.page-head-contact { padding-bottom: 0; }
@media (min-width: 860px) { .page-consult { margin-left: 16.66vw; } }

.form-privacy { justify-self: end; margin: 0; font-size: 12px; letter-spacing: .08em; color: var(--sub); } .form-privacy a { text-decoration: underline; text-underline-offset: .25em; text-decoration-color: var(--rule); }
.footer-legal { display: flex; gap: 1.4em; flex-wrap: wrap; justify-content: flex-end; }
.privacy p a { text-decoration: underline; text-underline-offset: .3em; text-decoration-color: var(--rule); } .privacy p a:hover { color: var(--accent); }


/* footer (v2) */
.site-footer { gap: 1.5em; padding: 40px 0 44px; }
.footer-name { margin: 0; font-family: "Cormorant Garamond", var(--serif); font-weight: 300; font-size: clamp(1.6em, 5vw, 2.2em); letter-spacing: .2em; line-height: 1.2; }
.footer-nav { display: flex; flex-wrap: wrap; gap: .5em 1.5em; font-family: "Cormorant Garamond", var(--serif); font-size: 1.15em; letter-spacing: .08em; }
.footer-legal { display: flex; flex-wrap: wrap; gap: .4em 1.5em; justify-content: flex-start; font-size: 11px; letter-spacing: .1em; color: var(--sub); }
.footer-lang { margin: 0; text-align: right; font-family: "Cormorant Garamond", var(--serif); letter-spacing: .1em; color: var(--sub); }
.footer-lang a[aria-current] { color: var(--ink, inherit); }
.footer-copy { margin: 0; text-align: right; font-family: "Cormorant Garamond", var(--serif); font-size: .85em; letter-spacing: .14em; color: var(--sub); }
.footer-nav a:hover, .footer-legal a:hover, .footer-lang a:hover { color: var(--accent); }
/* footer (tight) */
.site-footer { gap: .7em; padding: 28px 0 28px; }
.footer-nav { gap: .2em 1.2em; font-size: 1.05em; }
.footer-legal { gap: .2em 1.2em; margin-top: .3em; }
.footer-lang { margin-top: .4em; }
.footer-copy { font-size: .75em; }

a:focus:not(:focus-visible), button:focus:not(:focus-visible), summary:focus:not(:focus-visible) { outline: none; }

/* "approach" on TOP: label above a rule; the rule (with a chevron) travels down as the text opens */
.approach { margin-top: 3em; }
.approach-head { display: block; background: none; border: 0; padding: 0 0 .9em; cursor: pointer; font: inherit; font-family: var(--sans); font-weight: 500; font-size: 14px; letter-spacing: .16em; color: var(--ink); text-align: left; }
.approach-wrap { overflow: hidden; }
.approach-body { padding: .6em 0 1.6em; }
.approach-lead { font-family: var(--serif); letter-spacing: .08em; margin: 0 0 1.4em; color: var(--sub); }
.approach-rule { display: block; position: relative; width: 100%; height: 30px; padding: 0; background: none; border: 0; cursor: pointer; color: var(--ink); }
.approach-rule::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--rule); }
.approach-rule i { position: absolute; left: 50%; top: 50%; width: 44px; height: 30px; margin: -15px 0 0 -22px; background: var(--paper); }
.approach-rule b { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -6px 0 0 -4px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); transition: transform .5s cubic-bezier(.3,1.6,.5,1); }
.approach.is-open .approach-rule b { transform: translateY(4px) rotate(225deg); }

.approach-body { padding: 1em 0 1.8em; border-bottom: 1px solid var(--rule); }

.approach-head { padding: 1.1em 0 .4em; }
.approach-body { padding: .8em 0 1.8em; }
/* label sits on the rule, text centre line = rule line */
.approach { position: relative; }
.approach-head { position: absolute; left: 0; top: 0; height: 30px; line-height: 30px; padding: 0 16px 0 0; background: var(--paper); }
/* chevron ringed like the send button */
.approach-rule i { width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 1px solid var(--ink); border-radius: 50%; }
.approach-rule b { margin-top: -6px; }
.approach.is-open .approach-rule b { transform: translateY(4px) rotate(225deg); }
/* ring goes on the label (pill like the send button); chevron plain again */
.approach-rule i { width: 44px; height: 30px; margin: -15px 0 0 -22px; border: 0; border-radius: 0; }
.approach-head { height: auto; top: 15px; line-height: 1; padding: .8em 1.6em .8em calc(1.6em + .16em); transform: translateY(-50%); margin-top: 0; border: 1px solid var(--ink); border-radius: 999px; font-size: 13px; transition: none; }
.approach { --h: 30px; }
/* simple: chevron before the label, no rules, no ring */
.approach-rule { display: none; }
.approach-head { position: static; transform: none; height: auto; display: inline-flex; align-items: center; gap: .9em; padding: .4em 0; background: none; border: 0; border-radius: 0; font-size: 14px; letter-spacing: .16em; line-height: 1.6; }
.approach-head::before { content: ""; width: 8px; height: 8px; flex: none; margin-top: -3px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); transition: transform .5s cubic-bezier(.3,1.6,.5,1); }
.approach.is-open .approach-head::before { transform: translateY(3px) rotate(225deg); }
.approach-body { border-bottom: 0; padding: .8em 0 .4em; }
/* closed: chevron points at the label (right); open: points down at the text */
.approach-head::before { margin-top: 0; transform: translateX(-2px) rotate(-45deg); }
.approach.is-open .approach-head::before { margin-top: -3px; transform: translateY(0) rotate(45deg); }
/* approach text: all grey; heading one size up */
.approach-body p { color: var(--sub); }
.approach-body .approach-lead { font-size: 1.12em; }
.approach-wrap { cursor: pointer; }

/* smaller menu button; footer language switch identical to the one in the menu */
.footer-lang { margin: 0; text-align: right; font-family: inherit; letter-spacing: normal; color: inherit; }
.footer-lang .lang { font-family: var(--sans); font-weight: 500; font-size: 14px; letter-spacing: .16em; color: var(--sub); }
.footer-lang .lang a[aria-current="true"] { color: var(--ink); }

/* footer layout, tidied */
.site-footer { gap: 1.6em; padding: 36px 0 36px; }
.footer-nav { display: grid; grid-template-columns: repeat(3, max-content); justify-content: start; gap: .7em 2.4em; font-size: 1.05em; letter-spacing: .08em; }
.footer-legal { gap: .3em 1.6em; margin-top: .2em; }
.footer-base { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; margin-top: .4em; padding-top: 1.1em; border-top: 1px solid var(--rule); }
.footer-base .footer-copy, .footer-base .footer-lang { margin: 0; text-align: left; }
.footer-base .footer-copy { font-size: 12px; letter-spacing: .14em; }
.footer-base .footer-lang .lang { font-size: 12px; letter-spacing: .14em; }
/* footer menu: small and packed */
.footer-nav { display: flex; flex-wrap: wrap; gap: .2em 1.1em; font-size: 14px; letter-spacing: .06em; line-height: 1.6; }
.footer-nav { gap: .2em .8em; font-size: 13px; letter-spacing: .03em; }

/* footer: no rules; lining numerals in the copyright; copyright bottom right */
.site-footer { border-top: 0; }
.footer-base { border-top: 0; padding-top: .4em; }
.footer-base .footer-copy { font-family: "Cormorant Garamond", var(--serif); font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; text-align: right; margin-left: auto; }
.footer-base .footer-copy { font-family: var(--serif); font-variant-numeric: lining-nums; font-feature-settings: normal; letter-spacing: .12em; }

/* Instagram icon above the footer name */
.footer-ig { justify-self: start; display: inline-flex; padding: 6px 0; color: var(--ink); }
.footer-ig svg { fill: none; stroke: currentColor; stroke-width: 1.5; }
.footer-ig svg .dot { fill: currentColor; stroke: none; }

.footer-icons { display: flex; gap: 18px; align-items: center; justify-self: start; }
.footer-icons .footer-ig { padding: 6px 0; }
.footer-nav { text-transform: uppercase; letter-spacing: .1em; }
.footer-nav { font-size: 12px; letter-spacing: .05em; gap: .2em .8em; }
.footer-nav { font-size: 11px; letter-spacing: .03em; gap: .2em .65em; }
.footer-legal { margin-top: -.9em; }
.footer-legal { margin-top: -1.25em; }
/* office: more air in the address, map a little lower */
.office-text { line-height: 2.5; letter-spacing: .06em; }
.office-map { margin-top: 3em; }

/* essays */
.approach + .approach { margin-top: .6em; }
.essay { margin-top: clamp(56px, 8vw, 96px); }
.essay-title { margin: 0 0 1.4em; font-family: var(--serif); font-weight: 400; font-size: 1.12em; letter-spacing: .08em; line-height: 1.8; color: var(--sub); }

/* Journal page: tiled grid instead of the sideways rail */
.jr-tiles .jr-nav { display: none; }
.jr-tiles .jr-rail-wrap { padding-top: 0; }
.jr-tiles .jr-rail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 5vw, 48px) clamp(12px, 2vw, 24px); overflow: visible; scroll-snap-type: none; padding: 0 var(--gutter) 10px; }
.jr-tiles .jr-card { flex: none; scroll-snap-align: none; }
@media (min-width: 720px) { .jr-tiles .jr-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .jr-tiles .jr-rail { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* TOP journal rail: scrolls inside the same width as the rule above (gutter to gutter) */
.home-sec .jr-rail { margin: 0 var(--gutter); padding-left: 0; padding-right: 0; scroll-padding-left: 0; }

/* Contact form: review screen */
.form-confirm { padding: 4px 0 0; }
.form-confirm-title { margin: 0 0 1.2em; font-size: .95em; letter-spacing: .06em; }
.form-confirm dl { margin: 0 0 1.8em; }
.form-confirm dt { font-size: .75em; letter-spacing: .08em; color: var(--muted, #888); margin-top: 1.1em; }
.form-confirm dd { margin: .25em 0 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.9; }
.form-confirm-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.form-confirm .btn-ghost { background: transparent; color: var(--ink); border: 1px solid currentColor; }
.form [hidden] { display: none !important; }
.form-confirm { padding: 1.6em 1.5em 1.7em; background: rgba(0, 0, 0, .035); border: 1px solid rgba(0, 0, 0, .08); border-radius: 0; }
.form-done { padding: 1.6em 1.5em 1.7em; background: rgba(0, 0, 0, .035); border: 1px solid rgba(0, 0, 0, .08); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.form-done[hidden] { display: none; }
.form-done { margin-top: 2.4em; }
/* One tinted box for the form, its review screen and the thanks note */
.form { padding: 1.6em 1.5em 1.7em; background: rgba(0, 0, 0, .035); border: 1px solid rgba(0, 0, 0, .08); }
.form-confirm { padding: 0; background: none; border: 0; }
/* Contact copy: tighter leading */
.consult { line-height: 1.65; }
.consult p { margin: 0 0 .8em; }
.consult .consult-note { margin-top: 1em; }
/* TOP intro: tighter leading */
.stage-concept .concept-text { line-height: 1.85; }
.stage-concept .concept-text p { margin-bottom: 1.4em; }