:root{
  --black:#000;
  --paper:#fff;
  --mute:rgba(255,255,255,.74);
  --line:rgba(255,255,255,.22);
  --plan:#f4f2ef;
  --atlantis:#5a221c;
  --salt:#465b6c;
  --club:#222a38;
  --books:#55321f;
  --l6:#7d4422;
  --next:#1d2b2a;
  --page:var(--black);
  --display:"Gloock","Bodoni 72",Didot,Georgia,serif;
  --text:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;
  --gut:clamp(20px,5vw,80px);
  --gap:8px;
  color-scheme:dark;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--paper:#fff}}
:root[data-theme="dark"]{--paper:#fff}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--page);color:var(--paper);font:300 1.0625rem/1.65 var(--text);-webkit-font-smoothing:antialiased;transition:background-color 1s ease;overflow-x:hidden}
body.tone-fixed{transition:none}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--paper);outline-offset:3px}
p{margin:0 0 1em}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:50;background:#fff;color:#000;padding:8px 12px}

/* header */
.top{position:fixed;inset:0 0 auto 0;z-index:20;display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:calc(16px + env(safe-area-inset-top,0px)) var(--gut) 16px;transition:background-color 1s ease,padding .3s ease}
.top.solid{background:var(--page);padding-top:calc(10px + env(safe-area-inset-top,0px));padding-bottom:10px}
.top .logo img{width:84px;transition:width .3s ease}
.top.solid .logo img{width:64px}
.top nav{display:flex;gap:clamp(14px,2.6vw,36px);font-size:.95rem;font-weight:400}
.top nav a{text-decoration:none;text-shadow:0 1px 14px rgba(0,0,0,.4);white-space:nowrap}
.top nav a:hover,.top nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}

h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:-.01em;margin:0}
.display{font-size:clamp(2.6rem,6vw,5.6rem);line-height:1.02}
h2{font-size:clamp(2.1rem,4.4vw,4rem);line-height:1.04}
h3{font-size:clamp(1.5rem,2.4vw,2.1rem);line-height:1.15}
.lede{font-size:clamp(1.1rem,1.6vw,1.3rem);line-height:1.6;max-width:46ch}
.mute{color:var(--mute)}
.small{font-size:.9rem}
.wrap{padding-inline:var(--gut)}
.measure{max-width:62ch}
.textlink{display:inline-block;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:2px}
.textlink:hover{border-color:var(--paper)}

/* home hero */
.hero{display:grid;grid-template-columns:1fr 1fr;min-height:100vh;min-height:100svh}
.hero-text{display:flex;flex-direction:column;justify-content:flex-end;padding:120px var(--gut) clamp(40px,8vh,90px)}
.hero-text h1{max-width:11ch;margin-bottom:.45em}
.hero-text p{color:var(--mute);max-width:36ch;margin:0}
.hero .cue{margin-top:clamp(36px,9vh,110px);font-size:.9rem;color:var(--mute)}
.hero-img{position:relative;overflow:hidden;min-height:60vh}
.hero-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-img::after{content:"";position:absolute;inset:0 0 auto 0;height:140px;background:linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,0))}

/* home frames */
.frame{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:end;padding:clamp(70px,12vh,140px) var(--gut)}
.frame.flip{grid-template-columns:minmax(0,1fr) minmax(0,1.55fr)}
.frame.flip .frame-img{order:2}
.frame-img{display:block;overflow:hidden}
.frame-img img,.frame-img video{width:100%;height:auto;display:block;transition:transform 1.2s ease}
.frame-img:hover img{transform:scale(1.02)}
.frame-text .kind{color:var(--mute);margin:0 0 .6em;font-size:.95rem}
.frame-text h2{margin-bottom:.4em}
.frame-text p{max-width:38ch}

.band{padding:clamp(80px,14vh,160px) var(--gut)}
.band.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:clamp(28px,6vw,96px);align-items:start}

/* projects index */
.page-head{padding:clamp(140px,22vh,220px) var(--gut) clamp(40px,8vh,80px)}
.page-head h1{max-width:14ch}
.page-head .lede{margin-top:.8em}
.group-title{padding:clamp(40px,8vh,80px) var(--gut) 18px;color:var(--mute);font-size:1rem;margin:0;font-family:var(--text);font-weight:400}
.plist{list-style:none;margin:0;padding:0 var(--gut)}
.plist li{border-top:1px solid var(--line)}
.plist a{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(20px,4vw,64px);align-items:center;padding:clamp(24px,4vh,40px) 0;text-decoration:none}
.plist img{width:100%;aspect-ratio:3/2;object-fit:cover}
.plist h2{margin-bottom:.3em}
.plist .meta{color:var(--mute);margin:0}

