@charset "UTF-8";
/* STUDIOFENCE / Project detail preview only. No global live site styles altered. */
:root{color-scheme:light;--paper:#f9f9f7;--ink:#1f201e;--muted:#71736e;--line:#d9dad6;--slot:#e6e7e4;--rail:min(100% - 112px,1460px);--reading:580px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:14px/1.8 -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,"Noto Sans JP",sans-serif;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:4px}
a:focus-visible{outline:2px solid #47534d;outline-offset:5px}
.skip{position:absolute;top:-80px;left:14px;background:#fff;padding:9px 14px;z-index:100}
.skip:focus{top:10px}
.site-header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:25px max(56px,calc((100% - 1460px)/2));min-height:84px;position:relative}
.brand{font-size:13px;font-weight:650;letter-spacing:.045em;white-space:nowrap}
.top-nav{display:flex;gap:32px;align-items:center;font-size:12px;letter-spacing:.035em}
.project-shell{width:var(--rail);margin:auto}
.eyebrow{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);line-height:1.5}
.project-top{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:16px;padding:75px 0 31px;border-bottom:1px solid var(--line)}
.project-title{font-weight:450;letter-spacing:-.057em;font-size:clamp(36px,5.5vw,79px);line-height:1.09;max-width:1010px;margin:16px 0 0;overflow-wrap:break-word}
.project-location{font-size:11px;letter-spacing:.03em;color:var(--muted);padding-bottom:8px;text-align:right;white-space:nowrap}
.preview-banner{background:#efefe9;color:#5b5e56;padding:11px 14px;font-size:11px;margin:22px 0 0;letter-spacing:.02em;display:flex;align-items:center;gap:12px}
.preview-banner:before{content:"";width:5px;height:5px;background:#7a8075;border-radius:50%;flex:none}
.hero{padding-top:31px}
.image-slot{background:var(--slot);border:1px solid #dedfdc;display:grid;align-content:center;justify-items:center;position:relative;overflow:hidden;text-align:center;min-height:240px;color:#62655f}
.image-slot::before,.image-slot::after{position:absolute;content:"";width:16px;height:16px;border:solid #babdb7;opacity:.52}
.image-slot::before{top:20px;left:20px;border-width:1px 0 0 1px}
.image-slot::after{bottom:20px;right:20px;border-width:0 1px 1px 0}
.slot-hero{aspect-ratio:1.9;max-height:760px}
.slot-eyebrow{font-size:10px;letter-spacing:.17em;text-transform:uppercase}
.slot-desc{font-size:11px;margin-top:6px;letter-spacing:.02em}
.intro-grid{display:grid;grid-template-columns:minmax(260px,.6fr) minmax(0,1fr);gap:clamp(50px,11vw,180px);padding:104px 0 128px}
.credits{align-self:start;display:grid;grid-template-columns:1fr;gap:0;max-width:430px;margin:0}
.credit-line{display:grid;grid-template-columns:minmax(120px,43%) 1fr;gap:18px;border-bottom:1px solid var(--line);padding:13px 0;font-size:11px;line-height:1.6}
.credit-line dt{color:var(--muted)}.credit-line dd{margin:0}
.story{width:min(100%,700px);padding-top:4px}.story h2{font-size:clamp(22px,2.8vw,34px);line-height:1.5;letter-spacing:-.03em;font-weight:430;margin:10px 0 30px}
.story-block{display:grid;grid-template-columns:115px 1fr;gap:15px;margin-top:32px;align-items:start}
.story-block p{margin:0;font-size:13px;line-height:2.1;letter-spacing:.013em}
.photo-study{border-top:1px solid var(--line);padding-top:27px}
.study-head{display:flex;justify-content:space-between;gap:30px;align-items:baseline;margin-bottom:44px}
.study-head h2{font-size:11px;font-weight:500;letter-spacing:.1em;margin:0;text-transform:uppercase}
.study-note{font-size:11px;color:var(--muted)}
.photo-stack{display:grid;gap:78px}.slot-wide{aspect-ratio:1.78}.slot-pair{display:grid;grid-template-columns:1fr 1fr;gap:22px}.slot-tall{aspect-ratio:.8}
.img-caption{font-size:10px;color:var(--muted);display:flex;justify-content:space-between;margin-top:12px;gap:10px}
.detail-bottom{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:100px 0;border-bottom:1px solid var(--line)}
.recognition h2,.editorial h2{font-size:10px;color:var(--muted);letter-spacing:.14em;font-weight:450;text-transform:uppercase;margin:0 0 19px}
.recognition p,.editorial p{font-size:12px;line-height:1.9;max-width:480px;margin:0}
.editorial{border-left:1px solid var(--line);padding-left:38px}
.page-end{display:flex;justify-content:space-between;align-items:flex-end;gap:35px;padding:105px 0 90px}
.next-project .eyebrow{margin-bottom:16px}.next-project a{display:block;font-size:clamp(27px,3vw,44px);line-height:1.2;letter-spacing:-.04em}
.contact-link{font-size:12px;white-space:nowrap;border-bottom:1px solid var(--ink);padding-bottom:6px}
.site-footer{width:var(--rail);margin:auto;border-top:1px solid var(--line);padding:23px 0 32px;display:flex;justify-content:space-between;font-size:10px;letter-spacing:.08em;color:var(--muted)}
.site-footer a{color:var(--ink)}
@media(max-width:900px){:root{--rail:calc(100% - 52px)}.site-header{padding:19px 26px;min-height:70px}.project-top{padding-top:52px}.intro-grid{gap:50px;grid-template-columns:1fr;padding:72px 0 90px}.story{max-width:680px}.credits{max-width:650px}.page-end{padding:75px 0}}
@media(max-width:600px){:root{--rail:calc(100% - 36px)}.site-header{padding:18px;gap:12px;flex-wrap:wrap}.brand{font-size:12px}.top-nav{gap:17px;font-size:10px}.project-top{grid-template-columns:1fr;gap:13px;padding:40px 0 22px}.project-title{font-size:clamp(33px,10vw,49px);letter-spacing:-.045em;margin-top:14px}.project-location{text-align:left;padding:0}.preview-banner{font-size:10px;line-height:1.6}.hero{padding-top:20px}.slot-hero{aspect-ratio:1.1;min-height:300px}.intro-grid{padding:59px 0 78px;gap:58px}.credit-line{grid-template-columns:minmax(95px,40%) 1fr;gap:11px}.story h2{font-size:24px;margin-bottom:28px}.story-block{grid-template-columns:1fr;gap:6px;margin-top:23px}.story-block p{font-size:12px}.study-head{align-items:start;flex-direction:column;gap:8px;margin-bottom:25px}.photo-stack{gap:43px}.slot-wide{aspect-ratio:1.25}.slot-pair{gap:10px}.slot-tall{aspect-ratio:.78;min-height:180px}.slot-pair .slot-desc{display:none}.detail-bottom{grid-template-columns:1fr;gap:40px;padding:73px 0}.editorial{border-left:0;border-top:1px solid var(--line);padding:30px 0 0}.page-end{align-items:start;flex-direction:column;gap:39px;padding:69px 0}.next-project a{font-size:31px}.site-footer{padding-bottom:28px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}

/* Populated after the photographer's image approval */
.selected-hero{display:block;width:100%;height:auto;background:var(--slot)}
.selected-photo{margin:0;min-width:0}
.selected-photo img{width:100%;height:auto;display:block;background:var(--slot)}
.selected-photo figcaption{margin:10px 0 0}
/* Prevent long placeholder labels from forcing horizontal scrolling at 320px. */
.image-slot{min-width:0;grid-template-columns:minmax(0,1fr);padding-inline:16px}
.slot-eyebrow,.slot-desc{max-width:100%;overflow-wrap:anywhere}
@media(max-width:600px){.slot-hero{min-height:0}.slot-pair .slot-tall{min-height:0}}

/* Discovery-first V2: no decorative scroll animations, no auto-selected photographs. */
.top-nav [aria-current="page"]{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.preview-banner{margin:16px 0 0}
.photo-placeholder{position:relative;display:flex;align-items:center;justify-content:center;text-align:center;background:#e9e9e7;color:#60645f;min-width:0}
.hero-placeholder{aspect-ratio:1.76;min-height:270px}
.placeholder-number{position:absolute;top:20px;left:22px;font-size:10px;letter-spacing:.14em}
.placeholder-center{font-size:11px;letter-spacing:.11em;line-height:1.75}
.placeholder-center span{display:block;font-size:10px;letter-spacing:.04em;margin-top:12px}
.gallery-pending{background:#f0f0ed;display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:225px;text-align:center;padding:40px 28px}
.gallery-pending>span{font-size:10px;letter-spacing:.18em;color:#777b76}
.gallery-pending p{font-size:12px;margin:22px 0 0;color:#666b65;line-height:1.9;max-width:500px}
.photo-item{margin:0}
.photo-item img{width:100%;height:auto;background:#e9e9e7}
.story-block h3{margin:0;font-size:10px;letter-spacing:.11em;font-weight:400;color:var(--muted)}
.all-work{display:block;margin-top:28px;font-size:11px!important;letter-spacing:0!important;color:var(--muted)}
.editorial p{overflow-wrap:anywhere}
.work-head{padding:128px 0 98px}
.work-head h1{font-size:clamp(72px,13vw,180px);line-height:1;letter-spacing:-.085em;font-weight:430;margin:20px 0 32px}
.work-period{color:#9fa19d}
.work-head>p:last-child{max-width:555px;color:#696b66;font-size:13px;line-height:2}
.work-list{border-top:1px solid var(--line)}
.work-row{display:grid;grid-template-columns:54px minmax(0,1fr) minmax(165px,29%) 20px;gap:22px;align-items:baseline;padding:28px 0;border-bottom:1px solid var(--line)}
.work-row .num,.work-row .work-type,.work-arr{font-size:11px;line-height:1.8;color:var(--muted)}
.work-name{font-size:clamp(24px,3.1vw,40px);letter-spacing:-.045em;line-height:1.25;overflow-wrap:break-word}
.work-location{color:#8b8f88}
.work-footer-note{color:var(--muted);font-size:11px;max-width:550px;line-height:1.9;padding:75px 0 100px}
@media(max-width:900px){.work-row{grid-template-columns:45px minmax(0,1fr) 19px;gap:14px}.work-row .work-type{grid-column:2/3;grid-row:2}.work-arr{grid-column:3;grid-row:1}.work-head{padding:85px 0 62px}}
@media(max-width:600px){.top-nav{gap:13px}.hero-placeholder{aspect-ratio:1.18;min-height:0}.work-head{padding:75px 0 45px}.work-head h1{font-size:72px}.work-row{padding:24px 0}.work-name{font-size:clamp(23px,7vw,35px)}.work-footer-note{padding:40px 0 70px}.placeholder-center{max-width:calc(100% - 20px)}}

/* SOURCE BASED REVIEW V3: harmonization with current studiofence.com */
:root { --bg:#f7f4ee;--ink:#11110f;--muted:rgba(17,17,15,.50);--line:rgba(17,17,15,.10);--serif:"Hiragino Mincho ProN","Yu Mincho",YuMincho,Georgia,"Times New Roman",serif;--sans:"Helvetica Neue",Arial,"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",YuGothic,sans-serif;}
html,body{background:#f7f4ee;color:#11110f;}body{font-family:var(--sans);font-size:12px;line-height:1.72;letter-spacing:.01em;-webkit-font-smoothing:antialiased;}
a{color:inherit;}a:hover{opacity:.55;}
.site-header{padding:24px 30px;} .brand{font-family:var(--sans);font-size:11px;letter-spacing:.12em;font-weight:400;}
.top-nav{gap:22px;font-size:11px;} .project-shell{padding-left:30px;padding-right:30px;}
.work-head h1,.project-title{font-family:Georgia,"Times New Roman",var(--serif);font-weight:400;letter-spacing:-.055em;}
.preview-banner{font-family:var(--sans);letter-spacing:.02em;}
@media(max-width:720px){.site-header{padding:22px 18px;}.project-shell{padding-left:18px;padding-right:18px;}.top-nav{gap:11px;font-size:10px;}.brand{font-size:10px;letter-spacing:.06em;}}


/* V6 – EXPOSURE / READING. Two distinct states, no modal or photo-click action. */
.qr-picture{position:relative}
.qr-photo-bar{display:flex;align-items:baseline;justify-content:space-between;gap:18px;padding:14px 0;color:var(--muted);font-size:10px;letter-spacing:.055em}
.qr-photo-bar span:last-child{font-size:10px}
.qr-disclosure{border-top:1px solid var(--ink);border-bottom:1px solid var(--line);margin:48px 0 72px;scroll-margin-top:85px}
.qr-disclosure summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(130px,.5fr) minmax(0,1.5fr) 46px;gap:24px;align-items:center;padding:29px 3px 31px;transition:opacity .15s ease}
.qr-disclosure summary::-webkit-details-marker{display:none}
.qr-disclosure summary:hover{opacity:.68}
.qr-disclosure summary:focus-visible{outline:2px solid var(--ink);outline-offset:5px}
.qr-small{font-family:var(--sans);font-size:10px;letter-spacing:.12em;line-height:1.5;color:var(--muted)}
.qr-call{font-family:Georgia,var(--serif);font-weight:400;line-height:1.12;font-size:clamp(29px,3.4vw,55px);letter-spacing:-.05em}
.qr-plus{font-size:30px;line-height:1;justify-self:end;font-weight:200;transition:transform .18s ease}
.qr-disclosure[open]>.qr-disclosure-head .qr-plus{transform:rotate(45deg)}
.qr-reading-canvas{background:#171815;color:#f7f4ee;margin:0 calc((var(--rail) - 100vw)/2);padding:clamp(65px,8vw,144px) max(42px,calc((100vw - 1240px)/2)) clamp(78px,10vw,160px)}
.qr-reading-inner{max-width:1060px;margin:auto}
.qr-reading-heading{font-family:Georgia,var(--serif);font-size:clamp(58px,10vw,145px);font-weight:400;letter-spacing:-.075em;line-height:1.05;margin:0 0 85px}
.qr-reading-grid{display:grid;grid-template-columns:minmax(180px,.75fr) minmax(0,1.6fr);gap:clamp(40px,7vw,140px);border-top:1px solid #777976;padding-top:28px}
.qr-reading-canvas .intro-grid{display:grid;grid-template-columns:1fr;gap:60px;padding:0}
.qr-reading-canvas .story{width:100%;max-width:730px}
.qr-reading-canvas .story h2{font-family:Georgia,var(--serif);font-size:clamp(25px,3vw,43px);font-weight:400;line-height:1.45;color:#f7f4ee}
.qr-reading-canvas .story-block h3,.qr-reading-canvas .eyebrow,.qr-reading-canvas .credit-line dt{color:#a3a6a0}
.qr-reading-canvas .story-block p{color:#e0dfd9}
.qr-reading-canvas .credits{max-width:680px;width:100%;}
.qr-reading-canvas .credit-line{border-bottom-color:#41443f}
.qr-reading-canvas .credit-line dd{color:#f7f4ee}
.qr-reading-kicker{font-size:10px;letter-spacing:.13em;color:#a3a6a0}
.qr-reading-note{font-size:10px;color:#a3a6a0;max-width:350px;line-height:1.9}
.qr-secondary{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:50px}
.qr-secondary summary{padding:19px 2px;cursor:pointer;list-style:none;font-size:11px;display:flex;justify-content:space-between;gap:25px}
.qr-secondary summary::-webkit-details-marker{display:none}
.qr-secondary summary:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.qr-secondary .detail-bottom{padding:26px 0 65px;border:0}
.qr-work-example{margin:0 0 56px}
.qr-work-image{display:block;width:100%;height:clamp(360px,60vw,820px);object-fit:cover;object-position:center 50%;background:#d9dad3}
.qr-work-caption{font-size:10px;display:flex;justify-content:space-between;gap:15px;padding:15px 0;letter-spacing:.06em;color:var(--muted)}
.qr-work-example .qr-disclosure{margin:8px 0 90px}
.qr-work-example .qr-reading-canvas{margin:0 calc((var(--rail) - 100vw)/2)}
.qr-work-demo-copy{font-size:clamp(17px,2vw,30px);max-width:750px;line-height:2;font-weight:300}
.qr-demo-warning{font-size:11px;color:#b2b5ae;max-width:700px;margin-top:55px;line-height:2}
@media(max-width:760px){
 .qr-disclosure summary{grid-template-columns:1fr 42px;gap:12px 18px}
 .qr-disclosure summary .qr-small{grid-column:1/3;grid-row:1}
 .qr-disclosure summary .qr-call{grid-column:1;grid-row:2;font-size:clamp(30px,7vw,50px)}
 .qr-disclosure summary .qr-plus{grid-column:2;grid-row:2}
 .qr-reading-canvas{padding:62px 22px 95px;margin:0 calc((var(--rail) - 100vw)/2)}
 .qr-reading-heading{font-size:clamp(56px,13vw,96px);margin-bottom:60px}
 .qr-reading-grid{grid-template-columns:1fr;gap:28px}
 .qr-reading-canvas .intro-grid{gap:45px}
 .qr-reading-canvas .story-block{grid-template-columns:1fr}
 .qr-work-image{height:min(114vw,620px)}
 .qr-work-caption{font-size:9px;line-height:1.7}
}
@media(prefers-reduced-motion:reduce){.qr-disclosure summary,.qr-plus{transition:none!important}}

/* STUDIOFENCE v9: preserve original photo geometry. NEVER crop portrait media to landscape. */
.qr-work-example{margin:0 auto clamp(65px,9vw,130px);}
.qr-work-example .sf9-portrait{width:min(100%,680px);max-width:100%;margin:0 auto!important;}
.qr-work-image,.qr-work-example .sf9-portrait-image{display:block;width:100%;height:auto;max-height:none;aspect-ratio:2 / 3;object-fit:contain;object-position:center;background:transparent;}
.qr-work-example .qr-disclosure,.qr-work-example .qr-work-caption{display:none}
/* Reading remains available on individual projects; no visitor-facing process notes. */
.qr-reading-canvas{padding-top:clamp(34px,5vw,76px);padding-bottom:clamp(48px,7vw,95px)}
.qr-reading-grid{display:block;padding:0;border-top:0}
.qr-reading-body{width:100%;}
.qr-reading-canvas .intro-grid{max-width:1150px;}
@media(max-width:760px){
  .qr-work-example .sf9-portrait{width:100%}
  .qr-work-image,.qr-work-example .sf9-portrait-image{height:auto;max-height:none;object-fit:contain}
}