/* Luiten Ortega. Palette and type lifted from the Readymag build. */

/* Fonts: drop your licensed files into /fonts/ as lo-sans.woff2 and lo-serif(.woff2, -italic.woff2).
   Until then the src list falls through to the files Readymag is currently serving (these will stop
   working once the Readymag project is unpublished). */
@font-face{font-family:"LO Sans";font-weight:400;font-style:normal;font-display:swap;
  src:url(/fonts/lo-sans.woff2) format("woff2"),
      url(https://c-p.rmcdn.net/custom-fonts/font-51680157-afca-4705-a54d-87d4c27a1264.ttf) format("truetype")}
@font-face{font-family:"LO Sans";font-weight:500;font-style:normal;font-display:swap;
  src:url(/fonts/lo-sans-medium.woff2) format("woff2"),
      url(https://c-p.rmcdn.net/custom-fonts/font-68c471a7-1a2d-4346-bf98-23cb1faa77d7.ttf) format("truetype")}
@font-face{font-family:"LO Serif";font-weight:400;font-style:normal;font-display:swap;
  src:url(/fonts/lo-serif.woff2) format("woff2"),
      url(https://c-p.rmcdn.net/custom-fonts/font-3802fe49-7ac0-4a4c-8f46-e7fe98661543.ttf) format("truetype")}
@font-face{font-family:"LO Serif";font-weight:400;font-style:italic;font-display:swap;
  src:url(/fonts/lo-serif-italic.woff2) format("woff2"),
      url(https://c-p.rmcdn.net/custom-fonts/font-e9512a26-f844-4f20-a2bb-a0200da365a8.ttf) format("truetype")}

:root{
  --bg:#352d20;
  --ink:#e7e9e8;
  --ink-dim:rgba(231,233,232,.62);
  --rule:rgba(231,233,232,.18);
  --sans:"LO Sans",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --serif:"LO Serif",Georgia,"Times New Roman",serif;
  --gutter:clamp(16px,4.9vw,70px);        /* 50px at 1024 canvas */
  --max:1440px;
  --fs-xs:clamp(11px,.88vw,13px);        /* 9px on the 1024 canvas */
  --fs-sm:clamp(13px,1.17vw,17px);       /* 12px */
  --fs-md:clamp(18px,1.56vw,23px);       /* 16px */
  --ease:cubic-bezier(.2,.6,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--fs-xs)/1.6 var(--sans);letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
img{display:block;max-width:100%;height:auto}
figure{margin:0}
a{color:inherit;text-decoration:none}
a:hover{opacity:.7;transition:opacity .25s}
p{margin:0 0 1.2em}
h1,h2{font-weight:400;margin:0}
main{flex:1}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--bg);padding:8px 12px;z-index:100}
.skip:focus{left:8px}

/* ---------- header ---------- */
.site-header{position:fixed;inset:0 0 auto 0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  padding:12px 18px;font-size:var(--fs-xs);mix-blend-mode:difference;color:#fff}
.site-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:clamp(18px,3vw,44px)}
.site-nav a[aria-current="page"]{opacity:.6}
.menu-toggle{display:none;background:none;border:0;color:inherit;font:inherit;padding:0;cursor:pointer}
@media (max-width:640px){
  .menu-toggle{display:block}
  .site-nav{display:none;position:fixed;inset:0;background:var(--bg);padding:70px var(--gutter);mix-blend-mode:normal}
  .site-nav.is-open{display:block}
  .site-nav ul{flex-direction:column;gap:18px;font-size:var(--fs-md);font-family:var(--serif)}
  .site-header.nav-open{mix-blend-mode:normal;color:var(--ink)}
}

/* ---------- home ---------- */
.hero{position:relative;height:100svh;min-height:520px;overflow:hidden;background:#000}
.slides,.slide{position:absolute;inset:0}
.slide{background-size:cover;background-position:center;opacity:0;transition:opacity 2s ease-in-out}
.slide.is-active{opacity:1}
.hero::after{content:"";position:absolute;inset:0;background:rgba(40,40,40,.25);pointer-events:none}
.hero-mark{position:absolute;left:50%;top:50%;translate:-50% -50%;width:clamp(44px,4.7vw,68px);z-index:2;filter:drop-shadow(0 1px 8px rgba(0,0,0,.25))}

.intro{padding:clamp(80px,13vw,190px) var(--gutter) clamp(40px,6vw,90px);text-align:center}
.intro p{font-family:var(--serif);font-size:var(--fs-sm);line-height:1.9;max-width:62ch;margin:0 auto}

.home-cards{display:grid;grid-template-columns:repeat(12,1fr);gap:0 var(--gutter);padding:0 var(--gutter) clamp(80px,10vw,160px);max-width:var(--max);margin:0 auto}
.card{display:block;position:relative}
.card img{aspect-ratio:552/780;object-fit:cover;width:100%}
.card .label{display:block;font-family:var(--serif);font-size:var(--fs-sm);margin-top:10px}
.card-1{grid-column:2 / span 4}
.card-2{grid-column:7 / span 4;margin-top:clamp(120px,26vw,380px)}
@media (max-width:760px){
  .card-1{grid-column:1 / span 8}
  .card-2{grid-column:5 / span 8;margin-top:60px}
}

/* ---------- generic page ---------- */
.page-title{font-size:var(--fs-md);padding:clamp(90px,12vw,150px) var(--gutter) clamp(24px,3vw,40px);max-width:var(--max);margin:0 auto}
.lead{font-family:var(--serif);font-size:var(--fs-sm);line-height:1.7;margin-bottom:1.6em}

/* ---------- projects index: editorial stagger ---------- */
.project-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:0 var(--gutter);padding:0 var(--gutter) clamp(80px,10vw,160px);max-width:var(--max);margin:0 auto}
.tile{display:block;position:relative}
.tile img{width:100%;object-fit:cover}
.tile .label{display:block;font-family:var(--serif);font-size:var(--fs-sm);margin-top:10px}
/* six repeating placements, mirroring the original's rhythm of wide / tall / portrait */
.t1{grid-column:1 / span 6}          .t1 img{aspect-ratio:410/266}
.t2{grid-column:8 / span 5;margin-top:clamp(120px,22vw,320px)} .t2 img{aspect-ratio:368/281}
.t3{grid-column:2 / span 4;margin-top:clamp(40px,8vw,120px)}  .t3 img{aspect-ratio:238/339}
.t4{grid-column:9 / span 4;margin-top:clamp(80px,14vw,200px)} .t4 img{aspect-ratio:276/390}
.t5{grid-column:1 / span 6;margin-top:clamp(-40px,-4vw,-20px)}.t5 img{aspect-ratio:419/273}
.t6{grid-column:8 / span 4;margin-top:clamp(60px,10vw,140px)} .t6 img{aspect-ratio:238/325}
@media (max-width:760px){
  .tile{margin-top:48px !important}
  .t1,.t5{grid-column:1 / span 9}
  .t2{grid-column:4 / span 9}
  .t3{grid-column:2 / span 6}
  .t4,.t6{grid-column:6 / span 7}
}

/* ---------- project page ---------- */
.project-hero img{width:100%;height:clamp(420px,64vw,92vh);object-fit:cover}
.project-head{display:grid;grid-template-columns:repeat(12,1fr);gap:24px var(--gutter);padding:clamp(40px,5vw,72px) var(--gutter) 0;max-width:var(--max);margin:0 auto}
.project-head h1{grid-column:1 / span 3;font-size:var(--fs-md)}
.project-text{grid-column:5 / span 5}
.credits{grid-column:10 / span 3;margin:0}
.credits div{margin-bottom:1.2em}
.credits dt{color:var(--ink-dim)}
.credits dd{margin:0}
.credits a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--rule)}
@media (max-width:900px){
  .project-head h1{grid-column:1 / -1}
  .project-text{grid-column:1 / span 10}
  .credits{grid-column:1 / span 8}
}
.gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter);padding:clamp(60px,7vw,110px) var(--gutter) 0;max-width:var(--max);margin:0 auto}
.gallery figure img{width:100%;object-fit:cover}
.g-p{grid-column:span 4}            .g-p img{aspect-ratio:288/407}
.g-p:nth-of-type(2){grid-column:5 / span 4}
.g-l{grid-column:5 / span 8}         .g-l img{aspect-ratio:606/422}
.g-t{grid-column:7 / span 6}         .g-t img{aspect-ratio:425/565}
@media (max-width:760px){
  .g-p,.g-p:nth-of-type(2){grid-column:span 6}
  .g-l,.g-t{grid-column:2 / span 11}
}
.project-next{display:flex;justify-content:space-between;gap:24px;padding:clamp(70px,9vw,140px) var(--gutter) clamp(60px,8vw,120px);max-width:var(--max);margin:0 auto;font-family:var(--serif);font-size:var(--fs-sm)}

/* ---------- studio ---------- */
.studio-top,.studio-pair,.studio-process{display:grid;grid-template-columns:repeat(12,1fr);gap:24px var(--gutter);padding:0 var(--gutter);max-width:var(--max);margin:0 auto}
.portrait{grid-column:1 / span 5}
.portrait img{aspect-ratio:379/512;object-fit:cover;width:100%}
.studio-text{grid-column:7 / span 5;padding-top:clamp(40px,14vw,200px)}
.studio-pair{padding-top:clamp(100px,14vw,200px)}
.studio-pair figure:first-child{grid-column:7 / span 3}
.studio-pair figure:last-child{grid-column:10 / span 3}
.studio-pair img{aspect-ratio:204/286;object-fit:cover;width:100%}
.studio-process{padding-top:clamp(70px,9vw,130px);padding-bottom:clamp(80px,10vw,160px)}
.studio-process>*{grid-column:4 / span 5}
.services{list-style:none;padding:0;margin:0}
.services li::before{content:"– "}
@media (max-width:760px){
  .portrait{grid-column:1 / span 10}
  .studio-text{grid-column:2 / span 11;padding-top:32px}
  .studio-pair figure:first-child{grid-column:1 / span 6}
  .studio-pair figure:last-child{grid-column:7 / span 6}
  .studio-process>*{grid-column:1 / span 11}
}

/* ---------- contact ---------- */
.contact{display:grid;grid-template-columns:repeat(12,1fr);gap:40px var(--gutter);padding:0 var(--gutter) clamp(80px,10vw,160px);max-width:var(--max);margin:0 auto}
.contact-left{grid-column:1 / span 4}
.contact-left img{aspect-ratio:288/208;object-fit:cover;width:100%}
.contact-details{margin:clamp(60px,10vw,150px) 0 0}
.contact-details div{margin-bottom:1.6em}
.contact-details dt{margin-bottom:.2em}
.contact-details dd{margin:0;color:var(--ink-dim)}
.enquiry{grid-column:7 / span 5;display:flex;flex-direction:column;gap:14px}
.form-intro{margin-bottom:12px}
.form-intro strong{font-weight:400;display:block;margin-bottom:.2em}
.enquiry label{display:flex;flex-direction:column;gap:4px}
.enquiry label span{color:var(--ink-dim)}
.enquiry input,.enquiry textarea{font:inherit;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--rule);
  border-radius:0;padding:6px 0;outline:0;width:100%}
.enquiry input:focus,.enquiry textarea:focus{border-bottom-color:var(--ink)}
.enquiry textarea{resize:vertical;min-height:120px}
.enquiry button{font:inherit;color:var(--ink);background:transparent;border:1px solid var(--rule);padding:10px 0;cursor:pointer;margin-top:8px}
.enquiry button:hover{border-color:var(--ink)}
@media (max-width:760px){.contact-left{grid-column:1 / span 10}.enquiry{grid-column:1 / span 11}}

/* ---------- footer ---------- */
.site-footer{display:grid;grid-template-columns:repeat(4,auto);justify-content:space-between;align-items:center;gap:16px 24px;
  padding:24px var(--gutter) 28px;font-size:var(--fs-xs);max-width:var(--max);margin:0 auto;width:100%}
.foot-brand{display:flex;align-items:center;gap:14px}
.foot-brand img{width:42px;height:auto}
@media (max-width:640px){.site-footer{grid-template-columns:1fr 1fr}}

/* ---------- motion ---------- */
.reveal{opacity:0;translate:0 14px;transition:opacity .8s var(--ease),translate .8s var(--ease)}
.reveal.in{opacity:1;translate:0 0}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;translate:none;transition:none}.slide{transition:none}}