/* 1:1 CONCEPTS, the sheet.
 *
 * A drawing sheet, not a web page: warm paper, one graphite ink, a title block on every
 * project, and type that stays out of the drawing's way. Cormorant Garamond for the
 * display voice they already use, Inter for everything that has to be read.
 *
 * Breakpoints are laid out, not reflowed:
 *   >=1024  desktop  the drawing fills the stage, the title block sits in the right margin
 *   760..1023 tablet the stage takes the upper two thirds, the reading sits under it
 *   <760    mobile   the stage is a band that opens for the build and steps back to read
 */

@font-face{font-family:'Inter';src:url('/assets/fonts/inter-300.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Inter';src:url('/assets/fonts/inter-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Inter';src:url('/assets/fonts/inter-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url('/assets/fonts/cormorant-garamond-300.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url('/assets/fonts/cormorant-garamond-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url('/assets/fonts/cormorant-garamond-600.woff2') format('woff2');font-weight:600;font-display:swap}

:root{
  --paper:#faf9f6;
  --ink:#181817;
  --ink-2:rgba(24,24,23,.74);
  --ink-3:rgba(24,24,23,.5);
  --ink-4:rgba(24,24,23,.26);
  --hair:rgba(24,24,23,.13);
  --disp:'Cormorant Garamond',Georgia,serif;
  --body:'Inter',system-ui,sans-serif;
  --pad:clamp(20px,5vw,96px);
  --col:clamp(300px,34vw,480px);
  --ease:cubic-bezier(.22,.72,.06,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--body);font-weight:300;
  font-size:clamp(15px,1.02vw,16.5px);line-height:1.72;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
img,picture{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
::selection{background:rgba(24,24,23,.12)}
.skip{position:absolute;left:-9999px;top:0;z-index:400;background:var(--paper);padding:12px 18px}
.skip:focus{left:12px;top:12px}

/* paper tooth. faint, it stops the white reading as a screen */
.grain{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(24,24,23,.045) .6px,transparent .6px);
  background-size:3px 3px}

/* ------------------------------------------------------------------- the intro */
.intro{position:fixed;inset:0;z-index:300;background:var(--paper);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
  transition:opacity .9s var(--ease),visibility .9s}
body.introdone .intro{opacity:0;visibility:hidden;pointer-events:none}
.intro-mark{width:min(78vw,760px);height:min(46vh,340px);display:block}
.intro-cap{display:flex;flex-direction:column;align-items:center;gap:7px;
  margin-top:clamp(14px,3vh,30px);opacity:0;transition:opacity .8s var(--ease)}
.intro-cap.in{opacity:1}
.intro-tag{font-family:var(--disp);font-size:clamp(17px,2vw,25px);font-weight:300;
  letter-spacing:.12em;color:var(--ink-2)}
.intro-gst{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-4)}
.intro-noscript{font-family:var(--disp);font-weight:300;font-size:8vw}

/* --------------------------------------------------------------------- the nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:120;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:16px var(--pad) 20px;
  background:linear-gradient(180deg,var(--paper) 0,var(--paper) 74%,rgba(250,249,246,0));
  opacity:0;transform:translateY(-12px);
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
body.introdone .nav{opacity:1;transform:none}
.nav-mark img{width:clamp(96px,9vw,132px);height:auto;opacity:.92}
.nav-links{display:flex;gap:clamp(14px,2vw,30px)}
.nav-links a{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
  transition:color .3s}
.nav-links a:hover{color:var(--ink)}
.nav-scale{font-family:var(--disp);font-size:15px;letter-spacing:.14em;color:var(--ink-4);
  font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------------ the layout */
main{position:relative;z-index:4}
.hero,.lead{width:var(--col);max-width:calc(100vw - var(--pad)*2);margin-left:var(--pad);
  padding:clamp(70px,11vh,150px) 0}
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center}
.eyebrow{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-4);
  margin-bottom:clamp(12px,2vh,20px)}
.hero-h{font-family:var(--disp);font-weight:300;font-size:clamp(46px,6.6vw,104px);
  line-height:1.0;letter-spacing:-.01em;margin-bottom:clamp(18px,2.6vh,30px)}
.hero-h em{font-style:italic;font-weight:400}
.hero-sub{color:var(--ink-2);max-width:42ch}
.stats{list-style:none;display:flex;flex-wrap:wrap;gap:clamp(20px,3vw,46px);
  margin-top:clamp(26px,4vh,52px)}
.stats b{display:block;font-family:var(--disp);font-weight:300;font-size:clamp(28px,3.4vw,46px);
  line-height:1}
.stats span{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-4)}
.hero-hint{display:flex;align-items:center;gap:10px;margin-top:clamp(30px,5vh,60px);
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-4)}
.tick{width:1px;height:34px;background:var(--ink-4);display:block;
  animation:drip 2.4s var(--ease) infinite;transform-origin:top}
@keyframes drip{0%{transform:scaleY(0)}42%{transform:scaleY(1)}
  58%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

.h2{font-family:var(--disp);font-weight:300;font-size:clamp(31px,4.2vw,60px);line-height:1.06;
  margin-bottom:clamp(14px,2vh,24px)}
.h3{font-family:var(--disp);font-weight:400;font-size:clamp(23px,2.5vw,34px);line-height:1.1;
  margin-bottom:12px}
.lead-sub,.about p{color:var(--ink-2);max-width:44ch}
.about p+p{margin-top:.9em}

/* ------------------------------------------------------------- a project sheet */
.sheet{position:relative}
.sheet-pin{position:relative;height:100svh;overflow:hidden}
.sheet-stage{position:absolute;inset:0}
.sheet-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.sheet-stage [data-plan]{z-index:2}
/* the drawing keeps off the writing on the wide layouts, the same way the 3D pass does */
@media(min-width:1024px){
  .sheet-stage [data-plan]{
    -webkit-mask-image:linear-gradient(90deg,transparent 22%,#000 32%);
            mask-image:linear-gradient(90deg,transparent 22%,#000 32%)}
}
@media(min-width:760px) and (max-width:1023px){
  .sheet-stage [data-plan]{
    -webkit-mask-image:linear-gradient(90deg,transparent 4%,#000 14%);
            mask-image:linear-gradient(90deg,transparent 4%,#000 14%)}
}
.sheet-stage [data-gl]{z-index:3;opacity:0}
.sheet-photo{position:absolute;inset:0;z-index:4;opacity:0;overflow:hidden;
  transform-origin:center}
.sheet-photo picture,.sheet-photo img{width:100%;height:100%;object-fit:cover}

/* the title block, the way a drawing sheet is labelled */
.titleblock{position:absolute;z-index:6;right:var(--pad);bottom:clamp(26px,5vh,56px);
  display:flex;flex-direction:column;align-items:flex-end;gap:3px;text-align:right;
  padding:14px 16px 14px 22px;min-width:170px;
  /* a paper chip, so the block still reads once the photograph goes full bleed */
  background:linear-gradient(180deg,rgba(250,249,246,.9),rgba(250,249,246,.82));
  box-shadow:0 0 0 1px var(--hair)}
.tb-no{font-family:var(--disp);font-size:12px;letter-spacing:.2em;color:var(--ink-4)}
.tb-name{font-family:var(--disp);font-size:clamp(19px,2vw,27px);line-height:1.1}
.tb-cat,.tb-area{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-4)}
.tb-scale{margin-top:7px;font-family:var(--disp);font-size:clamp(22px,2.6vw,34px);
  letter-spacing:.06em;font-variant-numeric:tabular-nums;color:var(--ink-2);
  transition:color .4s var(--ease)}
.tb-scale.is-full{color:var(--ink)}

/* the reading column, always clear of the drawing */
.sheet-read{position:absolute;z-index:6;left:var(--pad);bottom:clamp(26px,5vh,56px);
  width:var(--col);max-width:calc(100vw - var(--pad)*2);
  transition:opacity .5s var(--ease)}
.sheet-read p{color:var(--ink-2);font-size:.95em}
.sheet-read p+p{margin-top:.8em}

/* the gallery under each sheet */
.shots{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(10px,1.4vw,20px);
  padding:clamp(14px,2.4vw,30px) var(--pad) clamp(60px,9vh,120px)}
.shot{overflow:hidden;background:rgba(24,24,23,.04)}
.shot img{width:100%;aspect-ratio:4/3;object-fit:cover;
  transition:transform 1.1s var(--ease),filter .7s}
.shot:hover img{transform:scale(1.03)}

/* ------------------------------------------------------------------- clients */
.logos{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(18px,3vw,40px);margin:clamp(24px,4vh,48px) 0 clamp(36px,6vh,72px)}
.logos li{display:flex;flex-direction:column;gap:9px;align-items:flex-start}
.logos .logo{width:clamp(64px,7vw,92px)}
.logos .logo img{width:100%;filter:grayscale(1) contrast(1.05);opacity:.72;
  mix-blend-mode:multiply;transition:opacity .4s}
.logos li:hover .logo img{opacity:1}
.logos span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-4)}
.quotes{list-style:none;display:flex;flex-direction:column;gap:clamp(20px,3.4vh,38px)}
.quotes blockquote{font-family:var(--disp);font-weight:300;font-size:clamp(19px,2.1vw,27px);
  line-height:1.34}
.quotes blockquote::before{content:"\201C"}
.quotes blockquote::after{content:"\201D"}
.quotes cite{display:block;margin-top:8px;font-style:normal;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-4)}

/* --------------------------------------------------------------------- team */
.team{list-style:none;display:grid;grid-template-columns:1fr;gap:clamp(24px,4vh,44px);
  margin-top:clamp(28px,4.5vh,56px)}
.team .portrait{width:clamp(120px,13vw,170px);margin-bottom:12px}
.team .portrait img{width:100%;aspect-ratio:1;object-fit:cover;filter:grayscale(1) contrast(1.04)}
.badge{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-4)}
.team h3{font-family:var(--disp);font-weight:400;font-size:clamp(21px,2.2vw,29px);line-height:1.1;
  margin:4px 0 3px}
.role{font-size:.94em;color:var(--ink-2)}
.spec{font-size:.9em;color:var(--ink-3)}
.mail{display:inline-block;margin-top:7px;font-size:.9em;color:var(--ink-3);
  box-shadow:inset 0 -1px 0 var(--hair)}
.mail:hover{color:var(--ink);box-shadow:inset 0 -1px 0 var(--ink-3)}

/* ------------------------------------------------------------------ enquiry */
.enquiry{padding-bottom:clamp(70px,10vh,140px)}
.form{margin-top:clamp(24px,4vh,44px)}
.field{display:block;position:relative;margin-bottom:clamp(20px,3vh,32px)}
.field span{display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-4);margin-bottom:5px}
.field input,.field textarea{width:100%;display:block;background:none;border:0;outline:none;
  font-family:var(--disp);font-weight:300;font-size:clamp(20px,2vw,27px);line-height:1.4;
  color:var(--ink);padding:2px 0 8px;resize:none}
.field i{position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--hair);display:block}
.field i::after{content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:var(--ink);
  transition:width .55s var(--ease)}
.field.has i::after{width:100%}
.field.bad i::after{width:100%;background:#a33b2c}
.nope{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.send{background:none;border:0;padding:0;cursor:pointer;font-family:var(--disp);font-weight:300;
  font-size:clamp(21px,2.2vw,29px);color:var(--ink);margin-top:4px}
.send span{display:inline-block;padding:9px 0 10px;box-shadow:inset 0 -1px 0 var(--ink-3);
  transition:box-shadow .4s var(--ease),color .3s}
.send:hover span{box-shadow:inset 0 -2px 0 var(--ink)}
.send[disabled]{opacity:.45;cursor:default}
.msg{margin-top:14px;min-height:1.5em;font-size:.95em;color:var(--ink-2)}
.msg.bad{color:#a33b2c}
.contact{margin-top:clamp(34px,5.5vh,66px);padding-top:clamp(18px,3vh,30px);
  border-top:1px solid var(--hair);font-size:.94em;color:var(--ink-3)}
.contact p+p{margin-top:5px}
.contact a:hover{color:var(--ink)}
.social{display:flex;gap:18px;margin-top:10px!important}
.social a{font-size:11px;letter-spacing:.16em;text-transform:uppercase}

/* ------------------------------------------------------------------- footer */
footer{margin-left:var(--pad);width:var(--col);max-width:calc(100vw - var(--pad)*2);
  padding:0 0 clamp(40px,7vh,80px)}
.foot-rule{height:1px;background:var(--hair);margin-bottom:20px}
.foot-name{font-family:var(--disp);font-weight:300;font-size:clamp(26px,3vw,40px);line-height:1}
.foot-meta{margin-top:8px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-4)}

/* --------------------------------------------------------- reveal defaults */
[data-rv]{opacity:0;transform:translateY(20px)}

/* ================================================================== TABLET */
@media(max-width:1023px){
  :root{--col:clamp(280px,58vw,520px)}
  .nav-links{gap:14px}
  .nav-links a{font-size:11.5px}
  .sheet-pin{height:auto}
  .sheet-stage{position:relative;inset:auto;height:62svh}
  .titleblock{position:relative;right:auto;bottom:auto;align-items:flex-start;text-align:left;
    margin:0 var(--pad);width:auto;padding-top:12px}
  .sheet-read{position:relative;left:auto;bottom:auto;width:auto;max-width:none;
    margin:16px var(--pad) 0}
  .logos{grid-template-columns:repeat(3,1fr)}
  .team{grid-template-columns:1fr 1fr}
}

/* ================================================================== MOBILE */
@media(max-width:759px){
  :root{--pad:20px;--col:auto}
  .hero,.lead,footer{width:auto;margin-left:var(--pad);margin-right:var(--pad);max-width:none}
  .hero{min-height:88svh}
  .hero-sub,.lead-sub,.about p{max-width:none}
  .nav{padding:12px var(--pad) 18px;
    background:linear-gradient(180deg,var(--paper) 0,var(--paper) 78%,rgba(250,249,246,0))}
  .nav-links{display:none}
  .nav-scale{font-size:13px}
  /* the stage is a band: tall enough to enjoy the build, short enough to read past */
  .sheet-stage{height:var(--band,52svh)}
  .titleblock{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:10px;min-width:0}
  .tb-cat,.tb-area{display:none}
  .tb-scale{margin-top:0;margin-left:auto}
  .shots{grid-template-columns:1fr;padding-bottom:clamp(40px,7vh,70px)}
  .logos{grid-template-columns:repeat(2,1fr)}
  .team{grid-template-columns:1fr}
  .intro-mark{width:86vw;height:34vh}
}

/* -------------------------------------------------------- reduced motion */
@media(prefers-reduced-motion:reduce){
  .tick{animation:none}
  [data-rv]{opacity:1;transform:none}
  .sheet-stage [data-gl]{opacity:0}
  .sheet-photo{opacity:1!important;transform:none!important}
  .intro{display:none}
  .nav{opacity:1;transform:none}
  *{transition-duration:.01ms!important}
}