/* Suzanne Turley Landscapes — static rebuild
   Layout model: every page is a fluid canvas designed at 1024 units wide
   (desktop) and 320 units wide (phone). 1 unit = 1/1024 of the viewport
   width, so the design scales exactly like the original Readymag build. */

@font-face{font-family:"Canela";font-weight:300;font-style:normal;src:url("../fonts/Canela-Light.woff") format("woff");font-display:swap}
@font-face{font-family:"Canela";font-weight:400;font-style:normal;src:url("../fonts/Canela-Regular.woff") format("woff");font-display:swap}
@font-face{font-family:"Canela";font-weight:300;font-style:italic;src:url("../fonts/Canela-LightItalic.woff") format("woff");font-display:swap}
@font-face{font-family:"Swiss 721";font-weight:300;font-style:normal;src:url("../fonts/Swiss721BT-Light.woff") format("woff");font-display:swap}
@font-face{font-family:"Swiss 721";font-weight:400;font-style:normal;src:url("../fonts/Swiss721BT-Roman.woff") format("woff");font-display:swap}
@font-face{font-family:"Swiss 721";font-weight:500;font-style:normal;src:url("../fonts/Swiss721BT-Medium.woff") format("woff");font-display:swap}
@font-face{font-family:"Swiss 721";font-weight:700;font-style:normal;src:url("../fonts/Swiss721BT-Bold.woff") format("woff");font-display:swap}

:root{
  --ink:#002b33;          /* deep teal used for all type */
  --cream:#f9faf7;        /* page background */
  --sage:#82938b;         /* section background */
  --gold:#c1995d;         /* arrow accents */
  --stone:#e4e6e3;        /* contact page */
  --serif:"Canela","Cormorant Garamond",Georgia,serif;
  --sans:"Swiss 721","Helvetica Neue",Helvetica,Arial,sans-serif;
  --u:calc(100vw / 1024); /* one design unit: layout scales with the window */
  --tu:clamp(1.1px, 100vw / 1024, 1.4px); /* text unit: type scales too, but never below ~110% or above 140% of the design size */
  --nav-h:0px;
  --ease:cubic-bezier(.4,0,.2,1);
}
@media (max-width:767px){
  :root{--u:calc(100vw / 320);--tu:calc(100vw / 320)}
}

