/* Fodor Story – stylesheet (rebuilt from the Pixieset "theme 10" design) */
@font-face{font-family:"Montserrat";font-weight:300;font-style:normal;font-display:swap;src:url(fonts/montserrat-n3.woff2) format("woff2")}
@font-face{font-family:"Montserrat";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/montserrat-n4.woff2) format("woff2")}
@font-face{font-family:"Montserrat";font-weight:400;font-style:italic;font-display:swap;src:url(fonts/montserrat-i4.woff2) format("woff2")}
@font-face{font-family:"Montserrat";font-weight:500;font-style:normal;font-display:swap;src:url(fonts/montserrat-n5.woff2) format("woff2")}
@font-face{font-family:"Montserrat";font-weight:600;font-style:normal;font-display:swap;src:url(fonts/montserrat-n6.woff2) format("woff2")}
@font-face{font-family:"Montserrat";font-weight:700;font-style:normal;font-display:swap;src:url(fonts/montserrat-n7.woff2) format("woff2")}
@font-face{font-family:"Montserrat";font-weight:800;font-style:normal;font-display:swap;src:url(fonts/montserrat-n8.woff2) format("woff2")}
@font-face{font-family:"EB Garamond";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/ebgaramond-n4.woff2) format("woff2")}
@font-face{font-family:"EB Garamond";font-weight:400;font-style:italic;font-display:swap;src:url(fonts/ebgaramond-i4.woff2) format("woff2")}
@font-face{font-family:"EB Garamond";font-weight:500;font-style:normal;font-display:swap;src:url(fonts/ebgaramond-n5.woff2) format("woff2")}
@font-face{font-family:"EB Garamond";font-weight:500;font-style:italic;font-display:swap;src:url(fonts/ebgaramond-i5.woff2) format("woff2")}
@font-face{font-family:"EB Garamond";font-weight:600;font-style:normal;font-display:swap;src:url(fonts/ebgaramond-n6.woff2) format("woff2")}
@font-face{font-family:"EB Garamond";font-weight:600;font-style:italic;font-display:swap;src:url(fonts/ebgaramond-i6.woff2) format("woff2")}

