/* Independent Codex study: shared margins, quieter typography, photography first. */
:root { --side:clamp(22px,4vw,76px); --ink:#303030; --muted:#707070; --line:#dedede; }
.site-header { min-height:126px; padding:25px var(--side); gap:38px; }
.brand { width:70px; }
.header-right { gap:26px; }
.site-header nav { gap:clamp(22px,2.4vw,38px); }
.site-header nav a { font-size:18px; letter-spacing:.045em; }
.social-links { border-left:1px solid var(--line); padding-left:22px; gap:7px; }
.social-link { opacity:.64; }
.works-page { max-width:1800px; margin:auto; padding-top:30px; padding-bottom:90px; }
.collection-heading { margin-bottom:34px; align-items:baseline; }
.collection-heading h1 { font-size:17px; letter-spacing:.05em; }
.work-categories { gap:26px; }
.work-categories a { font-size:14px; letter-spacing:.04em; }
.works-grid { gap:55px 24px; }
.work-card figure { aspect-ratio:3/2; }
.work-card img { transition:opacity .3s ease; }
.work-card:hover img { transform:none; opacity:.91; }
.work-card h2 { font-size:15px; letter-spacing:.035em; margin-top:16px; }

/* Keep the room open above each lower-right reading panel. */
.photo-introduction { min-height:560px; height:clamp(560px,75svh,820px); padding:40px var(--side); align-items:flex-end; }
.photo-panel { background:rgba(250,250,250,.86); padding:34px 38px; }
.photo-panel .section-label { font-size:14px; letter-spacing:.055em; margin-bottom:18px; }
.photo-panel h1 { font-size:24px; margin-bottom:22px; line-height:1.6; }
.photo-panel p { line-height:2.15; }
.about-panel,.process-photo-introduction .photo-panel { width:620px; padding:34px 38px; }
.about-panel .about-brand-heading { gap:10px 20px; margin-bottom:23px; }
.about-brand-heading .brand-wordmark { font-size:24px; letter-spacing:.1em; }
.about-brand-heading .about-english { font-size:20px; letter-spacing:.025em; }
.about-panel .about-statements p { font-size:16px; line-height:2.15; font-weight:400; }
.about-reading { max-width:1120px; grid-template-columns:180px minmax(0,680px); gap:56px; padding-top:78px; padding-bottom:92px; }
.about-body p { font-size:16px; line-height:2.2; margin-bottom:22px; }
.photo-panel .inquiry-actions { margin-top:23px; gap:12px; }
.photo-panel .inquiry-primary { background:#343434; padding:10px 17px; }
.photo-panel .inquiry-secondary { padding:9px 16px; }

/* A readable service index accompanies the full, expanded process. */
.process-page { max-width:1350px; grid-template-columns:280px minmax(0,1fr); gap:clamp(50px,7vw,100px); margin:80px auto 100px; }
.process-detail-heading { position:sticky; top:36px; }
.process-detail-heading > p:last-of-type { font-size:17px; white-space:nowrap; line-height:1.9; margin-bottom:29px; }
.process-index { display:grid; border-top:1px solid var(--line); padding-top:18px; }
.process-index a { display:flex; align-items:baseline; gap:18px; padding:8px 0; font-size:14px; color:var(--muted); }
.process-index span { font:400 14px/1.7 "Day Navigation",sans-serif; color:#888; }
.process-index a:hover,.process-index a:focus-visible { color:var(--ink); text-decoration:underline; text-underline-offset:5px; }
.process-step { grid-template-columns:42px minmax(0,1fr); gap:20px; padding:29px 0 42px; scroll-margin-top:30px; }
.step-number { font-size:22px; line-height:1.4; color:#777; }
.step-body .section-label { font-size:13px; letter-spacing:.045em; margin-bottom:7px; }
.step-body h2 { font-size:22px; margin-bottom:17px; }
.step-body > p { font-size:15px; line-height:2; margin-bottom:18px; }
.step-body ul { padding-left:1.1em; font-size:15px; }
.step-body li { line-height:1.95; margin:5px 0; }
.step-note { margin-top:23px; padding-left:18px; }
.step-note p { line-height:1.95; }

.contact-page { max-width:1440px; margin:76px auto 90px; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:80px; }
.contact-name { font-size:20px; margin-bottom:30px; }
.contact-name span { display:inline-block; font-size:16px; margin-left:18px; }
.contact-information address a,.contact-information address p { display:grid; grid-template-columns:62px minmax(0,1fr); column-gap:20px; line-height:2; margin:0 0 13px; }
.contact-field-label { font-family:"Day Navigation",sans-serif; font-size:16px; letter-spacing:.025em; color:var(--muted); }
.contact-map { height:360px; }
.map-link { margin-top:12px; font-size:13px; }

/* See the project first; read its story immediately below the photograph. */
.project-cover { max-width:1350px; }
.project-cover img { max-height:78svh; object-fit:contain; }
.project-opening { max-width:1270px; margin:46px auto 30px; grid-template-columns:150px minmax(0,1fr) 160px; gap:35px; }
.project-opening h1 { font-size:28px; letter-spacing:.04em; margin-bottom:14px; }
.project-category { margin-bottom:8px; }
.project-intro { font-size:15px; line-height:2.15; }
.project-facts { align-self:start; padding-top:26px; line-height:2; }
.project-story { max-width:1270px; grid-template-columns:150px minmax(0,1fr); gap:35px; margin:0 auto 42px; }
.project-story p:last-child { max-width:690px; font-size:15px; line-height:2.15; }
.project-gallery { gap:28px; }
.gallery-row { max-width:1180px; gap:22px; }
.gallery-row.portraits { max-width:790px; }
.project-end { max-width:1350px; margin-top:46px; }

@media(max-width:1050px) {
  .header-right { gap:18px; }
  .site-header nav { gap:22px; }
  .social-links { padding-left:15px; }
  .process-page { grid-template-columns:238px minmax(0,1fr); gap:38px; }
  .contact-page { gap:45px; }
  .project-opening { grid-template-columns:110px minmax(0,1fr); gap:26px; }
  .project-facts { grid-column:2; flex-direction:row; flex-wrap:wrap; gap:6px 18px; padding-top:0; }
  .project-story { grid-template-columns:110px minmax(0,1fr); gap:26px; }
}
@media(max-width:800px) {
  .site-header { min-height:104px; padding:22px var(--side); align-items:center; gap:24px; }
  .brand { width:58px; }
  .site-header nav { gap:20px; }
  .header-right { gap:5px 18px; }
  .social-links { border:0; padding:0; }
  .works-page { padding-top:20px; }
  .works-grid { gap:35px 18px; }
  .photo-introduction { height:auto; min-height:0; display:block; padding:0; background:white; }
  .introduction-image { position:relative; display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:contain; }
  .photo-panel,.about-panel,.process-photo-introduction .photo-panel { width:auto; min-width:0; max-width:none; margin:0; padding:30px var(--side) 0; position:relative; background:transparent; }
  .about-panel .about-statements p,.process-summary span,.process-photo-introduction .small-note { white-space:normal; }
  .about-reading { display:block; padding-top:48px; padding-bottom:60px; }
  .about-reading > .section-label { margin-bottom:19px; }
  .process-page { grid-template-columns:minmax(0,1fr); gap:36px; margin:54px auto 65px; }
  .process-detail-heading { position:static; }
  .process-detail-heading > p:last-of-type { margin-bottom:20px; }
  .process-index { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px 18px; padding-top:16px; }
  .process-index a { gap:10px; font-size:13px; }
  .contact-page { grid-template-columns:minmax(0,1fr); gap:35px; margin:55px auto 65px; }
  .contact-map { height:320px; }
  .project-cover img { max-height:75svh; }
  .project-opening { margin-top:32px; }
}
@media(max-width:540px) {
  .site-header { flex-direction:row; gap:18px; padding-top:20px; padding-bottom:20px; }
  .brand { width:52px; }
  .header-right { width:auto; flex:1; min-width:0; justify-content:flex-end; gap:0; }
  .site-header nav { flex:1 0 100%; flex-wrap:nowrap; justify-content:space-between; gap:8px; }
  .site-header nav a { font-size:15px; letter-spacing:.025em; }
  .social-links { gap:9px; }
  .social-link { width:23px; min-height:28px; }
  .social-link img { width:14px; height:14px; }
  .collection-heading { margin-bottom:23px; }
  .collection-heading h1 { font-size:16px; }
  .work-categories { gap:24px; margin-top:10px; }
  .works-grid { grid-template-columns:minmax(0,1fr); gap:32px; }
  .work-card h2 { margin-top:13px; }
  .photo-panel,.about-panel,.process-photo-introduction .photo-panel { margin:0; padding:26px var(--side) 0; }
  .photo-panel h1 { font-size:22px; }
  .photo-panel .about-brand-heading { flex-wrap:wrap; gap:6px 15px; }
  .about-brand-heading .brand-wordmark { font-size:22px; }
  .about-brand-heading .about-english { font-size:18px; }
  .photo-panel p,.about-panel .about-statements p { font-size:16px; line-height:2.1; }
  .process-index { grid-template-columns:repeat(2,minmax(0,1fr)); gap:2px 15px; }
  .process-step { grid-template-columns:28px minmax(0,1fr); gap:16px; padding:25px 0 35px; }
  .step-number { font-size:19px; }
  .step-body h2 { font-size:20px; }
  .contact-name { font-size:19px; }
  .contact-name span { margin-left:12px; font-size:15px; }
  .contact-information address a,.contact-information address p { grid-template-columns:48px minmax(0,1fr); column-gap:12px; font-size:14px; }
  .contact-map { height:280px; }
  .project-opening { display:block; margin:28px auto 24px; }
  .project-opening > .section-label { margin-bottom:12px; }
  .project-opening h1 { font-size:25px; }
  .project-facts { margin-top:18px; }
  .project-story { display:block; margin-bottom:30px; }
  .project-story .section-label { margin-bottom:12px; }
  .project-gallery { gap:22px; }
  .gallery-row { gap:14px; }
}
@media(max-width:400px) {
  .photo-panel .inquiry-actions { flex-direction:column; gap:10px; }
  .photo-panel .inquiry-primary,.photo-panel .inquiry-secondary { width:100%; min-height:44px; }
}
@media(prefers-reduced-motion:reduce) { .work-card img { transition:none; } }