/* project page */
.p-head{padding:clamp(140px,22vh,220px) var(--gut) clamp(50px,9vh,100px);display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:end}
.p-head h1{margin-bottom:.35em}
.facts{display:grid;grid-template-columns:auto 1fr;gap:.5em 2em;margin:0;font-size:.95rem}
.facts dt{color:var(--mute)}
.facts dd{margin:0}
.cover{margin:0;padding:0 var(--gap)}
.cover img{width:100%}
.story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:clamp(32px,6vw,96px);padding:clamp(70px,12vh,140px) var(--gut)}
.story h2{font-size:clamp(1.7rem,3vw,2.6rem)}
.story .cols p{max-width:62ch}
.chapter{padding:clamp(70px,12vh,130px) var(--gut) 28px}
.chapter p{max-width:52ch;color:var(--mute);margin-top:.6em}
.row{display:flex;gap:var(--gap);padding:0 var(--gap) var(--gap)}
.row figure{margin:0;min-width:0}
.row img,.row video{width:100%;height:auto}
.row figcaption{font-size:.88rem;color:var(--mute);padding:10px 4px 6px;max-width:48ch}
.quote{padding:clamp(90px,16vh,180px) var(--gut);text-align:center}
.quote p{font:400 clamp(1.6rem,3.2vw,2.8rem)/1.25 var(--display);margin:0 auto;max-width:26ch}
.note{padding:28px var(--gut) 0;color:var(--mute);font-size:.92rem;max-width:calc(62ch + 2*var(--gut))}

.plan{padding:clamp(28px,5vh,56px) var(--gut) clamp(40px,7vh,80px)}
.plan figure{margin:0;width:min(300px,70vw)}
.plan figure img{width:100%;height:auto;opacity:.9}
.plan figcaption{font-size:.85rem;color:var(--mute);margin-top:8px}

.cta{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;margin-top:1.4em}
.btn{display:inline-block;font:500 1rem var(--text);color:var(--black);background:var(--paper);border:0;padding:14px 26px;text-decoration:none;cursor:pointer}
.btn:hover{background:#ece7df}

.nextp{display:block;padding:clamp(70px,12vh,130px) var(--gut);border-top:1px solid var(--line);text-decoration:none}
.nextp span{display:block;color:var(--mute);margin-bottom:.4em}
.nextp:hover h2{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:10px}

/* what's next */
.offer{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:clamp(28px,6vw,96px);padding:clamp(60px,10vh,110px) var(--gut);border-top:1px solid var(--line)}
.offer .tag{display:inline-block;margin-top:.8em;font-size:.88rem;color:var(--mute);border:1px solid var(--line);padding:3px 10px}
.made{padding:clamp(60px,10vh,110px) var(--gut) 20px}
.piece{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);padding:clamp(28px,5vh,48px) var(--gut);border-top:1px solid var(--line);align-items:start}
.piece .draws{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--gap);background:#d8d6d1;padding:var(--gap)}
.piece .draws img{height:clamp(170px,19vw,280px);width:auto;max-width:100%;object-fit:contain;flex:none!important}
.piece ul{margin:.6em 0 0;padding-left:1.1em}
.piece li{margin:.2em 0}
.piece .from{color:var(--mute);font-size:.92rem;margin-top:1em}
.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);padding:0 var(--gap) var(--gap)}
.strip figure{margin:0}
.strip img{width:100%;aspect-ratio:3/4;object-fit:cover}
.strip figcaption{font-size:.82rem;color:var(--mute);padding:8px 2px}

/* about */
.about-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);min-height:100vh}
.about-img{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.about-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:16% 22%}
.about-text{padding:clamp(120px,18vh,200px) var(--gut) clamp(60px,10vh,120px);align-self:center}
.about-text h1{margin-bottom:.6em}
.about-text p{max-width:54ch}
.skills{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:28px;margin-top:2.2em;padding-top:1.6em;border-top:1px solid var(--line)}
.skills h3{font-family:var(--text);font-size:.95rem;font-weight:500;margin-bottom:.5em}
.skills p{color:var(--mute);font-size:.95rem;margin:0}

/* contact */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(40px,6vw,96px);padding:clamp(80px,14vh,160px) var(--gut)}
.contact .mail{font:400 clamp(1.3rem,2.2vw,1.8rem)/1.3 var(--display);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.4)}
.contact .mail:hover{border-color:var(--paper)}
form{display:grid;gap:22px}
label{display:grid;gap:6px;font-size:.9rem;color:var(--mute)}
input,textarea{font:inherit;color:var(--paper);background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.4);padding:8px 0;border-radius:0;width:100%}
input:focus,textarea:focus{border-bottom-color:var(--paper);outline:none}
textarea{min-height:120px;resize:vertical}
.form-note{font-size:.85rem;color:var(--mute);margin:0}