:root{
  --bg:#FDF9F1; --green:#004225; --dark:#373737; --ink:#212327; --ink-hover:#514D4B; --line:#EB5C2E;
  --sans:"Montserrat",system-ui,sans-serif; --serif:"EB Garamond",Georgia,serif;
  --pad:max(20px,2.38vw);
  --bp:1vmax;                                  /* vertical padding of every block */
  /* type scale (identical formulas to the original theme) */
  --fs-display:min(3.375rem,1rem + 2.64vw);
  --fs-h1:min(2.125rem,1rem + 1.25vw);
  --fs-h2:min(1.15625rem,1rem + .17vw);
  --fs-h3:min(2.375rem,1rem + 1.53vw);
  --fs-h4:min(1.625rem,1rem + .69vw);
  --fs-h5:min(1.6875rem,1rem + .76vw);
  --fs-h6:.6875rem;
  --fs-p1:min(1.3125rem,1rem + .35vw);
  --fs-p2:min(1.125rem,1rem + .14vw);
  --fs-p3:min(1.15625rem,1rem + .17vw);
  --fs-sub:.9375rem;
  --fs-nav:.75rem;
  --header-h:125px;
}
@media (max-width:767.98px){:root{
  --header-h:85px;
  /* on phones the original theme scales type with the screen height */
  --fs-display:min(3.375rem,1rem + 2.64svh);
  --fs-h1:min(2.125rem,1rem + 1.25svh);
  --fs-h2:min(1.15625rem,1rem + .17svh);
  --fs-h3:min(2.375rem,1rem + 1.53svh);
  --fs-h4:min(1.625rem,1rem + .69svh);
  --fs-h5:min(1.6875rem,1rem + .76svh);
  --fs-p1:min(1.3125rem,1rem + .35svh);
  --fs-p2:min(1.125rem,1rem + .14svh);
  --fs-p3:min(1.15625rem,1rem + .17svh);
}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{--fs:var(--fs-p1);--lh:1.5;margin:0;background:var(--bg);color:var(--green);font-family:var(--serif);font-size:var(--fs-p2);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
figure{margin:0}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;z-index:100}
.skip:focus{left:10px;top:10px}
:focus-visible{outline:2px solid var(--line);outline-offset:3px}

/* ------------------------------------------------ typography */
:where(.prose) :is(h1,h2,h3,h4,h5,h6,p,ul,ol){margin:0}
h1,h2,h3,h4{font-family:var(--sans);text-transform:uppercase;font-weight:300}
h1{font-size:var(--fs-h1);line-height:1.4;letter-spacing:.1em;font-weight:300}
h1.display{font-size:var(--fs-display);line-height:1.16;letter-spacing:.12em;font-weight:800}
h2{font-size:var(--fs-h2);line-height:1.5;letter-spacing:.1em;font-weight:300}
h3{font-size:var(--fs-h3);line-height:1.42;letter-spacing:.1em;font-weight:700}
h4{font-size:var(--fs-h4);line-height:1.1;letter-spacing:0;font-weight:700}
h5{font-family:var(--serif);font-size:var(--fs-h5);line-height:1.43;font-weight:600;text-transform:none}
h6{font-family:var(--sans);font-size:var(--fs-h6);line-height:1.67;font-weight:700;text-transform:none}
strong,b{font-weight:700}
h5 strong{font-weight:600}
.prose a{text-decoration:underline;text-underline-offset:.15em}
.prose a:hover{opacity:.7}
.prose ul{padding-left:1.4em}

/* paragraph sizes: large = "paragraph 1", normal = "paragraph 2", caption = "paragraph 3" */
.size-large{--fs:var(--fs-p1);--lh:1.5}
.size-normal{--fs:var(--fs-p2);--lh:1.6}
.size-caption{--fs:var(--fs-p3);--lh:1.5}
.prose p,.prose li{font-size:var(--fs);line-height:var(--lh)}
.size-caption p{font-style:italic}
/* one empty line between paragraphs / headings – like the original editor */
.prose>*+*{margin-top:calc(var(--fs) * var(--lh))}
.prose>.elines{height:calc(var(--n) * var(--fs-p2) * 1.6);margin:0!important}
.prose>.elines+*{margin-top:0}
.prose>ul>li+li,.prose>ol>li+li{margin-top:0}
.prose h1,.prose h2,.prose h3,.prose h4,.prose h5,.prose h6{text-align:center}
.align-left p,.align-left li{text-align:left}
.align-center p,.align-center li,.align-center ul{text-align:center}
.align-center ul{list-style-position:inside;padding-left:0}
.align-right p{text-align:right}
.h-left h1,.h-left h2,.h-left h3,.h-left h4,.h-left h5,.h-left h6{text-align:left}
.c-dark{color:var(--dark)}
.c-white{color:#fff}

/* ------------------------------------------------ blocks & widths */
.blk{padding:var(--bp) var(--pad)}
.blk>.inner{max-width:2355px;margin:0 auto}
.w-narrow>.inner{width:100%}
.w-medium>.inner{width:100%}
@media (min-width:768px){.w-narrow>.inner{width:66.667%}.w-medium>.inner{width:83.333%}}
@media (min-width:992px){.w-narrow>.inner{width:50%}.w-medium>.inner{width:66.667%}}

.spacer-s{height:10px}.spacer-m{height:20px}.spacer-l{height:30px}
@media (min-width:768px){.spacer-s{height:25px}.spacer-m{height:50px}.spacer-l{height:100px}}
@media (min-width:992px){.spacer-s{height:40px}.spacer-m{height:80px}.spacer-l{height:160px}}

figcaption{font-family:var(--serif);font-style:italic;font-size:var(--fs-p3);line-height:1.5;text-align:center;margin-top:16px}

/* single photo */
.photo.w-full{padding-left:0;padding-right:0}
.photo img{width:100%;object-fit:cover}
.photo.w-full figcaption{padding:0 var(--pad)}

/* row of photos (multiple photos) */
.photos .row{display:flex;flex-direction:column;gap:50px;padding-bottom:50px}
.photos .ph img{width:100%;object-fit:cover}
@media (min-width:768px){.photos .row{padding-bottom:0;flex-direction:row;align-items:flex-start;gap:5.556vw}.photos .ph{flex:1 1 0;min-width:0}}

/* photo grid (masonry) */
.grid{--g:40px}
.grid .gcols{display:flex;flex-direction:column;gap:var(--g)}
.grid .gcol{display:contents}
.grid .gi{order:var(--o,0)}
.grid .gi img{width:100%;object-fit:cover}
.grid.gap-none{--g:0px}
.grid.has-lightbox .gi img{cursor:zoom-in}
.grid.extra-top{padding-top:calc(var(--bp) + max(52px,5vw))}
@media (min-width:768px){
  .grid.gap-l{--g:5.556vw}.grid.gap-m{--g:2.81vw}.grid.gap-s{--g:1.11vw}
  .grid .gcols{flex-direction:row;align-items:flex-start;gap:var(--g)}
  .grid .gcol{display:flex;flex-direction:column;gap:var(--g);flex:1 1 0;min-width:0}
  .grid.cols1 .gcols{flex-direction:column}
  .grid.cols1 .gcol{flex:none;width:100%}
  .grid.cols1.w-medium .gcols{width:66.667%;margin:0 auto}
  .grid.cols1.w-narrow .gcols{width:50%;margin:0 auto}
}

/* project cards */
.cards .inner{display:grid;grid-template-columns:1fr;gap:50px}
.card a{display:block;text-decoration:none}
.card img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:opacity .4s}
.card a:hover img{opacity:.85}
.card-title{font-family:var(--sans);font-size:var(--fs-sub);font-weight:400;letter-spacing:.2em;line-height:1.63;text-transform:uppercase;text-align:center;margin:32px 0 0}
.card-sub{font-family:var(--serif);font-style:italic;font-size:var(--fs-p2);line-height:1.6;text-align:center;margin:0}
@media (min-width:768px){.cards .inner{grid-template-columns:repeat(2,1fr);column-gap:5.556vw;row-gap:4.72vw}}
@media (min-width:992px){.cards .inner{grid-template-columns:repeat(4,1fr)}}

/* portfolio category tiles */
.tiles .inner{display:grid;grid-template-columns:1fr;gap:44px}
.tile{position:relative;display:block;text-decoration:none;color:#fff}
.tile .tint{background:rgba(0,0,0,.2);transition:background-color .4s}
.tile:hover .tint{background:rgba(0,0,0,.3)}
.tile img{width:100%;aspect-ratio:350/630!important;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.tile{overflow:hidden}
.tile:hover img{transform:scale(1.03)}
.tile-title{z-index:1;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:74%;text-align:center;font-family:var(--sans);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:var(--fs-h3);line-height:1.42}
@media (min-width:768px){.tiles .inner{width:63.2vw;max-width:1500px;grid-template-columns:1fr 1fr;column-gap:14px;row-gap:15px}.tile img{aspect-ratio:448/627!important}}

/* blog feed */
.feed .inner{display:grid;grid-template-columns:1fr;row-gap:80px}
.fpost{display:block;text-decoration:none}
.post-img{display:block;overflow:hidden}
.fpost img{width:100%;aspect-ratio:1/1!important;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.fpost:hover img{transform:scale(1.03)}
.post-title{font-size:var(--fs-h4);line-height:1.1;margin:24px 0 0;text-align:left}
@media (min-width:768px){
  .feed .inner{width:77.92vw;grid-template-columns:1fr 1fr;column-gap:16.11vw;row-gap:11.9vw;align-items:start}
  .fpost.tall img{aspect-ratio:445/627!important}.fpost.short img{aspect-ratio:445/303!important}
  .post-title{margin-top:2.78vw}
}

/* divider */
.divider{border:0;border-top:1px solid var(--line);margin:0 auto;width:100%}
@media (min-width:768px){.divider{width:62.8vw}}

/* slider */
.slider .inner{width:100%}
@media (min-width:768px){.slider .inner{width:79.1vw}}
.slides{position:relative;overflow:hidden}
.slide{position:absolute;inset:0;opacity:0;transition:opacity 1s ease}
.slide.on{opacity:1}
.slide img{width:100%;height:100%;object-fit:cover}
.sl-prev,.sl-next{position:absolute;top:0;bottom:0;width:30%;z-index:2}
.sl-prev{left:0;cursor:w-resize}.sl-next{right:0;cursor:e-resize}

/* photo with text overlay */
.overlay{padding-left:0;padding-right:0;position:relative}
.ov-img{position:relative}
.ov-img img{width:100%;aspect-ratio:1.5;object-fit:cover}
.tint{position:absolute;inset:0;background:rgba(0,0,0,.1);pointer-events:none}
.ov-text{padding:40px var(--pad) 0}
@media (min-width:768px){
  .ov-text{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:0 25vw;color:#fff}
}

/* split (photo + text side by side) */
.split{display:flex;flex-direction:column;gap:40px;padding-left:0;padding-right:0;overflow:hidden}
.sp-img img{width:134.6%;max-width:none;margin-left:-5.4%;aspect-ratio:1.5;object-fit:cover}
.sp-text{padding:0 var(--pad)}
@media (min-width:768px){
  .split{flex-direction:row;align-items:center;gap:0}
  .sp-img{flex:0 0 67.3vw;margin-left:-2.85vw}
  .sp-img img{width:100%;margin:0}
  .sp-text{flex:0 0 37.2vw;margin-left:4.44vw;padding:0}
  .split.img-right{flex-direction:row-reverse}
}

/* freeform (artboard) blocks: positions stored at 1440px (desktop) and 390px (mobile) */
.ff{position:relative;width:100%;container-type:inline-size;color:var(--green)}
.ffi-text.c-white{color:#fff}
.ffi-img .tint{position:absolute;inset:0}
.ff-in{position:relative;width:100%;height:0;padding-top:calc(var(--mr) * 1%)}
.ffi{position:absolute;left:calc(var(--mx) * 1%);top:calc(var(--my) * 1%);width:calc(var(--mw) * 1%);display:var(--mhide,block)}
.ffi-img{height:calc(var(--mh) * 1%)}
.ffi-img img{width:100%;height:100%;object-fit:cover}
.ffi-text{--s:calc(100cqw / 390);font-size:clamp(13px,calc(16 * var(--s)),19px)}
@media (min-width:1024px){
  .ff-in{padding-top:calc(var(--r) * 1%)}
  .ffi{left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);width:calc(var(--w) * 1%);display:block}
  .ffi-img{height:calc(var(--h) * 1%)}
  .ffi-text{--s:calc(100cqw / 1440);font-size:clamp(11.5px,calc(16 * var(--s)),20px)}
}
.ffi-text>*{margin:0}
.ffi-text p{font-size:1.125em;line-height:1.6}
.ffi-text .p1{font-size:1.3125em;line-height:1.5}
.ffi-text .p2{font-size:1.125em;line-height:1.6}
.ffi-text .p3{font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.153em;line-height:1.5}
.ffi-text .sub{font-family:var(--sans);font-size:.9375em;letter-spacing:.2em;text-transform:uppercase;line-height:1.63}
.ffi-text h1{font-size:2.125em}.ffi-text h1.display{font-size:3.375em}
.ffi-text h2{font-size:1.153em}.ffi-text h3{font-size:2.375em}
.ffi-text .center{text-align:center}.ffi-text .right{text-align:right}
.ffi-text .green{color:var(--green)}
.ffi-text .gap{line-height:1}

/* ------------------------------------------------ header */
.site-header{position:sticky;top:0;z-index:50;background:var(--bg);height:var(--header-h);transition:background-color .35s,color .35s}
.hd-in{height:100%;max-width:2355px;margin:0 auto;padding:0 var(--pad);display:flex;align-items:center;justify-content:space-between;position:relative}
.logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:block;line-height:0}
.logo img{width:clamp(113px,calc(114px + 2.5vw),150px);height:auto}
.logo-light{display:none}
.nav{display:none;gap:3.1vw;font-family:var(--sans);font-size:var(--fs-nav);font-weight:500;letter-spacing:.22em;line-height:1.4;text-transform:uppercase}
.nav a{text-decoration:none;position:relative;padding:4px 0;transition:opacity .3s}
.nav a:hover{opacity:.6}
.burger{width:30px;height:25px;position:relative;display:block}
.burger span,.burger::before,.burger::after{content:"";position:absolute;left:0;width:28px;height:2px;background:var(--ink);transition:background-color .35s}
.burger::before{top:5px}.burger span{top:12px}.burger::after{top:19px}
@media (min-width:992px){
  .burger{display:none}
  .nav{display:flex}
}
/* transparent header over the cover photo of blog posts */
.has-hero .site-header{position:fixed;left:0;right:0;background:transparent;color:#fff}
.has-hero .site-header .logo-dark{display:none}
.has-hero .site-header .logo-light{display:block}
.has-hero .site-header .burger span,.has-hero .site-header .burger::before,.has-hero .site-header .burger::after{background:#fff}
.has-hero .site-header.scrolled{background:var(--bg);color:var(--green)}
.has-hero .site-header.scrolled .logo-dark{display:block}
.has-hero .site-header.scrolled .logo-light{display:none}
.has-hero .site-header.scrolled .burger span,.has-hero .site-header.scrolled .burger::before,.has-hero .site-header.scrolled .burger::after{background:var(--ink)}

/* overlay (mobile) menu */
.overlay-menu{position:fixed;inset:0;z-index:60;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:40px;opacity:0;transition:opacity .35s}
.overlay-menu.open{opacity:1}
.overlay-menu[hidden]{display:none}
.overlay-menu nav{display:flex;flex-direction:column;align-items:center;gap:22px}
.overlay-menu nav a{font-family:var(--sans);font-size:var(--fs-h4);font-weight:400;letter-spacing:.1em;line-height:1.31;text-transform:uppercase;text-decoration:none;color:var(--green)}
.om-close{position:absolute;top:28px;left:var(--pad);width:30px;height:30px}
.om-close::before,.om-close::after{content:"";position:absolute;left:0;top:14px;width:30px;height:2px;background:var(--ink);transform:rotate(45deg)}
.om-close::after{transform:rotate(-45deg)}
.om-ig{color:var(--ink)}
body.menu-open{overflow:hidden}

/* ------------------------------------------------ hero (blog post cover) */
.hero{position:relative;height:calc(100vh + 65px);min-height:520px;overflow:hidden;color:#fff}
.hero-img{position:absolute;inset:0;width:100%;height:100%!important;object-fit:cover;aspect-ratio:auto!important}
.hero-title{position:absolute;left:var(--pad);right:var(--pad);top:50%;transform:translateY(-50%);margin:0;font-size:var(--fs-h3);line-height:1.42;letter-spacing:.1em;font-weight:700;color:#fff}
@media (min-width:768px){
  .hero{height:calc(100vh + 96px)}
  .hero-title{top:auto;transform:none;bottom:var(--bp);right:auto;max-width:56vw}
}
.post-footer{height:140px}
@media (max-width:767.98px){.post-footer{height:60px}}

/* ------------------------------------------------ contact */
.contact{display:grid;grid-template-columns:1fr;gap:40px;padding:var(--bp) var(--pad) 60px;color:var(--dark)}
.ct-text h2{font-weight:700;margin:0 0 1.6em;color:var(--dark);font-size:var(--fs-h2)}
.ct-text .prose p{font-size:var(--fs-p2);line-height:1.6;color:var(--dark)}
.ct-cta{font-family:var(--sans);font-size:var(--fs-sub);letter-spacing:.2em;line-height:1.63;text-transform:uppercase;margin:2.4em 0 0}
.ct-mail{margin:0;font-size:var(--fs-p2)}
.ct-mail a{text-decoration:none}
.ct-mail a:hover{text-decoration:underline}
.ct-img{justify-self:center;width:74.3%}
@media (max-width:767.98px){.ct-img img{aspect-ratio:260/360!important}}
.ct-img img{width:100%;object-fit:cover}
.ct-form{background:var(--bg);padding:30px;display:flex;flex-direction:column;gap:22px}
.ct-form label{display:flex;flex-direction:column;gap:12px}
.ct-form label span{font-family:var(--sans);font-size:.75rem;font-weight:500;letter-spacing:.2em;line-height:1.5;text-transform:uppercase;color:var(--green)}
.ct-form label i{font-style:normal;font-family:var(--serif);font-size:1.15rem;margin-left:4px;vertical-align:-2px}
.ct-form input,.ct-form textarea{font:inherit;font-family:var(--serif);font-size:1.125rem;color:var(--green);background:transparent;border:1px solid var(--line);border-radius:0;padding:8px;width:100%}
.ct-form textarea{min-height:130px;resize:vertical}
.ct-form .hp{display:none}
.btn{align-self:flex-start;background:var(--ink);color:#fff;font-family:var(--sans);font-size:.75rem;font-weight:500;letter-spacing:.21em;text-transform:uppercase;padding:20px 30px;margin-top:20px;transition:background-color .3s}
.btn:hover{background:var(--ink-hover)}
.btn[disabled]{opacity:.6;cursor:wait}
.ct-status{margin:0;font-style:italic;min-height:1.5em}
@media (min-width:768px){
  .contact{grid-template-columns:31.1vw 27.1vw;column-gap:13.2vw;justify-content:center;padding-top:10vh;align-items:start}
  .ct-text{grid-column:1;grid-row:1}
  .ct-form{grid-column:1;grid-row:2;margin:0 -30px}
  .ct-img{grid-column:2;grid-row:1 / span 2;width:100%;position:sticky;top:calc(var(--header-h) + 20px)}
}

/* ------------------------------------------------ footer */
.site-footer{position:relative;text-align:center;padding:30px var(--pad) 64px;color:var(--ink)}
.copyright{margin:0;font-family:var(--serif);font-style:italic;font-size:var(--fs-p3);line-height:1.5;color:var(--green)}
.site-footer .ig{display:inline-block;margin-top:24px;color:var(--ink);transition:opacity .3s}
.site-footer .ig:hover,.to-top:hover{opacity:.6}
.to-top{display:block;width:20px;margin:24px auto 0;color:var(--ink)}
@media (min-width:768px){
  .site-footer{padding:14px var(--pad) 30px}
  .to-top{position:absolute;right:var(--pad);top:14px;margin:0}
}

/* ------------------------------------------------ lightbox */
.lightbox{position:fixed;inset:0;z-index:90;background:rgba(253,249,241,.97);display:flex;align-items:center;justify-content:center}
.lightbox[hidden]{display:none}
.lightbox img{max-width:92vw;max-height:88vh;width:auto;height:auto;object-fit:contain}
.lb-close{position:absolute;top:20px;right:20px;width:34px;height:34px}
.lb-close::before,.lb-close::after{content:"";position:absolute;left:2px;top:16px;width:30px;height:2px;background:var(--ink);transform:rotate(45deg)}
.lb-close::after{transform:rotate(-45deg)}
.lb-prev,.lb-next{position:absolute;top:0;bottom:0;width:22%}
.lb-prev{left:0;cursor:w-resize}.lb-next{right:0;cursor:e-resize}

/* ------------------------------------------------ reveal on scroll */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.js .reveal{opacity:1;transform:none;transition:none}}
@media print{.site-header,.overlay-menu,.to-top,.lightbox{display:none!important}.js .reveal{opacity:1;transform:none}}