/* Hallmark · shape: Portfolio Grid · genre: editorial · theme: Specimen (deal 1/3, seed portfolio-aiko-mori-freelance-d9c9·91b11022·2026-10-30·r0) · job: hire · draw: 64e06b
 * hero: Ledge · nav: edge-aligned · footer: mast · imagery: photographs, Commons stand-ins, duotone ink paper · signature: Kyoto bamboo wedding portrait above a grounded typographic ledge
 * axes: light/high-contrast-serif/cool · posture: restrained · contrast: pass · fold: pass · hero-review: in-thread, ship, 0 findings · inferred: audience couples, enquiry action, intimate editorial tone · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S4 R5 V4 · weakest: S, replaced generic romantic imagery with a real Kyoto bamboo-grove portrait */
/* Hallmark · finish-review: in-thread · fix · 3 findings · 3 resolved in recapture · gap: multiple plates adapt Specimen to a photography portfolio */
/* Hallmark · sweep: Floor 0 FAIL · Reflex 0 · 0 WARN · offline interactions verified */
@import url("./tokens.css");
@import url("./base.css");

html { scroll-behavior: smooth; }
body { font-size: var(--text-md); }
h1, h2 { font-variation-settings: "opsz" var(--display-optical); }
button, a, input, select, textarea { -webkit-tap-highlight-color: var(--color-guide); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 5px; }
a:hover { text-decoration-thickness: 2px; }
a:active { color: var(--color-accent); }
.skip-link { position: absolute; inset-inline-start: var(--space-md); top: var(--space-md); z-index: var(--z-toast); background: var(--color-ink); color: var(--color-paper); padding: var(--space-sm) var(--space-lg); transform: translateY(-200%); }
.skip-link:focus-visible { transform: none; }
.site-header { height: 100px; }
.header-inner { height: 100%; display: flex; align-items: center; gap: var(--space-xl); }
.wordmark { font-family: var(--font-display); font-size: 37px; letter-spacing: var(--tracking-display); text-decoration: none; line-height: 1.2; white-space: nowrap; }
.wordmark span { color: var(--color-accent); }
.header-location { font-size: var(--text-xs); line-height: 1.45; color: var(--color-muted); }
.site-nav { display: flex; align-items: center; gap: var(--space-xl); margin-inline-start: auto; }
.site-nav a { display: inline-flex; align-items: center; min-height: 48px; font-size: var(--text-sm); text-decoration: none; white-space: nowrap; }
.site-nav a:hover { text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 5px; }
.site-nav .nav-contact { border-bottom: 1px solid var(--color-ink); min-height: 32px; }
.hero { height: calc(100svh - 100px); min-height: 610px; max-height: 1080px; display: flex; flex-direction: column; padding-block-end: var(--space-xl); }
.hero-photo { flex: 1; min-height: 0; margin: 0; }
.hero-photo img { object-position: 50% 63%; }
.hero-ledge { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--space-2xl); align-items: end; padding-block-start: var(--space-lg); }
.hero h1 { font-size: clamp(58px, 6.3vw, 96px); line-height: 1.03; max-width: 15ch; }
.hero-note { padding-block-end: var(--space-xs); }
.hero-note p { max-width: 29ch; margin-block-end: var(--space-lg); font-size: var(--text-md); line-height: 1.6; }
.button { min-height: 48px; padding: var(--space-sm) var(--space-lg); display: inline-flex; justify-content: center; align-items: center; border: 1px solid var(--color-ink); border-radius: var(--radius-card); background: var(--color-ink); color: var(--color-paper); font-size: var(--text-sm); font-weight: 500; line-height: 1.5; text-decoration: none; cursor: pointer; }
.button:hover { background: var(--color-ink-2); text-decoration: none; }
.button:active { background: var(--color-ink); color: var(--color-paper); transform: translateY(1px); }
.button:disabled, .button[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.button[aria-busy="true"] { cursor: progress; }
.button--quiet { background: var(--color-paper); color: var(--color-ink); }
.button--quiet:hover { background: var(--color-paper-2); }
.button--quiet:active { color: var(--color-ink); background: var(--color-paper-3); }
.section { padding-block: var(--section-gap-s); }
.approach { padding-block-start: var(--section-gap); padding-block-end: var(--section-gap-s); }
.approach-inner { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--gap-columns); align-items: end; }
.approach h2 { font-size: clamp(42px, 4.6vw, 66px); max-width: 18ch; line-height: 1.16; }
.approach-note { padding-block-end: var(--space-xs); }
.approach-note p { margin-block-end: var(--space-md); max-width: 45ch; }
.text-link { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--text-sm); text-decoration-color: var(--color-accent); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: var(--gap-columns); margin-block-end: var(--space-2xl); }
.section-heading p { font-size: var(--text-sm); color: var(--color-muted); }
.work { padding-block-start: var(--space-2xl); padding-block-end: var(--section-gap); }
.photo-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-columns); }
.work-item { min-width: 0; margin: 0; }
.work-item--offset { padding-block-start: var(--space-3xl); }
.photo-link { display: block; }
.photo-link:focus-visible { outline-offset: 5px; }
.photo-link:hover { outline: 1px solid var(--color-rule-2); outline-offset: 5px; }
.work-photo { display: block; width: 100%; }
.work-photo--portrait { aspect-ratio: 1 / 1.05; }
.work-photo--portrait img { object-position: 50% 45%; }
.work-photo--place { aspect-ratio: 5 / 4; }
.work-item figcaption { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 60px; font-size: var(--text-sm); }
.work-item figcaption a { color: var(--color-muted); white-space: nowrap; text-decoration-color: var(--color-accent); }
.work-footnote { font-size: var(--text-xs); color: var(--color-muted); margin-block-start: var(--space-xl); }
.about { background: var(--color-paper-2); }
.about-intro { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-columns); align-items: center; }
.about h2 { font-size: clamp(64px, 7vw, 100px); line-height: 1.04; }
.about-copy { max-width: 49ch; }
.about-copy .lead { margin-block-end: var(--space-lg); }
.about-copy > p:not(.lead) { margin-block-end: var(--space-md); }
.approach-list { margin: var(--space-3xl) 0 0; padding: 0; border-top: 3px double var(--color-rule-2); }
.approach-list > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-columns); align-items: center; min-height: 80px; border-bottom: 1px solid var(--color-rule); }
.approach-list dt { font-weight: 500; }
.approach-list dd { margin: 0; color: var(--color-muted); font-size: var(--text-sm); }
.enquire { padding-block: var(--section-gap); }
.enquiry-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-columns); align-items: start; }
.enquiry-intro h2 { max-width: 12ch; }
.enquiry-intro > p { margin-block-start: var(--space-lg); max-width: 32ch; }
.enquiry-intro .contact-note { margin-block-start: var(--space-2xl); }
.contact-note { font-size: var(--text-sm); color: var(--color-muted); max-width: 32ch; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--gap-columns); }
.field { min-width: 0; }
.field label { display: block; font-size: var(--text-sm); margin-block-end: var(--space-xs); }
.field label span { color: var(--color-muted); }
input, textarea { width: 100%; min-width: 0; border: 1px solid var(--color-muted); border-radius: var(--radius-card); padding: var(--space-sm); background: var(--color-paper); color: var(--color-ink); outline: 2px solid transparent; outline-offset: -3px; }
input { height: 48px; }
textarea { display: block; min-height: 128px; resize: vertical; }
input:hover, textarea:hover { background: var(--color-paper-2); }
input:focus-visible, textarea:focus-visible { outline-color: var(--color-focus); }
input:disabled, textarea:disabled { opacity: 0.55; cursor: not-allowed; }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--color-error); }
.field-help { font-size: var(--text-xs); color: var(--color-error); min-height: 1lh; margin-block: var(--space-2xs) var(--space-sm); }
.form-status { font-size: var(--text-sm); min-height: 1lh; margin-block-start: var(--space-md); color: var(--color-muted); }
.draft-result { margin-block-start: var(--space-lg); padding-block-start: var(--space-lg); border-top: 1px solid var(--color-rule); }
.draft-result h3 { margin-block-end: var(--space-lg); }
.draft-result textarea { font-size: var(--text-sm); line-height: 1.6; }
.draft-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-sm); margin-block-start: var(--space-md); }
.site-footer { padding-block: var(--space-2xl) var(--space-xl); border-top: 1px solid var(--color-rule); }
.footer-name { display: block; width: fit-content; font-family: var(--font-display); font-size: clamp(56px, 12.5vw, 180px); font-variation-settings: "opsz" var(--display-optical); letter-spacing: -0.045em; line-height: 1.15; text-decoration: none; white-space: nowrap; }
.footer-name:hover { color: var(--color-ink-2); }
.footer-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); padding-block: var(--space-xl); font-size: var(--text-sm); }
.footer-row nav { display: flex; align-items: center; gap: var(--space-lg); }
.footer-row a { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; }
.photo-credits { border-top: 1px solid var(--color-rule); padding-block-start: var(--space-md); font-size: var(--text-xs); color: var(--color-muted); }
.photo-credits summary { width: fit-content; cursor: pointer; min-height: 44px; padding-block: var(--space-sm); }
.photo-credits summary:hover { color: var(--color-ink); }
.photo-credits summary:active { color: var(--color-accent); }
.photo-credits p { max-width: 100%; margin-block-start: var(--space-sm); line-height: 1.7; }
.photo-credits a { white-space: nowrap; }
.photo-viewer { position: fixed; inset: 0; margin: auto; width: min(1060px, 94%); max-width: 94%; height: fit-content; max-height: 94dvh; border: 1px solid var(--color-rule); padding: var(--space-lg); background: var(--color-paper); color: var(--color-ink); overflow-y: auto; }
.photo-viewer::backdrop { background: var(--color-backdrop); }
.viewer-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); margin-block-end: var(--space-md); }
.viewer-toolbar > p { font-size: var(--text-sm); }
.viewer-photo { margin: 0; height: min(66dvh, 690px); background: var(--color-paper-2); }
.viewer-photo > img { object-fit: contain; mix-blend-mode: normal; }
.viewer-photo:has(> img)::before { display: none; }
.viewer-bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin-block-start: var(--space-sm); }
.viewer-nav { padding: var(--space-xs) 0; min-height: 44px; background: var(--color-clear); border: 0; color: var(--color-ink); cursor: pointer; font-size: var(--text-sm); text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 0.18em; }
.viewer-nav:hover { text-decoration-thickness: 2px; }
.viewer-nav:active { color: var(--color-accent); }
.viewer-nav:disabled { opacity: 0.55; cursor: not-allowed; }
.viewer-count { font-size: var(--text-sm); color: var(--color-muted); }
@media (max-width: 60rem) {
  .site-header { height: 88px; }
  .header-inner { gap: var(--space-lg); }
  .header-location { display: none; }
  .site-nav { gap: var(--space-lg); }
  .hero { min-height: 0; height: auto; padding-block-end: var(--space-2xl); }
  .hero-photo { flex: none; aspect-ratio: 4 / 3; }
  .hero-ledge { gap: var(--space-lg); grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .hero h1 { font-size: clamp(52px, 7vw, 72px); }
  .approach-inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .approach h2 { max-width: 22ch; }
  .approach-note { max-width: 49ch; }
  .approach-note p { max-width: 49ch; }
  .section-heading { align-items: start; }
  .work-item--offset { padding-block-start: var(--space-xl); }
  .work-item figcaption { align-items: start; flex-direction: column; justify-content: start; gap: var(--space-xs); padding-block-start: var(--space-md); }
  .about-intro { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .about-copy { max-width: 60ch; }
  .enquiry-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); }
  .enquiry-intro h2 { max-width: 20ch; }
  .enquiry-intro .contact-note { margin-block-start: var(--space-lg); max-width: 40ch; }
  .footer-row { flex-wrap: wrap; }
  .footer-row > p { width: 100%; }
}
@media (max-width: 40rem) {
  .site-header { height: 80px; }
  .wordmark { font-size: 30px; }
  .site-nav { gap: var(--space-md); }
  .site-nav a { font-size: var(--text-sm); }
  .site-nav a:nth-child(2) { display: none; }
  .hero-photo { aspect-ratio: 1 / 1.1; }
  .hero-photo img { object-position: 31% 55%; }
  .hero-ledge { grid-template-columns: minmax(0, 1fr); padding-block-start: var(--space-lg); }
  .hero h1 { font-size: clamp(48px, 11.9vw, 72px); }
  .hero-note { display: flex; flex-direction: column; align-items: flex-start; }
  .hero-note p { max-width: 29ch; margin-block-end: var(--space-md); }
  .section-heading { flex-direction: column; align-items: start; gap: var(--space-lg); margin-block-end: var(--space-xl); }
  .approach h2 { font-size: clamp(32px, 9.4vw, 44px); }
  .photo-pair { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-xl); }
  .work-item--offset { padding-block-start: 0; }
  .work-item figcaption { flex-direction: row; justify-content: space-between; align-items: center; }
  .work-footnote { max-width: 35ch; }
  .about h2 { font-size: clamp(60px, 17vw, 80px); }
  .approach-list { margin-block-start: var(--space-2xl); }
  .approach-list > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); padding-block: var(--space-lg); }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .enquiry-intro h2 { font-size: clamp(38px, 10.7vw, 52px); }
  .footer-row { align-items: start; gap: var(--space-md); padding-block: var(--space-lg); }
  .footer-row nav { gap: var(--space-md); }
  .photo-viewer { padding: var(--space-md); }
  .viewer-photo { height: 58dvh; }
  .draft-actions { align-items: stretch; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}