@font-face{font-family:'Italiana';font-weight:400;font-style:normal;font-display:swap;src:url('/assets/fonts/italiana-400.woff2') format('woff2')}
@font-face{font-family:'Jost';font-weight:300;font-style:normal;font-display:swap;src:url('/assets/fonts/jost-300.woff2') format('woff2')}
@font-face{font-family:'Jost';font-weight:500;font-style:normal;font-display:swap;src:url('/assets/fonts/jost-500.woff2') format('woff2')}

:root{
  --void:#09090A; --ink:#101012; --coal:#17171A; --gold:#E0B341; --gold-hi:#F3D687; --gold-dim:rgba(224,179,65,.34);
  --burgundy:#6B1B2C; --bone:#ECE6DA; --ash:#8E887C;
  --line:rgba(224,179,65,.22); --line-soft:rgba(236,230,218,.12);
  --display:'Italiana',Didot,Georgia,serif; --sans:'Jost',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --max:78rem; --gut:clamp(1.25rem,5vw,3.5rem); --ease:cubic-bezier(.2,.75,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5rem}
body{margin:0;background:var(--void);color:var(--bone);font-family:var(--sans);font-weight:300;font-size:1.06rem;line-height:1.75;-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.skip{position:absolute;left:1rem;top:-4rem;background:var(--gold);color:var(--void);padding:.7rem 1rem;z-index:300;text-decoration:none}
.skip:focus{top:1rem}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:400;line-height:1.1;letter-spacing:.02em;text-wrap:balance}
h2{font-size:clamp(2.4rem,5vw,4rem)}
h3{font-size:1.5rem}
p{margin:0}
.lead{color:var(--ash);max-width:38rem;font-size:clamp(1.05rem,1.2vw,1.15rem)}
.label{display:block;font-size:.74rem;letter-spacing:.38em;text-transform:uppercase;color:var(--gold);margin-bottom:1.2rem}
.section{padding-block:clamp(4.5rem,9vw,8rem)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:3.1rem;padding:.75rem 1.8rem;border:1px solid var(--gold);background:transparent;color:var(--gold);font-size:.8rem;letter-spacing:.26em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background .35s,color .35s}
.btn:hover{background:var(--gold);color:var(--void)}
.btn--solid{background:var(--gold);color:var(--void)}
.btn--solid:hover{background:transparent;color:var(--gold)}

/* header */
.top{position:fixed;inset:0 0 auto 0;z-index:100;transition:background .4s,border-color .4s;border-bottom:1px solid transparent}
.top.is-scrolled{background:rgba(9,9,10,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-color:var(--line)}
.top__in{display:flex;align-items:center;gap:1.5rem;height:4.6rem}
.brand{margin-right:auto;text-decoration:none;font-size:1.05rem;letter-spacing:.42em;color:var(--gold)}
.nav{display:flex;gap:2rem}
.nav a{text-decoration:none;font-size:.76rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ash);transition:color .25s}
.nav a:hover,.nav a[aria-current="true"]{color:var(--bone)}
@media (max-width:44rem){.nav{gap:1.1rem}.nav a{font-size:.66rem;letter-spacing:.14em}.brand{font-size:.92rem;letter-spacing:.3em}}

/* hero */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;padding-block:7rem 4rem;overflow:hidden}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,6vw,5rem);align-items:center;width:100%}
.hero h1{font-size:clamp(2.6rem,7vw,5.6rem);letter-spacing:.14em;color:var(--bone)}
.hero__sub{margin-top:1.6rem;font-size:clamp(1.05rem,1.4vw,1.25rem);color:var(--ash);max-width:32rem}
.hero__cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.4rem}
.hero__meta{margin-top:2.6rem;display:flex;flex-wrap:wrap;gap:.6rem 2rem;font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-dim)}
.frame{position:relative}
.frame img{width:100%;aspect-ratio:4/5;object-fit:cover}
.frame svg{position:absolute;inset:-1.6rem;width:calc(100% + 3.2rem);height:calc(100% + 3.2rem);pointer-events:none;overflow:visible}
.frame svg path,.frame svg line{fill:none;stroke:var(--gold);stroke-width:1.2;stroke-dasharray:var(--len,900);stroke-dashoffset:var(--len,900);transition:stroke-dashoffset 2.6s cubic-bezier(.3,0,.2,1) .5s}
body.is-ready .frame svg path,body.is-ready .frame svg line{stroke-dashoffset:0}
.fade{opacity:0;transform:translateY(16px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
body.is-ready .fade{opacity:1;transform:none}
body.is-ready .fade--1{transition-delay:.25s}body.is-ready .fade--2{transition-delay:.45s}body.is-ready .fade--3{transition-delay:.65s}body.is-ready .fade--4{transition-delay:.85s}
@media (max-width:56rem){.hero__grid{grid-template-columns:1fr}.frame{max-width:26rem}}

/* chevron rule, lifted from his card */
.chev{display:block;width:100%;height:2.4rem;color:var(--gold)}
.chev svg{width:100%;height:100%;display:block}

/* pieces */
.pieces{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,3vw,2.6rem)}
.piece{position:relative}
.piece__img{position:relative;overflow:hidden;background:var(--ink)}
.piece__img img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform 1.4s var(--ease)}
.piece:hover .piece__img img{transform:scale(1.04)}
.piece__img::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px var(--line-soft);pointer-events:none}
.piece h3{margin-top:1.2rem;font-size:1.45rem}
.piece span{display:block;margin-top:.3rem;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ash)}
.piece a{display:inline-block;margin-top:.9rem;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);text-decoration:none;border-bottom:1px solid var(--gold-dim);padding-bottom:.2rem;transition:border-color .3s}
.piece a:hover{border-color:var(--gold)}
.pieces__note{margin-top:2.4rem;color:var(--ash);font-size:.95rem}
@media (max-width:56rem){.pieces{grid-template-columns:1fr 1fr}}
@media (max-width:34rem){.pieces{grid-template-columns:1fr}}

