/* STUDIOFENCE v21 REVIEW: source-order preserving combined theme. Review, not production. */

/* === theme-v13-monochrome.css === */

/* STUDIOFENCE v11 / PREVIEW-ONLY studio colour experiment. Images untouched. */
:root{
 --sf-color-bg:#FFFFFF;
 --sf-color-ink:#202020;
 --sf-color-muted:#616161;
 --sf-color-line:#E4E4E4;
 --sf-color-accent:#202020;
 --sf-color-panel:#202020;
 --sf-color-inverse:#202020;
 --sf-color-panel-muted:#656565;
 --bg:var(--sf-color-bg);--paper:var(--sf-color-bg);
 --ink:var(--sf-color-ink);--muted:var(--sf-color-muted);
 --faint:var(--sf-color-muted);--line:var(--sf-color-line);
 --image:transparent;--slot:var(--sf-color-bg);
}
html,body{background:var(--sf-color-bg)!important;color:var(--sf-color-ink)!important}
body,button,select,input,textarea{color:var(--sf-color-ink)}
/* Existing photographic geometry and natural color are never altered. */
img, picture, video{filter:none!important;mix-blend-mode:normal!important}
.qr-work-image,.qr-work-example .sf9-portrait-image,
.selected-photo img,.selected-hero{height:auto!important;max-height:none!important;object-fit:contain!important}
/* Shared editorial typography, rules and metadata. */
.header{color:var(--sf-color-bg)}
.page-title,.page-title h1,.page-lead,.hero h1,.work-head h1,.project-title,
.sf8-info-index > summary,.direction-page .quiet-index-heading,
.direction-page .quiet-index-copy,.content-body,.recognition-status,
.profile-list dd,.work-name{color:var(--sf-color-ink)!important}
.caption,.hero-meta,.section-label,.eyebrow,.qr-photo-bar,.work-head>p:last-child,
.work-period,.work-footer-note,.work-row .num,.work-row .work-type,
.work-location,.work-arr,.project-location,.qr-small,.qr-work-caption,
.direction-page .quiet-index-label,.direction-page .quiet-lead summary,
.direction-page .process-list span,.direction-page .partnership-list span,
.contact-panel p,.info-link p,.footer,.site-footer,
.page-end,.credit-line dt,.story-block h3{color:var(--sf-color-muted)!important}
.word-break p{color:var(--sf-color-muted)!important}
.section-label,.caption,.work-row,.index-row,.recognition-item,.profile-row,
.content-section,.footer,.site-footer,.work-list,.info-link,.contact-panel,
.direction-page .content-section.quiet-index,
.sf8-info-index,.qr-disclosure,.qr-secondary,.project-top{
 border-color:var(--sf-color-line)!important
}
.sf8-info-index > summary{border-color:var(--sf-color-line)!important}
.lang-switch a,.lang-switch a.is-active{color:var(--sf-color-ink)}
.recognition-link,.contact-panel a,.arrow,.footer a{color:var(--sf-color-accent)}
/* Fix former blend-induced salmon color in JP/EN language links. */
.lang-switch{mix-blend-mode:normal!important;color:var(--sf-color-ink)!important}
.lang-switch a{color:var(--sf-color-ink)!important}
/* The reading region is deep blue, not black. */
.qr-reading-canvas{background:var(--sf-color-panel)!important;color:var(--sf-color-inverse)!important}
.qr-reading-heading,.qr-reading-canvas .story h2,
.qr-reading-canvas .credit-line dd,
.qr-reading-canvas h1,.qr-reading-canvas h2{color:var(--sf-color-inverse)!important}
.qr-reading-canvas .story-block p,.qr-reading-canvas p,
.qr-reading-canvas .story{color:var(--sf-color-inverse)!important}
.qr-reading-canvas .eyebrow,.qr-reading-canvas .story-block h3,
.qr-reading-canvas .credit-line dt,.qr-reading-kicker,
.qr-reading-note{color:var(--sf-color-panel-muted)!important}
.qr-reading-canvas .credit-line{border-color:var(--sf-color-panel-muted)!important}
.sf8-skip,.skip{background:var(--sf-color-ink)!important;color:var(--sf-color-bg)!important}
:focus-visible,.qr-disclosure summary:focus-visible,.qr-secondary summary:focus-visible,
.direction-page .quiet-index summary:focus-visible,
.direction-page .quiet-lead summary:focus-visible{
 outline:2px solid var(--sf-color-accent)!important;outline-offset:4px!important
}
/* Unselected project media stays visually silent; never insert demo photographs. */
.photo-placeholder,.image-slot,.gallery-pending{background:var(--sf-color-bg)!important;border-color:var(--sf-color-line)!important}
/* Color may never be the sole signifier of interactive states. */
.top-nav [aria-current="page"]{text-decoration:underline;text-underline-offset:5px}

