/* STUDIO UP2DATE — site styles (ported from the approved preview, variant 1) */
/* Layout: a fixed left rail (nav, centred wordmark, footer link) and a content field starting at 34.5% of the width, after office-aio.com */
:root{
  --bg:#e9e7e3;          /* warm plaster grey */
  --ink:#1b1a18;         /* text */
  --mute:#8b8883;        /* secondary text, inactive nav */
  --faint:#b9b6b0;       /* hairlines, faded text */
  --on-photo:#ffffff;    /* text over photographs */
  --veil:rgba(233,231,227,.72);
  --sans:"Hanken Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
  --rail:34.5vw;
  --gut:1.2vw;
  --edge:max(16px,1.15vw);
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{background:var(--bg);color:var(--ink)}
body{margin:0;font:400 16px/1.32 var(--sans);-webkit-font-smoothing:antialiased;letter-spacing:-.005em}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
img{display:block;max-width:100%}
:focus-visible{outline:1px solid currentColor;outline-offset:3px}

/* ---------- rail ---------- */
.rail{position:fixed;z-index:20;top:calc(var(--edge) + env(safe-area-inset-top,0px));left:var(--edge);display:grid;font-size:32px;line-height:1.16;letter-spacing:-.01em}
.rail>*{grid-area:1/1}
.nav{display:flex;flex-direction:column;align-items:flex-start;transition:opacity .3s ease}
.nav a{color:var(--mute);transition:color .25s}
.nav a:hover,.nav a.on{color:var(--ink)}
.projhead{transition:opacity .3s ease;cursor:default;text-align:left;font:inherit;letter-spacing:inherit;line-height:inherit;align-self:start;justify-self:start}
.projhead span{display:block;color:var(--mute)}
/* on a project page the title sits where the menu is; hovering it reveals the menu */
body[data-view="project"] .nav{opacity:0;pointer-events:none}
body[data-view="project"] .rail:hover .nav,body[data-view="project"] .rail.open .nav{opacity:1;pointer-events:auto}
/* the faded-out title must not sit on top of the menu links, or they cannot be clicked */
body[data-view="project"] .rail:hover .projhead,body[data-view="project"] .rail.open .projhead{opacity:0;pointer-events:none}
.nav{position:relative;z-index:1}
.foot{position:fixed;z-index:20;bottom:calc(var(--edge) + env(safe-area-inset-bottom,0px));left:var(--edge);font-size:32px;line-height:1.16;letter-spacing:-.01em}
.foot a:hover,.foot button:hover{color:var(--mute)}
.logo{position:fixed;z-index:15;top:50%;left:calc(var(--rail)/2);transform:translate(-50%,-50%);width:clamp(120px,9.6vw,184px);aspect-ratio:900/360;font-size:0;transition:left .6s cubic-bezier(.6,0,.2,1),color .4s}
/* the logo artwork is a mask filled with the current text colour, so it turns white over the home photos */
.logo::before{content:'';position:absolute;inset:0;background:currentColor;-webkit-mask:url("../img/logo.b34a938fe8ed.png") center/contain no-repeat;mask:url("../img/logo.b34a938fe8ed.png") center/contain no-repeat}
body[data-view="home"] .logo{filter:drop-shadow(0 0 14px rgba(0,0,0,.18))}
body[data-view="home"] .logo{left:50%}
body[data-view="home"] .nav a,body[data-view="home"] .foot,body[data-view="home"] .logo{color:var(--on-photo);text-shadow:0 0 18px rgba(0,0,0,.18)}
body[data-view="home"] .nav a:not(.on){opacity:.82}
body[data-view="home"] .nav a:hover{opacity:1}

/* ---------- views ---------- */
main{animation:fade .5s ease both}
@keyframes fade{from{opacity:.0}to{opacity:1}}
.sr,.hp{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hp{left:-9999px}
/* Everything lines up with the top of the menu's capitals.
   A line's capitals start at (line-height/2 + --k) * font-size from its top; --k = ((ascent - descent)/2 - cap height) / em, measured in JS from the loaded font;
   --top is where the menu's capitals start; .capfix pulls a 16px text block up so its capitals sit on that line. */
:root{--k:-.25;--railfs:32px;--raillh:1.16;--top:calc(var(--edge) + env(safe-area-inset-top,0px) + (var(--raillh)/2 + var(--k))*var(--railfs))}
.capfix{margin-top:calc(-1em*(.66 + var(--k)))}
.field{margin-left:var(--rail);padding:var(--top) var(--edge) 22vh 0;min-width:0}

/* home */
.hero{position:fixed;inset:0;background:#2a2723;cursor:pointer}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.6s ease}
.hero img.on{opacity:1}
.hero .dots{position:absolute;right:var(--edge);bottom:calc(var(--edge) + env(safe-area-inset-bottom,0px));display:flex;gap:8px}
.hero .dots i{width:6px;height:6px;border-radius:50%;background:var(--on-photo);opacity:.4;transition:opacity .4s}
.hero .dots i.on{opacity:1}
.hero .cap{position:absolute;right:var(--edge);top:calc(var(--top) - 1em*(.66 + var(--k)));color:var(--on-photo);text-align:right;opacity:.9;text-shadow:0 0 18px rgba(0,0,0,.18)}

/* works list */
.works{display:flex;flex-direction:column;gap:var(--gut)}
.work{display:grid;grid-template-columns:31.6vw 1fr;gap:var(--gut);align-items:start}
.work .ph{position:relative;overflow:hidden;aspect-ratio:3/4;background:#d8d5cf}
.work .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease}
.work .ph img.on{opacity:1}
.work .t{color:var(--ink);transition:color .25s;margin-top:calc(-1em*(.66 + var(--k)))}
.work .t span{display:block;color:var(--mute);transition:color .25s}
.works:hover .work:not(:hover) .t{color:var(--mute)}
.work:hover .t span{color:var(--ink)}
.work .count{display:block;margin-top:.6em;color:var(--faint);font-size:13px;font-variant-numeric:tabular-nums;opacity:0;transition:opacity .25s}
.work:hover .count{opacity:1}

/* project */
/* the first photo of a project is always a full-width horizontal frame; vertical photos are cropped to fit */
.pmain{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:#d8d5cf}
.pinfo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.1fr);gap:var(--gut) 2.2vw;margin:1.9em 0 3.6em}
.meta{display:flex;flex-direction:column;gap:.9em;font-size:13px;line-height:1.3}
.meta dt{color:var(--mute)}
.meta dd{margin:0}
.story h3{font-weight:400;font-size:16px;color:var(--mute);margin:0 0 1.1em;text-wrap:balance}
.story p{margin:0 0 1.1em;max-width:68ch}
.story .body{position:relative;max-height:11.5em;overflow:hidden;transition:max-height .9s cubic-bezier(.5,0,.2,1)}
.story .body::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5.5em;background:linear-gradient(rgba(233,231,227,0),var(--bg));transition:opacity .5s;pointer-events:none}
.story.open .body::after{opacity:0}
.story .more{margin-top:.3em;color:var(--ink);border-bottom:1px solid transparent;transition:border-color .2s}
.story .more:hover{border-color:var(--ink)}
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:var(--gut);align-items:start}
.gallery img{display:block;width:100%;height:auto;max-width:100%;object-fit:cover;background:#d8d5cf}
/* every horizontal photo is the same full-width 4:3 frame, every vertical photo the same 3:4 frame */
.gallery img.wide{grid-column:1/-1;aspect-ratio:4/3}
.gallery img.half{aspect-ratio:3/4}
.credits{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.1fr);gap:var(--gut) 2.2vw;margin-top:3.6em}
.credits dl{grid-column:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:.55em 2.2vw;margin:0}
.credits dt{color:var(--mute)}
.credits dd{margin:0}
.nextp{margin-top:3.5em;display:flex;justify-content:space-between;gap:1em;color:var(--mute)}
.nextp a{color:var(--ink)}
.nextp a:hover{color:var(--mute)}