*{box-sizing:border-box}
html{background:var(--cream);-webkit-text-size-adjust:100%}
body{
  margin:0;color:var(--ink);background:var(--cream);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.page-contact{background:var(--stone)}
a{color:inherit;text-decoration:none}
img{display:block}
::selection{background:#c9d2cd}

/* ---------- page transitions ---------- */
body{opacity:0;transition:opacity .55s var(--ease)}
body.ready{opacity:1}
body.leaving{opacity:0;transition-duration:.3s}

/* ---------- canvas ---------- */
.canvas{position:relative;width:100%;overflow:hidden;
  height:calc(var(--h) * var(--u));}
@media (max-width:767px){.canvas{height:calc(var(--ph) * var(--u))}}
.w{position:absolute;
  left:calc(var(--x) * var(--u));top:calc(var(--y) * var(--u));
  width:calc(var(--wd) * var(--u));}
.w.hbox{height:calc(var(--ht) * var(--u))}
.w.full{left:0;width:100%}
.w.dk-hide{display:none}
@media (max-width:767px){
  .w{left:calc(var(--px,var(--x)) * var(--u));top:calc(var(--py,var(--y)) * var(--u));width:calc(var(--pw,var(--wd)) * var(--u))}
  .w.hbox{height:calc(var(--pht,var(--ht)) * var(--u))}
  .w.full{left:0;width:100%}
  .w.ph-hide{display:none}
  .w.dk-hide{display:block}
}
.w.fixed{position:fixed}

/* text */
.t h1{font:inherit}
.t p,.t h1{margin:0;white-space:pre-wrap;
  font-family:var(--ff,var(--sans));
  font-size:calc(var(--fs,12) * var(--tu));
  line-height:calc(var(--lh,15) * var(--tu));
  font-weight:var(--fw,400);font-style:var(--fst,normal);
  letter-spacing:calc(var(--ls,0) * var(--tu));
  color:var(--c,var(--ink));text-align:var(--al,left);
  text-decoration:var(--td,none);text-transform:var(--tt,none)}
.t p span{font-family:var(--ff,inherit);font-weight:var(--fw,inherit);font-style:var(--fst,inherit);color:var(--c,inherit);
  font-size:calc(var(--fs,12) * var(--tu));letter-spacing:calc(var(--ls,0) * var(--tu));text-decoration:var(--td,inherit)}
@media (max-width:767px){
  .t p,.t h1{font-size:calc(var(--pfs,var(--fs,12)) * var(--tu));line-height:calc(var(--plh,var(--lh,15)) * var(--tu))}
  .t p span{font-size:calc(var(--pfs,var(--fs,12)) * var(--tu))}
}
.t a{transition:opacity .25s var(--ease)}
.t a:hover{opacity:.6}
.t p.empty{min-height:calc(var(--lh,15) * var(--tu))}

/* small text links: View all projects, Read more, View */
.t.cta p,.t p.cta{font-size:calc(11 * var(--tu)) !important;font-weight:400 !important;letter-spacing:.01em !important;line-height:1.6 !important}
.t p.cta{margin-top:calc(4 * var(--tu))}
@media (max-width:767px){.t.cta p,.t p.cta{font-size:13px !important}}
.t.cta a,.t p.cta a{display:inline-block;position:relative;transition:none}
.t.cta a:hover,.t p.cta a:hover{opacity:1}
.t.cta a::after,.t p.cta a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.t.cta a:hover::after,.t p.cta a:hover::after{transform:scaleX(1);transform-origin:left}

/* project caption rows: name / place */
.cap{display:flex;gap:0;align-items:baseline;white-space:nowrap}
.cap .nm{font-weight:700;flex:0 0 auto;margin-right:calc(28 * var(--tu))}
.cap .loc{opacity:.9}
.cap.phone-wrap{white-space:normal;flex-wrap:wrap}
.cap.phone-wrap .loc{flex-basis:100%}

/* pictures */
.pic{overflow:hidden;background:#e9ebe6}
.pic img{width:100%;height:100%;object-fit:cover;object-position:var(--op,50% 50%)}
a.pic{display:block}
a.pic img{transition:transform 1.2s var(--ease)}
a.pic:hover img{transform:scale(1.025)}
.tile{opacity:.95;transition:opacity .2s var(--ease)}
.tile.hot,.tile:hover{opacity:1}

/* shapes */
.rect{height:calc(var(--ht) * var(--u))}
.line{border-top:1px solid var(--ink);height:0}
.icon img{width:100%;height:auto}
.icon.svg svg{width:100%;height:100%;display:block}

/* phone-only outlined buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;height:calc(var(--ht) * var(--u));width:100%;
  border:1px solid var(--ink);border-radius:4px;background:#fff;color:var(--ink);
  font:500 calc(13 * var(--u))/1 var(--sans);letter-spacing:.4px;transition:background .3s,color .3s}
.btn:hover{background:var(--ink);color:#fff}

/* ---------- home: hero fills the window ---------- */
:root{--hero-extra:max(0px, calc(100vh - 700 * var(--u)))}
@media (max-width:767px){:root{--hero-extra:0px}}
.canvas.home{height:calc(var(--h) * var(--u) + var(--hero-extra))}
.canvas.home .w{top:calc(var(--y) * var(--u) + var(--hero-extra))}
.canvas.home .w.hero-el{top:0;height:calc(700 * var(--u) + var(--hero-extra))}
.canvas.home .w.hero-mid{top:calc(var(--y) * var(--u) + var(--hero-extra) / 2)}
.canvas.home .w.hero-bottom{top:calc(var(--y) * var(--u) + var(--hero-extra))}
@media (max-width:767px){
  .canvas.home{height:calc(var(--ph) * var(--u))}
  .canvas.home .w{top:calc(var(--py,var(--y)) * var(--u))}
  .canvas.home .w.hero-el{top:calc(var(--py,var(--y)) * var(--u));height:calc(var(--pht,var(--ht)) * var(--u))}
}

/* ---------- hero slideshow ---------- */
.hero{z-index:var(--z);overflow:hidden;background:#111}
.hero .slide{position:absolute;inset:0;opacity:0;transition:opacity 2s var(--ease);will-change:opacity}
.hero .slide img{width:100%;height:100%;object-fit:cover;transform:scale(1);transition:transform 9s linear}
.hero .slide.on{opacity:1}
.hero .slide.on img{transform:scale(1.045)}
.hero-shade{background:rgba(0,0,0,.4)}
.hero-title{letter-spacing:.01em}
.hero-arrow{cursor:pointer;animation:bob 2.4s var(--ease) infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(calc(6 * var(--u)))}}

/* ---------- navigation ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:900;
  display:flex;align-items:center;justify-content:space-between;
  padding:calc(12 * var(--u)) calc(24 * var(--u));
  font:400 calc(11 * var(--tu))/1 var(--sans);letter-spacing:.01em;color:var(--ink);
  --navbg:249,250,247;
  transition:color .5s var(--ease),background-color .5s var(--ease),backdrop-filter .5s var(--ease)}
.page-contact .nav{--navbg:228,230,227}
.nav.scrolled{background:rgb(var(--navbg))}
.nav.light{color:#fff}
.nav .brand{opacity:1;transition:opacity .6s var(--ease)}
.nav .brand.hide{opacity:0;pointer-events:none}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:calc(28 * var(--u))}
.nav li a{position:relative;padding:4px 0}
.nav li a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.nav li a:hover::after,.nav li a[aria-current]::after{transform:scaleX(1);transform-origin:left}
.nav .burger{display:none}
@media (max-width:767px){
  .nav{padding:14px 20px;font-size:13px}
  .nav ul{display:none}
  .nav .burger{display:block;width:22px;height:16px;position:relative;background:none;border:0;padding:0;cursor:pointer;color:inherit}
  .nav .burger span{position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .4s var(--ease),opacity .3s,top .4s var(--ease)}
  .nav .burger span:nth-child(1){top:0}.nav .burger span:nth-child(2){top:7px}.nav .burger span:nth-child(3){top:14px}
  body.menu-open .nav{color:var(--ink)}
  body.menu-open .burger span:nth-child(1){top:7px;transform:rotate(45deg)}
  body.menu-open .burger span:nth-child(2){opacity:0}
  body.menu-open .burger span:nth-child(3){top:7px;transform:rotate(-45deg)}
}
.menu{position:fixed;inset:0;z-index:850;background:var(--cream);display:flex;flex-direction:column;justify-content:center;padding:0 20px;
  opacity:0;pointer-events:none;transition:opacity .45s var(--ease)}
.menu a{font:400 36px/1.25 var(--serif);color:var(--ink);transform:translateY(14px);opacity:0;transition:transform .6s var(--ease),opacity .6s var(--ease)}
.menu a.small{font:400 13px/2.4 var(--sans);margin-top:18px}
body.menu-open .menu{opacity:1;pointer-events:auto}
body.menu-open .menu a{transform:none;opacity:1}
body.menu-open .menu a:nth-child(2){transition-delay:.05s}
body.menu-open .menu a:nth-child(3){transition-delay:.1s}
body.menu-open .menu a:nth-child(4){transition-delay:.15s}
body.menu-open .menu a:nth-child(5){transition-delay:.2s}
body.menu-open{overflow:hidden}

/* ---------- editorial / tiles view switch (project pages) ---------- */
.vtoggle{text-align:right;font:400 calc(11 * var(--tu))/1.6 var(--sans);letter-spacing:.01em}
.vtoggle button{background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;position:relative}
.vtoggle button::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.vtoggle button:hover::after,.vtoggle button[aria-pressed="true"]::after{transform:scaleX(1);transform-origin:left}
.vtoggle .sep{margin:0 calc(8 * var(--tu));opacity:.4}
.tiles{display:none;position:relative;z-index:2;background:var(--cream);margin:0 calc(80 * var(--u));padding:0 0 calc(40 * var(--u))}
.tiles .tcredits{margin-bottom:calc(36 * var(--u))}
.tiles .tcredits p{margin:0;font:400 calc(10 * var(--tu))/calc(15 * var(--tu)) var(--sans)}
.lbl{opacity:.5}
.tgrid{column-count:3;column-gap:calc(24 * var(--u))}
.tgrid figure{margin:0 0 calc(24 * var(--u));break-inside:avoid;aspect-ratio:var(--ar);background:#e9ebe6;overflow:hidden;opacity:0;transform:translateY(12px);animation:tilein .8s var(--ease) forwards}
.tgrid figure:nth-child(2){animation-delay:.05s}.tgrid figure:nth-child(3){animation-delay:.1s}.tgrid figure:nth-child(4){animation-delay:.15s}.tgrid figure:nth-child(5){animation-delay:.2s}.tgrid figure:nth-child(n+6){animation-delay:.25s}
@keyframes tilein{to{opacity:1;transform:none}}
.tgrid img{width:100%;height:100%;object-fit:cover;display:block}
body.view-tiles .canvas{height:calc(var(--hcut) * var(--u))}
body.view-tiles .tiles{display:block}
body.view-tiles .canvas .an{transform:none !important;opacity:1 !important}
@media (max-width:767px){
  .vtoggle{display:none}
  .tiles{margin:0 20px}
  .tgrid{column-count:2;column-gap:12px}
  .tgrid figure{margin-bottom:12px}
}

/* ---------- next projects (project pages) ---------- */
.related{position:relative;z-index:2;background:var(--cream);margin:0 calc(80 * var(--u));
  padding:calc(90 * var(--u)) 0 calc(110 * var(--u));display:flex;justify-content:space-between;align-items:flex-start;gap:calc(40 * var(--u))}
.related .rhead{font:400 calc(11 * var(--tu))/1.6 var(--sans)}
.related .rhead p{margin:0}
.related .label{opacity:.55;margin-bottom:calc(6 * var(--tu))}
.related .rhead a{position:relative}
.related .rhead a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.related .rhead a:hover::after{transform:scaleX(1);transform-origin:left}
.related .rtiles{display:flex;gap:calc(24 * var(--u));justify-content:flex-end}
.rtile{display:block;width:calc(300 * var(--u));opacity:.95;transition:opacity .3s var(--ease)}
.rtile:hover{opacity:1}
.rtile .pic{display:block;aspect-ratio:403/268;overflow:hidden;background:#e9ebe6}
.rtile .pic img{width:100%;height:100%;object-fit:cover;object-position:var(--op,50% 50%);transition:transform 1.2s var(--ease)}
.rtile:hover .pic img{transform:scale(1.025)}
.rtile .rcap{display:flex;gap:calc(16 * var(--tu));margin-top:calc(10 * var(--tu));font:400 calc(11 * var(--tu))/1.5 var(--sans);white-space:nowrap}
.rtile .rcap b{font-weight:700}
.rtile .rcap > span{opacity:.9}
@media (max-width:767px){
  .related{margin:0 20px;padding:20px 0 50px;flex-direction:column;gap:20px}
  .related .rhead{font-size:13px}
  .related .rtiles{flex-direction:column;gap:28px;width:100%}
  .rtile{width:100%}
  .rtile .rcap{font-size:12px;white-space:normal}
}

/* ---------- footer ---------- */
.footer{position:relative;z-index:2;background:var(--cream);
  margin:0 calc(60 * var(--u));padding:calc(32 * var(--u)) 0 calc(40 * var(--u));
  border-top:1px solid var(--ink);
  display:flex;justify-content:space-between;align-items:flex-start;
  font:400 calc(10 * var(--tu))/calc(15 * var(--tu)) var(--sans)}
.page-contact .footer{background:transparent}
.footer .cols{display:flex;gap:calc(60 * var(--u))}
.footer p{margin:0}
.footer .right{text-align:right}
.footer .credit{margin-top:calc(22 * var(--tu));opacity:.7}
.footer a:hover{text-decoration:underline}
@media (max-width:767px){
  .footer{margin:0 20px;padding:28px 0 60px;font-size:13px;line-height:19px;flex-wrap:wrap;gap:20px}
  .footer .cols{flex-direction:column;gap:14px}
  .footer .right{text-align:left}
}

/* ---------- contact page (hand built) ---------- */
.contact{min-height:100vh;padding:calc(143 * var(--u)) calc(192 * var(--u)) calc(80 * var(--u));
  display:grid;grid-template-columns:calc(234 * var(--u)) 1fr;gap:0 0;align-items:start}
.contact h1{grid-column:1;margin:0 0 calc(20 * var(--u));font:400 calc(28 * var(--tu))/1.2 var(--serif)}
.contact .addr{grid-column:1;font:400 calc(11 * var(--tu))/calc(16 * var(--tu)) var(--sans)}
.contact .addr p:first-child,.contact .more h2{font-weight:500}
.contact .map{grid-column:2;width:calc(410 * var(--u));height:calc(277 * var(--u));overflow:hidden;background:#d8dcd6;
  filter:grayscale(1) contrast(.95);transition:filter .6s var(--ease)}
.contact .map:hover{filter:none}
.contact .map iframe{width:100%;height:100%;border:0;display:block}
.contact .more{grid-column:1 / -1;display:grid;grid-template-columns:repeat(3,calc(234 * var(--u)));
  margin-top:calc(60 * var(--u));font:400 calc(11 * var(--tu))/calc(16 * var(--tu)) var(--sans)}
.contact p{margin:0}
.contact .more h2{margin:0;font:inherit}
.contact a:hover{text-decoration:underline}
.contact .f{opacity:0;transform:translateY(10px);animation:fadeup .8s var(--ease) forwards}
.contact .f:nth-child(2){animation-delay:.1s}.contact .f:nth-child(3){animation-delay:.2s}.contact .f:nth-child(4){animation-delay:.3s}
@keyframes fadeup{to{opacity:1;transform:none}}
@media (max-width:767px){
  .contact{display:block;padding:90px 20px 40px}
  .contact h1{font-size:32px}
  .contact .addr,.contact .more{font-size:14px;line-height:16px}
  .contact .map{width:100%;height:277px;margin-top:30px}
  .contact .more{display:block;margin-top:30px}
  .contact .more > div{margin-bottom:24px}
}

/* ---------- phone layout (reading-order flow) ---------- */
.mob{display:none}
@media (max-width:767px){
  .canvas,.tiles,.vtoggle{display:none !important}
  .mob{display:block;padding:72px 20px 40px;background:var(--cream)}
  .page-home .mob{padding-top:0}
  .mob .t{margin:0 0 22px}
  .mob .t p,.mob .t h1{font-size:15px !important;line-height:1.55 !important;white-space:normal;color:var(--ink) !important;text-align:left !important}
  .mob .t p span{font-size:inherit !important}
  .mob .mcred{margin:-6px 0 30px}
  .mob .mcred p{font-size:12px !important;line-height:1.6 !important}
  .mob .mgrid{column-count:2;column-gap:12px;margin:10px 0 30px}
  .mob .mgrid .mfig{margin:0 0 12px;break-inside:avoid}
  .mob .msmallgrid{column-count:2}
  .mob .mtiles{display:grid;grid-template-columns:1fr 1fr;gap:24px 14px;margin:10px 0 30px}
  .mob .mtiles .mfig{margin:0}
  .mob .mtiles .mfig .pic{aspect-ratio:4/3 !important}
  .mob .mtiles .mcap{flex-direction:column;gap:0;font-size:11px}
  .mob .mtiles .mcap span{opacity:.7}
  .mob .mquote{margin:34px 0 40px}
  .mob .mquote p{font-size:21px !important;line-height:1.35 !important;font-family:var(--serif);font-weight:300}
  .mob .t p.empty{min-height:10px}
  .mob .mtitle{margin:0 0 14px}
  .mob .mtitle h1,.mob .mtitle p{font-size:30px !important;line-height:1.15 !important;font-family:var(--serif)}
  .mob .msub p{font-size:26px !important;margin-top:36px}
  .mob .mtext p .lbl{opacity:.5}
  .mob .t p.cta,.mob .t.cta p{font-size:13px !important;line-height:1.6 !important;margin-top:4px}
  .mob .mfig{display:block;margin:26px 0 30px}
  .mob .mfig .pic{display:block;aspect-ratio:var(--ar);overflow:hidden;background:#e9ebe6}
  .mob .mfig .pic img{width:100%;height:100%;object-fit:cover;object-position:var(--op,50% 50%);display:block}
  .mob .mcap{display:flex;gap:12px;margin-top:9px;font:400 12px/1.5 var(--sans);color:var(--ink)}
  .mob .mcap b{font-weight:700}
  .mob .mhero{position:relative;height:100svh;min-height:480px;margin:0 -20px 36px;overflow:hidden;background:#111}
  .mob .mhero-shade{position:absolute;inset:0;background:rgba(0,0,0,.35)}
  .mob .mhero-title{position:absolute;left:20px;right:20px;top:50%;transform:translateY(-50%);margin:0;text-align:center;color:#fff;font:300 26px/1.2 var(--serif);letter-spacing:.01em}
  .mob .mhero .hero-arrow{position:absolute;left:50%;bottom:28px;width:26px;height:14px;margin-left:-13px;color:#fff}
  .mob .mhero .hero-arrow svg{width:100%;height:100%;display:block}
  .page-projects .mob .mfig{margin:0}
  .page-projects .mob{display:grid;grid-template-columns:1fr 1fr;gap:28px 14px;align-items:start}
  .page-projects .mob .t{grid-column:1 / -1}
  .page-projects .mob .mfig .pic{aspect-ratio:4/3 !important}
  .page-projects .mob .mcap{flex-direction:column;gap:0;font-size:11px}
  .page-projects .mob .mcap span{opacity:.7}
  .page-home .mob .mfig .pic{aspect-ratio:var(--ar)}
  .related{margin-top:0}
}

/* ---------- motion helpers ---------- */
.an{will-change:opacity,transform}
.ld{opacity:0}
.ld.in{opacity:1}
@media (prefers-reduced-motion:reduce){
  .an,.ld{opacity:1 !important;transform:none !important;transition:none !important}
  .hero .slide img{transition:none;transform:none}
  .hero-arrow{animation:none}
}