/* v13 / Photography-first monochrome; no image treatments, no production notes */
:root{--sf-color-bg:#FFFFFF;--sf-color-ink:#202020;--sf-color-muted:#616161;--sf-color-line:#E4E4E4;--sf-color-accent:#202020;--sf-color-panel:#FFFFFF;--sf-color-inverse:#202020;--sf-color-panel-muted:#656565;}
html,body{background:#FFFFFF!important;color:#202020!important}
.header{mix-blend-mode:normal!important;color:#202020!important}
.header .logo,.header .nav a,.site-header .brand,.site-header .top-nav a,
.site-header .language,.lang-switch,.lang-switch a{mix-blend-mode:normal!important;color:#202020!important}
.page-title h1{font-size:clamp(40px,5vw,68px)!important;line-height:1.06!important;letter-spacing:-.045em!important}
.page-title{min-height:auto!important;padding-bottom:clamp(45px,6.4vw,82px)!important}
.hero h1{font-size:clamp(52px,7vw,92px)!important;line-height:.98!important}
.work-head h1{font-size:clamp(48px,6.5vw,82px)!important;letter-spacing:-.05em!important;margin:14px 0 25px!important}
.work-name{font-size:clamp(21px,2.5vw,31px)!important;letter-spacing:-.025em!important}
.project-title{font-size:clamp(33px,4.3vw,58px)!important;letter-spacing:-.04em!important;line-height:1.14!important}
.qr-reading-heading{font-size:clamp(36px,5vw,66px)!important;line-height:1.12!important;letter-spacing:-.045em!important;margin-bottom:45px!important}
.qr-reading-canvas,.qr-reading-canvas .intro-grid,.qr-reading-canvas .story{background:#FFFFFF!important;color:#202020!important}
.qr-reading-canvas{border-top:1px solid #E4E4E4!important;border-bottom:1px solid #E4E4E4!important}
.qr-reading-heading,.qr-reading-canvas .story h2,
.qr-reading-canvas .credit-line dd,.qr-reading-canvas h1,.qr-reading-canvas h2,
.qr-reading-canvas .story-block p,.qr-reading-canvas p{color:#202020!important}
.qr-reading-kicker,.qr-reading-canvas .eyebrow,
.qr-reading-canvas .story-block h3,.qr-reading-canvas .credit-line dt,.qr-reading-note{color:#616161!important}
.qr-reading-canvas .credit-line{border-color:#E4E4E4!important}
.qr-reading-canvas .story h2{font-size:clamp(25px,3vw,38px)!important;line-height:1.38!important}
.direction-page .quiet-index-heading{font-size:clamp(31px,3.8vw,49px)!important;line-height:1.2!important;letter-spacing:-.035em!important}
.direction-page .quiet-index summary{padding:clamp(22px,3vw,42px) 0!important}
.direction-page .quiet-index-symbol{font-size:25px!important;font-weight:300!important}
.direction-page .contact-panel h2,.contact-panel h2,
.content-body h2{font-size:clamp(25px,2.9vw,38px)!important;line-height:1.26!important}
.sf8-info-index > summary,.sf8-summary-text{font-size:clamp(26px,3.2vw,40px)!important;line-height:1.27!important;letter-spacing:-.035em!important}
.sf8-info-index summary{padding-top:clamp(22px,3.2vw,44px)!important;padding-bottom:clamp(22px,3.2vw,44px)!important}
.sf8-info-index summary .sf8-index-action,.sf8-info-index summary .read-label{font-size:11px!important}
.info-link h2{font-size:clamp(25px,3vw,38px)!important}
.word-break p{font-size:clamp(24px,3.2vw,42px)!important}
.work-head>p:last-child,.project-lead,.page-lead{max-width:640px!important}
/* Color-change is limited to surfaces/type; photograph pixels remain untouched. */
img,picture,video{filter:none!important;mix-blend-mode:normal!important}
.qr-work-image,.qr-work-example .sf9-portrait-image,.selected-photo img,.selected-hero{object-fit:contain!important;height:auto!important;max-height:none!important}
/* Quiet navigation and visible keyboard focus. */
.nav a,.top-nav a,.lang-switch a{text-decoration-color:transparent}
.nav a:focus-visible,.top-nav a:focus-visible,summary:focus-visible,a:focus-visible,button:focus-visible{outline:2px solid #202020!important;outline-offset:4px!important}
@media(max-width:767px){
  .page-title h1{font-size:clamp(35px,9vw,46px)!important}
  .hero h1{font-size:clamp(49px,13vw,76px)!important}
  .work-head h1{font-size:clamp(42px,11vw,58px)!important}
  .project-title{font-size:clamp(31px,8vw,41px)!important}
  .direction-page .quiet-index-heading{font-size:clamp(30px,8vw,39px)!important}
  .direction-page .quiet-index summary{padding:26px 0!important}
  .sf8-info-index > summary,.sf8-summary-text{font-size:clamp(26px,7vw,33px)!important}
  .qr-reading-heading{font-size:clamp(32px,8vw,45px)!important;margin-bottom:32px!important}
  .qr-reading-canvas .story h2{font-size:clamp(23px,6.4vw,30px)!important}
  .work-name{font-size:clamp(21px,6vw,28px)!important}
  .content-body h2,.contact-panel h2{font-size:clamp(23px,6vw,31px)!important}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}


/* === theme-v14-quiet.css === */
/* STUDIOFENCE v14 / quiet editorial scale / review-only — existing text and photographs preserved */
:root{--sf-color-ink:#373737;--sf-color-muted:#626262;--sf-color-line:#e8e8e8;--ink:#373737;--muted:#626262;--line:#e8e8e8}
html,body{background:#fff!important;color:#373737!important}
.site-header .brand,.site-header .top-nav a,.site-header .language,.header .logo,.header .nav a,.lang-switch a{color:#373737!important}
/* A smaller shared typographic hierarchy; pages are led by photographs, not headlines. */
.page-title h1{font-size:clamp(29px,2.55vw,37px)!important;line-height:1.3!important;letter-spacing:-.035em!important;font-weight:400!important;color:#373737!important}
.page-title{min-height:auto!important;padding-bottom:55px!important}
.hero h1{font-size:clamp(42px,4.1vw,57px)!important;line-height:1.09!important;font-weight:400!important;color:#373737!important}
.work-head{padding-top:82px!important;padding-bottom:55px!important}
.work-head h1{font-size:clamp(31px,2.8vw,41px)!important;line-height:1.25!important;letter-spacing:-.045em!important;font-weight:400!important;margin:8px 0 15px!important;color:#373737!important}
.work-name{font-size:clamp(17px,1.6vw,21px)!important;line-height:1.45!important;letter-spacing:-.015em!important;font-weight:400!important;color:#373737!important}
.work-row{padding-top:22px!important;padding-bottom:22px!important}
.project-title{font-size:clamp(26px,2.5vw,36px)!important;line-height:1.27!important;letter-spacing:-.027em!important;font-weight:400!important;color:#373737!important}
.qr-reading-heading{font-size:clamp(28px,2.5vw,36px)!important;line-height:1.34!important;letter-spacing:-.03em!important;font-weight:400!important;margin-bottom:28px!important;color:#373737!important}
.qr-reading-canvas .story h2{font-size:clamp(20px,1.8vw,26px)!important;line-height:1.6!important;font-weight:400!important;color:#373737!important}
.direction-page .quiet-index-heading{font-size:clamp(20px,1.65vw,24px)!important;line-height:1.5!important;letter-spacing:-.02em!important;font-weight:400!important;color:#373737!important}
.direction-page .quiet-index summary{padding:25px 0!important;min-height:78px!important}
.direction-page .quiet-index-symbol{font-size:17px!important;color:#656565!important;font-weight:300!important}
.direction-page .contact-panel h2,.contact-panel h2,.content-body h2{font-size:clamp(21px,1.9vw,27px)!important;line-height:1.4!important;font-weight:400!important;color:#373737!important}
.sf8-info-index > summary,.sf8-summary-text{font-size:clamp(20px,1.7vw,24px)!important;line-height:1.5!important;letter-spacing:-.02em!important;font-weight:400!important;color:#373737!important}
.sf8-info-index summary{padding-top:22px!important;padding-bottom:22px!important;min-height:68px!important}
.info-link h2{font-size:clamp(21px,1.85vw,27px)!important;font-weight:400!important;color:#373737!important}
.word-break p{font-size:clamp(19px,2vw,27px)!important;line-height:1.65!important;color:#373737!important}
.page-lead,.quiet-intro,.intro p,.story-block p,.work-head>p:last-child{color:#515151!important;line-height:1.9!important}
/* Keep body text accessible. Do not reduce readable text beneath 14 px on mobile. */
.page-lead,.direction-page .quiet-lead,.content-body p{font-size:clamp(14px,1.1vw,16px)!important}
.caption,.eyebrow,.section-label,.work-row .num,.work-row .work-type,.work-location,.project-location,.credit-line dt{color:#626262!important}
.qr-reading-canvas,.qr-reading-canvas .intro-grid,.qr-reading-canvas .story{background:#fff!important;color:#373737!important}
.qr-reading-canvas .story-block p,.qr-reading-canvas p,.qr-reading-canvas .credit-line dd{color:#4b4b4b!important}
.qr-reading-canvas{border-color:#e8e8e8!important}
.work-row,.work-list,.qr-disclosure,.qr-secondary,.project-top,.sf8-info-index,.direction-page .quiet-index,.content-section,.site-footer{border-color:#e8e8e8!important}
img,picture,video{filter:none!important;mix-blend-mode:normal!important}
.qr-work-image,.qr-work-example .sf9-portrait-image,.selected-photo img,.selected-hero{height:auto!important;max-height:none!important;object-fit:contain!important}
:focus-visible{outline:2px solid #373737!important;outline-offset:4px!important}
@media(max-width:767px){
  .page-title h1{font-size:30px!important}.hero h1{font-size:clamp(39px,10vw,49px)!important}
  .work-head h1{font-size:33px!important}.work-head{padding:58px 0 35px!important}
  .project-title{font-size:clamp(25px,6vw,31px)!important}
  .direction-page .quiet-index-heading{font-size:21px!important}
  .direction-page .quiet-index summary{padding:20px 0!important;min-height:67px!important}
  .sf8-info-index > summary,.sf8-summary-text{font-size:21px!important}
  .qr-reading-heading{font-size:29px!important}.qr-reading-canvas .story h2{font-size:21px!important}
  .work-name{font-size:18px!important}
  .content-body h2,.contact-panel h2{font-size:23px!important}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* Final shared headline audit: disclosure and next-project links must never dominate photography. */
.qr-disclosure summary .qr-call,.qr-disclosure-head .qr-call,.qr-call{font-size:clamp(19px,1.8vw,25px)!important;letter-spacing:-.02em!important;line-height:1.45!important;font-weight:400!important;color:#454545!important}
.next-project a{font-size:clamp(19px,1.9vw,26px)!important;letter-spacing:-.02em!important;line-height:1.4!important;color:#454545!important}
.qr-plus,.qr-secondary summary span:last-child{font-size:16px!important;color:#656565!important}
@media(max-width:767px){.qr-disclosure summary .qr-call,.qr-call{font-size:20px!important}.next-project a{font-size:21px!important}}


/* === theme-v15-editorial.css === */
/* STUDIOFENCE / v15 / editorial depth - review only.
   Research insight: editorial architecture (sections, rules, controlled surface changes),
   NOT layouts, color systems, photography or typography copied from magazines.
   This is a preview-only layer on v14. 
*/
:root{
 --sf15-paper:#fff;
 --sf15-ink:#373737;
 --sf15-muted:#626262;
 --sf15-line:#e2e3e0;
 --sf15-panel:#f6f7f5;
 --sf15-accent:#516c5c; /* controlled and rare moss-ink accent, never a backdrop */
}
html,body{background:#fff!important;color:var(--sf15-ink)!important}
/* Each page has a clearly anchored editorial lead, but no large visual heading. */
.work-head,.page-title,.project-top{position:relative}
.work-head::before,.page-title::before,.project-top::before{
 content:"";position:absolute;top:36px;left:0;width:21px;height:2px;
 background:var(--sf15-accent);
}
.work-head::before{top:68px}
.page-title::before{top:-24px}
.project-top::before{top:40px}
/* Clear distinction between the section heading and the next module. */
.work-head{border-bottom:1px solid var(--sf15-line);margin-bottom:55px;padding-bottom:46px!important}
.page-title{border-bottom:1px solid var(--sf15-line)!important}
/* Quiet, consistently aligned secondary labels, not colored large titles. */
.eyebrow,.section-label,.work-row .num,.direction-page .quiet-index-label,
.project-top .eyebrow,.recognition-section .section-label,.profile-section .section-label{
 letter-spacing:.08em!important;
}
.work-row .num,.project-top .eyebrow{color:var(--sf15-accent)!important}
/* A reading table for Work: soft alternate bands and razor-fine rules.
   Keep photographer selected photo free from framing or cropping. */
.work-list{border-top:1px solid var(--sf15-line)!important;margin-top:0!important;margin-bottom:90px!important}
.work-row{padding-left:17px!important;padding-right:17px!important;transition:background .16s ease;min-height:70px}
.work-row:nth-child(even){background:var(--sf15-panel)}
.work-row:hover{background:#eef1ed!important}
.work-row:focus-visible{outline-offset:-3px!important}
.qr-work-example{border-bottom:1px solid var(--sf15-line);padding-bottom:45px;margin-bottom:0!important}
.qr-work-example .sf9-portrait{margin:0 auto!important;max-width:680px}
/* Info: separate opening manifesto from factual evidence without inflating copy. */
.info-page .recognition-section.sf8-info-index{
 background:var(--sf15-panel);border-top:1px solid var(--sf15-line)!important;
 border-bottom:1px solid var(--sf15-line)!important;padding-left:24px;padding-right:24px;
}
.info-page .profile-section.sf8-info-index{border-bottom:1px solid var(--sf15-line)!important}
/* Direction: one understated information stripe creates hierarchy and scanning rhythm. */
.direction-page .content-section.quiet-index:nth-of-type(3){
 background:var(--sf15-panel);padding-left:22px;padding-right:22px;
}
.direction-page .quiet-index{border-color:var(--sf15-line)!important}
.direction-page .contact-panel{border-top:1px solid var(--sf15-line)!important}
/* Contact: factual/service information can live on a calm separate paper field. */
.contact-page .content-section:nth-of-type(3){
 background:var(--sf15-panel);padding:26px 22px;border-top:1px solid var(--sf15-line);
 border-bottom:1px solid var(--sf15-line);
}
/* Project: never add a hero photo before selection; typography stays small. */
.project-top{border-color:var(--sf15-line)!important}
.qr-disclosure{border-color:var(--sf15-line)!important}
.qr-reading-canvas{background:var(--sf15-panel)!important;border-color:var(--sf15-line)!important}
.qr-reading-canvas .intro-grid,.qr-reading-canvas .story{background:transparent!important}
.qr-reading-canvas .story-block p,.qr-reading-canvas p{color:#494b49!important}
.qr-secondary,.detail-bottom,.credit-line{border-color:var(--sf15-line)!important}
/* Footer separators provide closure, not a new color block. */
.site-footer{border-top:1px solid var(--sf15-line)!important}
/* Main typography is deliberately inherited from the already-quiet v14. */
img,picture,video{filter:none!important;mix-blend-mode:normal!important}
.qr-work-image,.qr-work-example .sf9-portrait-image,.selected-photo img,.selected-hero{
 height:auto!important;max-height:none!important;object-fit:contain!important;
}
/* Visually quiet, keyboard-visible interactions. */
:focus-visible{outline:2px solid var(--sf15-ink)!important;outline-offset:4px!important}
@media(max-width:767px){
 .work-head::before{top:46px}
 .page-title::before{top:-24px}
 .project-top::before{top:17px}
 .work-head{margin-bottom:35px;padding-bottom:33px!important}
 .work-row{padding-left:10px!important;padding-right:10px!important;min-height:62px}
 .qr-work-example{padding-bottom:34px}
 .info-page .recognition-section.sf8-info-index{padding-left:14px;padding-right:14px}
 .direction-page .content-section.quiet-index:nth-of-type(3){padding-left:14px;padding-right:14px}
 .contact-page .content-section:nth-of-type(3){padding:22px 14px}
}
@media(prefers-reduced-motion:reduce){.work-row{transition:none!important}}


/* === theme-v16-hover.css === */
/* STUDIOFENCE v16 — quiet editorial interaction, review-only.
   Interactive rows remain white until the visitor deliberately hovers,
   focuses with keyboard, or presses. No photo alterations or motion effects. */
:root {
 --sf16-base: #ffffff;
 --sf16-hover: #f3f5f3;
 --sf16-active: #ecf0ec;
 --sf16-line: #e2e3e0;
 --sf16-ink: #373737;
}
/* Remove permanent background alternation and panel fill of v15. */
.work-list .work-row,
.work-list .work-row:nth-child(odd),
.work-list .work-row:nth-child(even),
.info-page details.sf8-info-index,
.info-page details.sf8-info-index[open],
.direction-page .content-section.quiet-index,
.direction-page .content-section.quiet-index:nth-of-type(3),
.contact-page .content-section:nth-of-type(3),
.qr-reading-canvas {
 background: var(--sf16-base) !important;
}
/* These decorative mini-rules no longer introduce a color at rest. */
.work-head::before,
.page-title::before,
.project-top::before {
 background: #d8dbd8 !important;
 height: 1px !important;
}
.work-row .num,
.project-top .eyebrow {
 color: #626262 !important;
}
/* Keep editorship through hairline separators; remove colored blocks. */
.work-list .work-row,
.info-page details.sf8-info-index > summary,
.direction-page .quiet-index,
.direction-page .quiet-index summary,
.qr-disclosure > summary,
.qr-secondary > summary {
 transition: background-color .16s ease !important;
}
/* Hover on clickable/expandable items only. Do not imply static text is clickable. */
@media (hover:hover) and (pointer:fine) {
 .work-list .work-row:hover,
 .info-page details.sf8-info-index > summary:hover,
 .direction-page .content-section.quiet-index:has(> details > summary:hover),
 .qr-disclosure > summary:hover,
 .qr-secondary > summary:hover {
  background-color: var(--sf16-hover) !important;
 }
}
/* Accessible keyboard counterpart (does not require a mouse). */
.work-list .work-row:focus-visible,
.info-page details.sf8-info-index:has(> summary:focus-visible) > summary,
.direction-page .content-section.quiet-index:has(> details > summary:focus-visible),
.qr-disclosure > summary:focus-visible,
.qr-secondary > summary:focus-visible {
 background-color: var(--sf16-hover) !important;
}
/* Finger tap response: temporary, never a stuck hover state. */
.work-list .work-row:active,
.info-page details.sf8-info-index > summary:active,
.direction-page .content-section.quiet-index:has(> details > summary:active),
.qr-disclosure > summary:active,
.qr-secondary > summary:active {
 background-color: var(--sf16-active) !important;
}
/* White, quieter secondary content. Hover is only for actions. */
.info-page .recognition-section.sf8-info-index,
.contact-page .content-section:nth-of-type(3) {
 border-color: var(--sf16-line) !important;
}
/* Expanded content stays clean; the row itself signals open/closed via the icon. */
.direction-page .quiet-index[open],
.direction-page .quiet-index details[open],
.info-page details.sf8-info-index[open] .content-body,
.qr-disclosure[open] .qr-reading-canvas {
 background-color: var(--sf16-base) !important;
}
@media (prefers-reduced-motion: reduce) {
 .work-list .work-row,
 .info-page details.sf8-info-index > summary,
 .direction-page .quiet-index,
 .direction-page .quiet-index summary,
 .qr-disclosure > summary,
 .qr-secondary > summary {
  transition: none !important;
 }
}


/* === theme-v17-navigation.css === */
/* STUDIOFENCE v17 | REVIEW ONLY | coherent navigation / direction alignment */
:root{ --sf17-ink:#373737; --sf17-muted:#626262; --sf17-line:#e6e6e6; --sf17-hover:#f3f5f3 }
/* End-of-scroll invitation after the photographic sequence. NOT an infinite-scroll Work page. */
.sf17-selected-work {max-width:1280px;margin:clamp(62px,9vw,145px) auto clamp(72px,10vw,160px);padding:0 clamp(20px,4vw,70px);color:var(--sf17-ink)}
.sf17-selected-work-head{display:flex;justify-content:space-between;align-items:baseline;gap:22px;border-top:1px solid var(--sf17-line);padding:clamp(22px,3.2vw,43px) 0 clamp(29px,4.2vw,58px)}
.sf17-selected-work h2{font-size:clamp(23px,2.3vw,32px)!important;line-height:1.3;font-weight:400;letter-spacing:-.03em;margin:0!important;font-family:var(--serif,Georgia,serif);color:var(--sf17-ink)}
.sf17-selected-work-head p{font-size:clamp(12px,1vw,14px);line-height:1.75;color:var(--sf17-muted);margin:0;max-width:490px;text-align:right}
.sf17-project-links{display:block}
.sf17-project-link{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:center;padding:23px 10px 23px 0;border-top:1px solid var(--sf17-line);text-decoration:none;color:var(--sf17-ink);font-size:clamp(14px,1.3vw,17px);line-height:1.55;transition:background-color .16s ease}
.sf17-project-link:last-child{border-bottom:1px solid var(--sf17-line)}
.sf17-project-link .sf17-arr{font-size:15px;color:var(--sf17-muted);font-weight:300}
@media (hover:hover) and (pointer:fine){.sf17-project-link:hover{background-color:var(--sf17-hover)}}
.sf17-project-link:focus-visible{background-color:var(--sf17-hover);outline:2px solid var(--sf17-ink);outline-offset:-2px}
.sf17-project-link:active{background-color:#ecf0ec}
.sf17-all-work{display:inline-block;margin-top:clamp(26px,3vw,44px);padding:8px 0;color:var(--sf17-ink);font-size:clamp(12px,1vw,14px);line-height:1.8;text-decoration:none;border-bottom:1px solid #999}
.sf17-all-work:hover,.sf17-all-work:focus-visible{border-color:var(--sf17-ink)}
/* Remove v15's one-off special panel/padding around 'Align.' (02 / design).
   All three direction details now have identical box model at rest and open. */
.direction-page .content-section.quiet-index,
.direction-page .content-section.quiet-index:nth-of-type(3){
 background:#fff!important;padding:0!important;margin:0!important;
 border-left:0!important;border-right:0!important;
 border-radius:0!important;box-shadow:none!important;
}
.direction-page .quiet-index details{border:0!important;padding:0!important;margin:0!important;background:#fff!important;box-shadow:none!important}
.direction-page .quiet-index summary {padding-left:0!important;padding-right:0!important;box-shadow:none!important;border-radius:0!important}
.direction-page .quiet-index .quiet-index-inner{padding-left:0!important;padding-right:0!important;border:0!important;box-shadow:none!important}
.direction-page .quiet-index summary:focus:not(:focus-visible){outline:none!important}
/* Restore the same subtle hover/focus signal for each row, including no.2. */
@media (hover:hover) and (pointer:fine){
.direction-page .content-section.quiet-index:has(> details > summary:hover),
.direction-page .content-section.quiet-index:nth-of-type(3):has(> details > summary:hover){background:var(--sf17-hover)!important}
}
.direction-page .content-section.quiet-index:has(> details > summary:focus-visible),
.direction-page .content-section.quiet-index:nth-of-type(3):has(> details > summary:focus-visible){background:var(--sf17-hover)!important}
.direction-page .content-section.quiet-index:has(> details > summary:active),
.direction-page .content-section.quiet-index:nth-of-type(3):has(> details > summary:active){background:#ecf0ec!important}
@media(max-width:767px){
.sf17-selected-work{padding:0 24px;margin:70px auto 94px}
.sf17-selected-work-head{display:block;padding:25px 0 27px}
.sf17-selected-work h2{font-size:25px!important}
.sf17-selected-work-head p{text-align:left;margin-top:13px;max-width:300px}
.sf17-project-link{padding:20px 0;font-size:15px}
}
@media(prefers-reduced-motion:reduce){.sf17-project-link{transition:none!important}}


/* === theme-v18-reading.css === */
/* v18: one neutral, readable label, not a metaphor or decorative headline. */
.qr-disclosure > .qr-disclosure-head{display:grid!important;grid-template-columns:minmax(0,1fr) 36px!important;gap:12px!important;align-items:center!important;padding:21px 2px 23px!important;min-height:68px!important}
.qr-disclosure > .qr-disclosure-head > .qr-small{grid-column:1!important;grid-row:1!important;font-family:var(--sans,Arial,sans-serif)!important;font-size:12px!important;line-height:1.5!important;font-weight:400!important;letter-spacing:.13em!important;color:#626262!important}
.qr-disclosure > .qr-disclosure-head > .qr-plus{grid-column:2!important;grid-row:1!important;justify-self:end!important;font-size:17px!important;line-height:1!important;color:#626262!important}
@media(max-width:760px){.qr-disclosure > .qr-disclosure-head{grid-template-columns:minmax(0,1fr) 34px!important;gap:10px!important;padding:18px 2px 20px!important;min-height:60px!important}}


/* === theme-v19-site.css === */
/* v20.1 QA patch — restored referenced stylesheet, no rejected homepage hero. */
.work-list .work-row{grid-template-columns:54px minmax(0,1fr) minmax(165px,29%)!important;gap:22px!important}
.work-row{cursor:pointer}
@media(max-width:900px){.work-list .work-row{grid-template-columns:45px minmax(0,1fr)!important;gap:14px!important}}


/* === theme-v20-home.css === */
/* v19: quiet project row links without decorative arrows; retained in v20. */
.work-list .work-row{grid-template-columns:54px minmax(0,1fr) minmax(165px,29%)!important;gap:22px!important}
.work-row{cursor:pointer}
@media(max-width:900px){.work-list .work-row{grid-template-columns:45px minmax(0,1fr)!important;gap:14px!important}}

/* v20: deliberate white space at Only Be Seen; single Selected Work destination. */
.sf20-selected-work{max-width:1280px;margin:clamp(62px,9vw,145px) auto clamp(72px,10vw,160px);padding:0 clamp(20px,4vw,70px)}
.sf20-selected-work-link{display:flex;align-items:center;min-height:116px;padding:30px 0;border-top:1px solid #e6e6e6;border-bottom:1px solid #e6e6e6;text-decoration:none;color:#373737;transition:background-color .16s ease}
.sf20-selected-work-link h2{font-size:clamp(21px,2.1vw,28px)!important;font-weight:400;line-height:1.35;letter-spacing:-.025em;margin:0!important;color:inherit;font-family:var(--serif,Georgia,serif)}
@media(hover:hover) and (pointer:fine){.sf20-selected-work-link:hover{background:#f3f5f3}}
.sf20-selected-work-link:focus-visible{outline:2px solid #373737;outline-offset:3px;background:#f3f5f3}
.sf20-selected-work-link:active{background:#eef0ee}
@media(max-width:767px){.sf20-selected-work{margin:70px auto 94px;padding:0 24px}.sf20-selected-work-link{min-height:98px;padding:26px 0}.sf20-selected-work-link h2{font-size:23px!important}}
@media(prefers-reduced-motion:reduce){.sf20-selected-work-link{transition:none!important}}