/* studio */
.studio{max-width:52vw}
.studio .lead p{margin:0 0 1.1em}
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:1.9em var(--gut);margin-top:3.6em}
.cgrid dt{color:var(--mute)}
.cgrid dd{margin:0}
.cgrid dd a:hover{color:var(--mute)}
.addr{margin-top:3.6em}
.addr dt{color:var(--mute)}
.addr dd{margin:0}
.team{display:grid;grid-template-columns:1fr 1fr;gap:var(--gut);margin-top:3.6em}
.team figure{margin:0}
.team img{aspect-ratio:4/5;width:100%;object-fit:cover;background:#d8d5cf}
.team figcaption{margin-top:.5em}
.team figcaption span{display:block;color:var(--mute)}

/* news */
.years{display:flex;flex-wrap:wrap;gap:.3em 1em;margin-bottom:2.6em}
.years a{color:var(--mute);transition:color .25s}
.years a:hover,.years a[aria-current="true"]{color:var(--ink)}
.years a[aria-current="true"]{cursor:default}
.news{display:flex;flex-direction:column;gap:2.2em}
.item{display:grid;grid-template-columns:minmax(0,21vw) minmax(0,29.5vw);gap:var(--gut) 2.2vw;align-items:start}
.item time{color:var(--mute)}
.item h2{font-weight:400;font-size:24px;line-height:1.2;margin:0;text-wrap:balance}
.item h2 button{text-align:left;color:var(--ink);transition:color .25s}
.item h2 button:hover,.item.open h2 button{color:var(--ink)}
.item.open h2 button{cursor:default}
.item .det{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s cubic-bezier(.5,0,.2,1),opacity .5s;opacity:0}
.item .det>div{overflow:hidden;min-height:0}
.item.open .det{grid-template-rows:1fr;opacity:1}
.item .det>div>:first-child{margin-top:1.1em}
.item.open{margin-bottom:3em}
.item img{width:100%;height:auto;background:#d8d5cf;margin-bottom:1.1em}
.item p{margin:0 0 1em;font-size:13px;line-height:1.38}
.item p a,.story p a,.lead p a{border-bottom:1px solid currentColor}
.lead p:last-child{margin-bottom:0}

/* contact overlay */
.contact{position:fixed;inset:0;z-index:50;background:var(--veil);-webkit-backdrop-filter:blur(42px) saturate(1.1);backdrop-filter:blur(42px) saturate(1.1);display:flex;flex-direction:column;padding:calc(var(--edge) + env(safe-area-inset-top,0px)) var(--edge) calc(var(--edge) + env(safe-area-inset-bottom,0px));opacity:0;pointer-events:none;transition:opacity .45s ease}
.contact{visibility:hidden;transition:opacity .45s ease,visibility 0s linear .45s}
.contact.on{opacity:1;pointer-events:auto;visibility:visible;transition:opacity .45s ease}
.contact form{flex:1;display:flex;flex-direction:column;min-height:0}
.contact .row{display:flex;gap:1em;align-items:flex-start}
.contact .row.top{flex:1;min-height:0;align-items:stretch;margin-top:calc(var(--top) - var(--edge) - env(safe-area-inset-top,0px) - clamp(22px,2.05vw,38px)*(.59 + var(--k)))}
.contact .row.top .big{align-self:flex-start}
.contact textarea,.contact input{flex:1;min-width:0;border:0;background:transparent;font:400 clamp(22px,2.05vw,38px)/1.18 var(--sans);color:var(--ink);letter-spacing:-.01em;padding:0;resize:none;outline:none}
.contact textarea{height:100%}
.contact ::placeholder{color:var(--mute);opacity:1}
.contact .grow{flex:1;display:flex;min-height:0;margin:0}
.contact .big{font-size:clamp(22px,2.05vw,38px);line-height:1.18;letter-spacing:-.01em;flex:none}
.contact .big:hover{color:var(--mute)}
.contact .row.bottom{align-items:flex-end}
.contact .note{position:absolute;left:var(--edge);right:var(--edge);top:50%;transform:translateY(-50%);text-align:center;font-size:clamp(20px,1.7vw,30px);line-height:1.25;color:var(--ink);opacity:0;pointer-events:none;transition:opacity .4s;text-wrap:balance}
.contact .note small{display:block;font-size:15px;color:var(--mute);margin-top:.6em}
/* after sending, the form fades out but Close stays in its corner */
.contact .grow,.contact .row.bottom{transition:opacity .4s}
.contact.sent .grow,.contact.sent .row.bottom{opacity:0;pointer-events:none}
.contact .note{z-index:0}.contact #cclose{position:relative;z-index:1}
.contact.sent .note{opacity:1}
.contact .err{color:#9a3b2e;font-size:15px;align-self:center;flex:none}

/* ---------- phone ---------- */
@media (max-width:820px){
  :root{--rail:0px;--gut:12px}
  .logo{position:fixed;top:var(--top);left:auto;right:var(--edge);transform:none;width:90px}
  body[data-view="home"] .logo{left:50%;top:50%;right:auto;transform:translate(-50%,-50%);width:160px}
  :root{--railfs:18px;--raillh:1.3}
  .rail,.foot{font-size:18px;line-height:1.3}
  .work .t{margin-top:0}
  .contact .row.top{margin-top:0}
  body:not([data-view="home"]) .rail,body:not([data-view="home"]) .logo{position:absolute}
  .credits{grid-template-columns:1fr}.credits dl{grid-column:1}
  /* content starts below the four menu lines */
  .field{margin-left:0;padding:calc(var(--edge) + env(safe-area-inset-top,0px) + 4*1.3*18px + 24px) var(--edge) 120px}
  .work{grid-template-columns:1fr}
  .work .count{opacity:1}
  .pinfo{grid-template-columns:1fr;gap:2em}
  .gallery{grid-template-columns:1fr}
  .studio{max-width:none}
  .cgrid{grid-template-columns:1fr}
  .item{grid-template-columns:1fr;gap:.6em}
  .item h2{font-size:19px}
  .foot{left:0;right:0;bottom:0;background:var(--bg);padding:10px var(--edge) calc(10px + env(safe-area-inset-bottom,0px))}
  body[data-view="home"] .foot{background:none}
  .contact textarea,.contact input{font-size:22px}
  .projhead{font-size:inherit}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}