/* manifesto */
.manifesto{background:var(--ink);position:relative}
.manifesto::before,.manifesto::after{content:"";position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold-dim),transparent)}
.manifesto::before{top:0}.manifesto::after{bottom:0}
.man__grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:clamp(2rem,6vw,5rem);align-items:start}
.man__body>p{font-family:var(--display);font-size:clamp(1.35rem,2.1vw,1.85rem);line-height:1.55;color:var(--bone)}
.man__rest p{font-family:var(--sans);font-weight:300;font-size:clamp(1.02rem,1.15vw,1.12rem);line-height:1.85;color:var(--ash)}
.man__rest p:last-child{color:var(--bone)}
.man__body p+p{margin-top:1.3rem}
.man__rest{margin-top:1.3rem}
.man__rest{overflow:hidden;max-height:0;opacity:0;transition:max-height .9s var(--ease),opacity .7s ease}
.man__rest.is-open{max-height:70rem;opacity:1}
.man__more{margin-top:1.8rem;background:none;border:0;padding:0;color:var(--gold);font-size:.76rem;letter-spacing:.24em;text-transform:uppercase;cursor:pointer;border-bottom:1px solid var(--gold-dim);padding-bottom:.25rem}
.man__more:hover{border-color:var(--gold)}
.man__sig{margin-top:2rem;font-family:var(--display);font-size:1.3rem;color:var(--gold)}
@media (max-width:56rem){.man__grid{grid-template-columns:1fr}}

/* influences */
.infl{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-soft);border-block:1px solid var(--line-soft)}
.infl div{background:var(--void);padding:clamp(1.6rem,3vw,2.4rem) 1.4rem}
.infl b{display:block;font-family:var(--display);font-size:1.35rem;color:var(--gold)}
.infl span{display:block;margin-top:.5rem;font-size:.95rem;color:var(--ash)}
@media (max-width:56rem){.infl{grid-template-columns:1fr 1fr}}

/* enquire */
.enq__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem);align-items:start}
form{display:grid;gap:1.1rem}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.field{display:flex;flex-direction:column;gap:.4rem;min-width:0}
.field label{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ash)}
.field input,.field select,.field textarea{min-height:3rem;border:0;border-bottom:1px solid var(--line-soft);background:transparent;color:var(--bone);padding:.6rem 0;border-radius:0;max-width:100%}
.field select option{background:var(--ink);color:var(--bone)}
.field textarea{min-height:6.5rem;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-bottom-color:var(--gold)}
.form__err{min-height:1.2rem;font-size:.9rem;color:#E0958E}
form .btn{justify-self:start}
.enq__list{list-style:none;margin:2rem 0 0;padding:0}
.enq__list li{padding:1.1rem 0;border-top:1px solid var(--line-soft)}
.enq__list li:last-child{border-bottom:1px solid var(--line-soft)}
.enq__list b{display:block;font-family:var(--display);font-size:1.3rem;color:var(--bone)}
.enq__list span{color:var(--ash);font-size:.97rem}
@media (max-width:56rem){.enq__grid{grid-template-columns:1fr}}
@media (max-width:30rem){.row2{grid-template-columns:1fr}}

/* footer */
.foot{border-top:1px solid var(--line-soft);padding-block:3rem 2rem;text-align:center;color:var(--ash);font-size:.92rem}
.foot .name{font-size:1.1rem;letter-spacing:.42em;color:var(--gold)}
.foot nav{display:flex;justify-content:center;gap:1.8rem;margin-top:1.3rem}
.foot nav a{text-decoration:none;font-size:.74rem;letter-spacing:.22em;text-transform:uppercase}
.foot nav a:hover{color:var(--bone)}
.foot small{display:block;margin-top:1.8rem;font-size:.78rem;color:rgba(142,136,124,.7)}
.foot small a{text-decoration:none}

.rise{opacity:0;transform:translateY(22px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.rise.in{opacity:1;transform:none}
.simple{min-height:74vh;display:grid;place-items:center;text-align:center;padding-block:7rem 4rem}
.simple h1{font-size:clamp(2.4rem,6vw,4rem);letter-spacing:.1em}
.simple p{margin:1.2rem auto 0;max-width:32rem;color:var(--ash)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .fade,.rise{opacity:1!important;transform:none!important}
  .frame svg path,.frame svg line{stroke-dashoffset:0!important}
  .man__rest{max-height:none;opacity:1}
}