footer{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding:30px var(--gut) calc(30px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);font-size:.85rem;color:var(--mute)}
footer img{width:60px}
footer a{color:var(--mute)}


/* film */
.yt{position:relative;margin:0 var(--gap);aspect-ratio:16/9;background:#000 url(../img/catania-video-poster.jpg) center/cover}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.hero-text .slogan{color:var(--paper);font-size:clamp(1.1rem,1.6vw,1.3rem);line-height:1.5;max-width:34ch;margin:0 0 1em}

/* from paper to place */
.process{padding:clamp(70px,12vh,130px) var(--gut);border-top:1px solid var(--line)}
.process-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(28px,5vw,80px);margin-bottom:clamp(32px,5vh,56px)}
.process .kicker{color:var(--mute);margin:0 0 .5em;font-size:.95rem}
.process-text p{max-width:56ch}
.triptych{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.4vw,20px)}
.step{margin:0}
.frame-box{aspect-ratio:4/5;overflow:hidden;background:rgba(255,255,255,.06)}
.frame-box img{width:100%;height:100%;object-fit:cover}
.step.card .frame-box{background:#fff;padding:clamp(10px,1.6vw,22px)}
.step.card .frame-box img{object-fit:contain}
.step figcaption{font-size:.9rem;color:var(--mute);padding-top:12px;line-height:1.5}
.step figcaption b{color:var(--paper);font-weight:500}
.step .n{color:var(--mute)}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);margin-top:1.6em;max-width:640px}
.duo figure{margin:0}
.duo img{width:100%;aspect-ratio:4/5;object-fit:cover}
.duo figcaption{font-size:.85rem;color:var(--mute);padding-top:8px}
@media (max-width:860px){.process-head,.triptych{grid-template-columns:1fr}}

@media (max-width:860px){
  :root{--gut:20px;--gap:6px}
  .top{padding-left:16px;padding-right:16px}
  .top nav{gap:14px;font-size:.88rem}
  .top .logo img{width:62px}.top.solid .logo img{width:52px}
  .hero{grid-template-columns:1fr}
  .hero-img{order:-1;min-height:64vh}
  .hero-text{padding-top:40px}
  .frame,.frame.flip{grid-template-columns:1fr}
  .frame.flip .frame-img{order:0}
  .band.split,.p-head,.story,.plan-grid,.offer,.piece,.about-grid,.contact{grid-template-columns:1fr}
  .about-img{position:relative;height:72vh}
  .plist a{grid-template-columns:1fr}
  .row{flex-direction:column}
  .row figure{flex:none!important}
  .piece .draws img{height:auto;width:calc(50% - 4px)}
  .strip{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:420px){.top nav{gap:10px;font-size:.82rem}}
@media (prefers-reduced-motion:reduce){body,.top,.top .logo img,.frame-img img{transition:none}html{scroll-behavior:auto}}
.plan-mini figure{margin:clamp(24px,4vh,40px) 0 0;width:min(260px,70vw)}
.plan-mini img{width:100%;height:auto;opacity:.9}
.plan-mini figcaption{font-size:.82rem;color:var(--mute);margin-top:6px}
.social{display:flex;gap:12px;flex-wrap:wrap;margin-top:1.6em}
.btn-line{display:inline-block;padding:11px 22px;border:1px solid rgba(255,255,255,.55);text-decoration:none;font-weight:400}
.btn-line:hover{background:var(--paper);color:var(--black)}

/* links hub */
.links-page{background:#000}
.links{max-width:520px;margin:0 auto;padding:calc(36px + env(safe-area-inset-top,0px)) 16px 48px;text-align:center}
.links-logo{width:96px;margin:0 auto 28px}
.links-face{width:104px;height:104px;border-radius:50%;object-fit:cover;object-position:50% 25%;margin:0 auto 16px}
.links h1{font-size:2rem;margin-bottom:.15em}
.links>p{margin:0 0 28px}
.lk-list{display:grid;gap:12px}
.lk{display:grid;grid-template-columns:56px 1fr 56px;align-items:center;min-height:68px;padding:6px;border:1px solid rgba(255,255,255,.28);text-decoration:none;font-weight:400;font-size:1.05rem;transition:background-color .2s,color .2s}
.lk img,.lk-ico{width:56px;height:56px;object-fit:cover}
.lk-ico{display:block}
.lk:hover{background:#fff;color:#000}
.links-foot{margin-top:28px;font-size:.9rem}
.links-foot a{color:inherit}
.links .save{margin:-8px auto 28px;display:inline-block}

/* consultations */
:root{--consult:#4a1a26}
.top nav .ns{display:none}
@media (max-width:600px){.top nav .nl{display:none}.top nav .ns{display:inline}}
.c-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:100vh;min-height:100svh}
.c-hero-text{display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;padding:120px var(--gut) clamp(40px,8vh,90px)}
.c-hero-text h1{max-width:12ch;margin-bottom:.45em}
.c-hero-text .lede{color:var(--mute);margin-bottom:2em}
.kicker{font-size:.95rem;margin:0 0 .8em}
.c-hero-img{position:relative;overflow:hidden;min-height:60vh}
.c-hero-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pk,.how{padding-top:clamp(70px,12vh,130px);padding-bottom:clamp(40px,6vh,70px)}
.pk h2,.how h2{margin-bottom:clamp(28px,5vh,48px)}
.pk-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,24px)}
.pk-card{display:flex;flex-direction:column;align-items:flex-start;padding:clamp(22px,2.6vw,36px);border:1px solid var(--line)}
.pk-card h3{margin-bottom:.5em}
.pk-card p.mute{flex:1}
.pk-meta{font-size:.85rem;color:var(--mute);letter-spacing:.04em;text-transform:uppercase;margin-bottom:1.2em}
.pk-price{font:400 1.6rem/1.2 var(--display);margin:.6em 0 1em}
.pk-note{margin-top:2em;max-width:60ch}
.how{border-top:1px solid var(--line);margin-top:clamp(40px,6vh,70px)}
.how-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,64px)}
.how-list .n{display:block;color:var(--mute);font-size:.9rem;margin-bottom:.8em}
.how-list h3{margin-bottom:.4em}
@media (max-width:860px){
  .c-hero,.pk-grid,.how-list{grid-template-columns:1fr}
  .c-hero-img{order:-1;min-height:56vh}
  .c-hero-text{padding-top:40px}
}
.links .book{display:block;margin:0 0 14px;padding:18px 26px;font-size:1.1rem}
.lk-social{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:24px}
.lk-social a{padding:9px 16px;border:1px solid var(--line);text-decoration:none;font-size:.9rem}
.lk-social a:hover{background:#fff;color:#000}
/* links hub, softer: no frames, rounded */
.links .book{border-radius:999px}
.lk{border:0;background:rgba(255,255,255,.08);border-radius:18px;padding:8px}
.lk img,.lk-ico{border-radius:12px}
.lk-social a{border:0;background:rgba(255,255,255,.08);border-radius:999px}

/* home hero, compact */
.hero-text{justify-content:center}
.hero-text .hero-name{color:var(--paper);font-family:var(--display);font-size:clamp(1.4rem,2vw,1.8rem);margin-bottom:.3em}
.hero-text p{line-height:1.6}
.hero-book{align-self:flex-start;margin-top:clamp(28px,5vh,48px);background:var(--paper);color:#000;text-decoration:none;font-weight:500;padding:14px 30px;border-radius:999px;transition:background-color .2s}
.hero-book:hover{background:#ece7df}
.hero .hero-text{justify-content:center;gap:clamp(40px,7vh,72px);padding-top:clamp(110px,16vh,150px)}
.hero .hero-text .hero-title{max-width:none;margin-bottom:0}
.hero-title{font-family:var(--display);font-weight:400;margin:0;line-height:1;color:var(--paper)}
.hero-title>span{display:block}
.hero-title .t1{font-size:clamp(2.2rem,4vw,3.8rem);letter-spacing:-.01em}
.hero-title .t2{position:relative;font-family:"Playfair Display",Georgia,serif;font-weight:900;text-transform:uppercase;color:#c8b08a;font-size:clamp(4.6rem,11.2vw,11rem);line-height:.82;letter-spacing:-.02em;margin-top:.04em}
.hero-title .t3{position:relative;z-index:1;font-size:clamp(2rem,3.6vw,3.4rem);line-height:1.05;margin-top:.35em;white-space:nowrap;text-shadow:0 2px 18px rgba(0,0,0,.6)}
.hero-title .by{position:absolute;left:-.1em;top:1.5em;font-family:var(--display);font-weight:400;text-transform:none;font-style:italic;font-size:.3em;line-height:1;color:var(--paper);letter-spacing:0;text-shadow:0 1px 3px rgba(0,0,0,.55),0 2px 16px rgba(0,0,0,.6)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hero-meta{display:flex;flex-direction:column}
.hero-meta .hero-book{margin-top:clamp(20px,3.5vh,32px)}
@media (max-width:860px){.hero .hero-text{padding-top:28px}.hero-title .t2{font-size:24vw}.hero-title .t3{font-size:8.4vw}}
@media (max-width:860px){.hero-text{padding-top:28px;padding-bottom:40px}.hero-img{min-height:46vh}}