/* Gemz Pictures — paper & fold */

/* ---------- fonts (self-hosted, no third-party requests: works from China too) ---------- */
@font-face{font-family:"Spectral";font-style:normal;font-weight:300;font-display:swap;src:url(fonts/spectral-latin-300-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Spectral";font-style:normal;font-weight:300;font-display:swap;src:url(fonts/spectral-latin-ext-300-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Spectral";font-style:normal;font-weight:300;font-display:swap;src:url(fonts/spectral-vietnamese-300-normal.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Spectral";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/spectral-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Spectral";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/spectral-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Spectral";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/spectral-vietnamese-400-normal.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/montserrat-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/montserrat-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/montserrat-vietnamese-400-normal.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/montserrat-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/montserrat-latin-ext-500-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/montserrat-vietnamese-500-normal.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/montserrat-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/montserrat-latin-ext-600-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/montserrat-vietnamese-600-normal.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}

/* ---------- tokens ---------- */
:root{
  --paper:#E9E2D7; --paper-hi:#F3EEE6; --paper-lo:#DDD4C8;
  --fold-1:#DACEC3; --fold-2:#C3B7A9; --fold-3:#A99C8E; --fold-4:#85786A; --fold-5:#51483F;
  --ink:#2B2622; --ink-soft:#5E554C;
  --oxblood:#5A0C11; --oxblood-deep:#3A0609; --oxblood-hi:#74161C;
  --screen:#1F1B18; --screen-2:#2B2622; --on-screen:#ECE5DA; --on-screen-soft:#B3A698;
  --live:#4F6B3F;
  --tex:url(img/paper.webp);
  /* light comes from the top left: shadows fall down and to the right */
  --lift-1:0 1px 1px rgba(62,46,30,.10),0 3px 6px -2px rgba(62,46,30,.16);
  --lift-2:0 1px 1px rgba(62,46,30,.10),0 10px 18px -8px rgba(62,46,30,.30),0 26px 48px -26px rgba(62,46,30,.35);
  --serif:"Spectral",Georgia,"Times New Roman",serif;
  --sans:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gutter:clamp(16px,4vw,56px);
  --max:1320px;
  --band:clamp(56px,8vw,120px);
  --env:clamp(70px,11vw,170px);
}

*,*::before,*::after{box-sizing:border-box}
html{color-scheme:only light;-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;overflow-x:clip;color:var(--ink);font:400 16.5px/1.65 var(--sans);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;
  background:var(--tex) 0 0/512px 512px,var(--paper);background-blend-mode:soft-light,normal}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:300}
p{margin:0}
button{font:inherit;color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--oxblood);outline-offset:3px}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--paper);padding:10px 14px;z-index:100}
.skip:focus{left:8px}
/* letterpress: type pressed into the sheet catches light on its lower edge */
.hero__claim,.why__head h2,.why__list h3,.network h2,.contact h2{text-shadow:0 1px 0 rgba(255,253,248,.7)}

/* ---------- buttons: a strip of oxblood paper folded once, so it has a lit and a shaded facet ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:13px 24px;
  font:500 15px/1.2 var(--sans);text-decoration:none;border:0;cursor:pointer}
.btn--primary{color:#F6F0E8;
  background:var(--tex) 0 0/512px 512px,linear-gradient(104deg,#7A1A21 0%,#64121A 61.5%,#4C0A10 61.6%,#3E070C 100%);
  background-blend-mode:soft-light,normal;
  box-shadow:inset 0 1px 0 rgba(255,220,214,.14),0 1px 1px rgba(40,10,10,.25),0 9px 14px -8px rgba(60,16,16,.55);
  transition:transform .12s ease,box-shadow .12s ease,filter .2s}
.btn--primary:hover{filter:brightness(1.12)}
.btn--primary:active{transform:translateY(1px);box-shadow:inset 0 1px 0 rgba(255,220,214,.12),0 1px 1px rgba(40,10,10,.3),0 3px 6px -4px rgba(60,16,16,.5)}
.btn--quiet{padding-left:2px;padding-right:2px;color:var(--ink);background:none;text-decoration:underline;text-decoration-color:var(--fold-4);text-underline-offset:6px;text-decoration-thickness:1px}
.btn--quiet:hover{text-decoration-color:var(--oxblood);text-decoration-thickness:2px}
.btn--light{color:var(--on-screen);
  background:var(--tex) 0 0/512px 512px,linear-gradient(104deg,#3A342E 0%,#322C27 61.5%,#272320 61.6%,#221E1B 100%);background-blend-mode:soft-light,normal;
  box-shadow:inset 0 1px 0 rgba(255,245,230,.08),0 10px 18px -10px rgba(0,0,0,.7)}
.btn--light:hover{filter:brightness(1.18)}
.btn--big{min-height:60px;font-size:17px;padding:18px 30px}

/* ---------- header: a paper strip lying over the page ---------- */
.top{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:clamp(16px,2.4vw,28px);height:84px;padding:0 var(--gutter);
  background:var(--tex) 0 0/512px 512px,color-mix(in srgb,var(--paper-hi) 94%,transparent);background-blend-mode:soft-light,normal;
  box-shadow:0 1px 0 rgba(255,253,248,.7) inset,0 1px 1px rgba(62,46,30,.10),0 8px 16px -12px rgba(62,46,30,.45)}
.top__logo{display:block;flex:none;padding:4px 0}
.top__logo img{display:block;width:auto;height:60px;transition:transform .2s ease}
.top__logo:hover img{transform:translateY(-1px) rotate(-2deg)}
/* the sections sit right next to the G, after a fold line */
.top__nav{display:flex;align-items:center;gap:clamp(18px,2.6vw,34px);padding-left:clamp(16px,2.4vw,28px);font:500 16px/1 var(--sans);
  background:linear-gradient(90deg,rgba(110,84,58,.22) 0 1px,rgba(255,253,248,.85) 1px 2px,transparent 2px) left center/2px 36px no-repeat}
.top__nav a{text-decoration:none;padding:10px 0;color:var(--ink);white-space:nowrap}
.top__nav a:hover{box-shadow:inset 0 -1px 0 var(--oxblood)}
.top__nav a.is-current{color:var(--oxblood);box-shadow:inset 0 -2px 0 var(--oxblood)}

/* ---------- hero ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;padding:clamp(36px,6vw,84px) var(--gutter) clamp(72px,9vw,132px)}
.relief{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.hero__in{max-width:var(--max);margin:0 auto}
/* logo to content width = 1 : golden ratio */
.hero__logo{--phi:1.618;width:calc(100% / var(--phi));margin-left:-1.2%}
.hero__logo img{width:100%}
.hero__body{display:grid;grid-template-columns:7fr 5fr;gap:clamp(28px,5vw,80px);align-items:end;margin-top:clamp(28px,5vw,60px)}
.hero__claim{font:300 clamp(38px,5.4vw,74px)/1.04 var(--serif);letter-spacing:-.012em;max-width:13em;text-wrap:balance}
.hero__aside p{max-width:34em;color:var(--ink-soft)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:26px}
/* ---------- why: a lighter sheet laid on the page, its panels folded like a leporello ---------- */
.sheet-wrap{position:relative;z-index:1;margin:clamp(-40px,-3vw,-16px) clamp(0px,2.4vw,36px) 0;filter:drop-shadow(0 2px 2px rgba(62,46,30,.12)) drop-shadow(0 22px 26px rgba(62,46,30,.22))}
.why{--ear:clamp(56px,7vw,104px);position:relative;
  background:var(--tex) 0 0/512px 512px,linear-gradient(168deg,#F6F2EB 0%,#EFE9E0 60%,#ECE5DB 100%);background-blend-mode:soft-light,normal;
  display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:clamp(32px,6vw,96px);
  padding:clamp(72px,9vw,128px) max(var(--gutter),calc((100vw - var(--max))/2 + var(--gutter))) clamp(48px,6vw,88px)}
.why__head{align-self:start;position:sticky;top:96px}
.why__head h2{font:300 clamp(36px,4.2vw,58px)/1.05 var(--serif);letter-spacing:-.01em}
.why__head p{margin-top:20px;color:var(--ink-soft);max-width:26em}
.why__list{display:grid;grid-template-columns:1fr 1fr;margin:0}
.why__list article{position:relative;padding:clamp(26px,3vw,40px) clamp(22px,2.6vw,36px)}
/* panels alternate like a map folded in a zig-zag: vertical and horizontal creases */
.why__list article:nth-child(odd){background:linear-gradient(90deg,rgba(255,253,248,.55),rgba(255,253,248,0) 85%)}
.why__list article:nth-child(even){background:linear-gradient(90deg,rgba(110,84,58,.0),rgba(110,84,58,.075))}
.why__list article:nth-child(4n+3),.why__list article:nth-child(4n+4){background-color:rgba(110,84,58,.025)}
.why__list article:nth-child(even)::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(90deg,rgba(110,84,58,.16) 0 1px,rgba(255,253,248,.8) 1px 2px)}
.why__list article:nth-child(n+3)::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(180deg,rgba(255,253,248,.85) 0 1px,rgba(110,84,58,.13) 1px 2px)}
.why__list h3{font:400 clamp(22px,2vw,27px)/1.18 var(--serif);margin-bottom:12px;text-wrap:balance}
.om{display:block;width:clamp(64px,6vw,84px);height:auto;margin:0 0 16px -6px;overflow:visible}
.why__list p{font-size:15.5px;color:var(--ink-soft);max-width:36em}

/* ---------- locations: a folded road map, and a print of each place with a postcard of where you stay ---------- */
.places{padding:clamp(72px,9vw,132px) var(--gutter) clamp(32px,5vw,72px)}
.places__in{max-width:var(--max);margin:0 auto}
.places__head{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(28px,5vw,80px);align-items:center}
.places__text h2{font:300 clamp(36px,4.2vw,58px)/1.05 var(--serif);letter-spacing:-.01em;text-wrap:balance}
.places__text p{margin-top:20px;color:var(--ink-soft);max-width:28em}
.hu-map{width:100%;height:auto;display:block;overflow:visible}
.map-pin{cursor:pointer;outline:none}
.map-pin polygon{transition:transform .2s ease;transform-box:fill-box;transform-origin:center}
.map-label{font:400 23px var(--serif);fill:var(--ink);paint-order:stroke;stroke:#EFE8DE;stroke-width:4px;stroke-linejoin:round;transition:fill .2s}
.map-label--big{font-size:29px;fill:var(--oxblood)}
.map-label--small{font:500 15px var(--sans);fill:var(--ink-soft)}
.map-pin.is-active polygon,.map-pin:hover polygon,.map-pin:focus-visible polygon{transform:scale(1.7)}
.map-pin.is-active .map-label,.map-pin:hover .map-label,.map-pin:focus-visible .map-label{fill:var(--oxblood)}
.places__list{--pgap:clamp(28px,3vw,48px);--pmr:clamp(20px,3vw,34px);container-type:inline-size;list-style:none;margin:clamp(48px,6vw,88px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(56px,6vw,88px) var(--pgap)}
.place{scroll-margin-top:96px}
/* Budapest and the Great Plain get a wide print: the base, and the widest horizon */
.place--wide{grid-column:span 2}
.place--wide .place__photo{aspect-ratio:auto;height:calc(((100cqw - 2 * var(--pgap)) / 3 - var(--pmr)) / 1.5)}
.place--wide .place__stay{width:15%}
.place--wide p{max-width:44em}
/* the place: a mounted print; where you stay: a smaller postcard laid over its corner */
.place__prints{position:relative;margin:0 var(--pmr) clamp(34px,3.6vw,48px) 0}
.place__prints picture{display:block}
.place__photo{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;background:#D9CFC2;
  border:clamp(5px,.5vw,7px) solid #F7F2EA;box-shadow:0 1px 1px rgba(62,46,30,.14),0 16px 26px -14px rgba(62,46,30,.45);transition:transform .3s ease,box-shadow .3s ease}
.place__stay{position:absolute;right:calc(clamp(20px,3vw,34px) * -1);bottom:calc(clamp(34px,3.6vw,48px) * -1);width:34%;height:auto;aspect-ratio:4/5;object-fit:cover;background:#D9CFC2;
  border:clamp(4px,.4vw,6px) solid #F7F2EA;box-shadow:0 1px 2px rgba(62,46,30,.2),0 12px 20px -8px rgba(62,46,30,.5);transition:transform .3s ease}
.place.is-active .place__photo,.place:hover .place__photo{transform:translateY(-3px);box-shadow:0 2px 3px rgba(62,46,30,.16),0 24px 32px -14px rgba(62,46,30,.5)}
.place.is-active .place__stay,.place:hover .place__stay{transform:translate(4px,4px)}
.place h3{font:400 clamp(23px,2vw,28px)/1.15 var(--serif);text-shadow:0 1px 0 rgba(255,253,248,.7)}
.place__time{margin-top:4px;font-size:13.5px;color:var(--fold-4)}
.place p{font-size:15px;color:var(--ink-soft);max-width:34em}
.place__time+p{margin-top:12px}
.place__staytext{margin-top:10px}
.place b{font-weight:600;color:var(--ink)}
.places__note{margin-top:clamp(40px,5vw,64px);font-size:13.5px;color:var(--fold-4)}

/* ---------- network fan ---------- */
.network{padding:clamp(64px,9vw,128px) var(--gutter) clamp(40px,6vw,80px)}
.network__in{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,5vw,72px);align-items:center}
.network h2{font:300 clamp(34px,3.8vw,52px)/1.06 var(--serif);letter-spacing:-.01em;text-wrap:balance}
.network__text p{margin-top:20px;color:var(--ink-soft);max-width:28em}
.network__list{display:none;list-style:none;padding:0;margin:28px 0 0;grid-template-columns:1fr 1fr;gap:14px 20px;font-size:14px;color:var(--ink-soft)}
.network__list b{display:block;font:400 20px/1.2 var(--serif);color:var(--ink)}
.fan{width:100%;height:auto;overflow:visible}
.fan .crease{stroke:rgba(255,252,246,.85);stroke-width:1.3}
.fan .valley{stroke:rgba(52,40,28,.35);stroke-width:1}
.fan-country{font:400 30px var(--serif);fill:var(--ink)}
.fan-city{font:400 16px var(--sans);fill:var(--ink-soft)}
.fan-apex circle{fill:var(--oxblood)}
.fan-base{font:500 17px var(--sans);fill:var(--oxblood);text-anchor:start}
.js .fan .pleat{transform-box:view-box;transform-origin:40px 350px;transition:transform 1.25s cubic-bezier(.2,.75,.12,1) calc(var(--i) * 90ms)}
.js .fan .fan-label{transition:opacity .6s ease calc(700ms + var(--i) * 90ms)}
.js .fan:not(.is-open) .pleat{transform:rotate(var(--from))}
.js .fan:not(.is-open) .fan-label{opacity:0}

/* ---------- work: black card stock folded into a Miura-ori ---------- */
.work{position:relative;z-index:1;color:var(--on-screen);
  background:var(--tex) 0 0/512px 512px,url(img/miura-dark.svg) 0 0/300px 200px,#211D19;background-blend-mode:soft-light,normal,normal;
  clip-path:polygon(0 calc(var(--band) * .7),62.5% 0,100% calc(var(--band) * .5),100% 100%,0 100%);
  padding:calc(var(--band) + clamp(24px,4vw,56px)) var(--gutter) calc(var(--env) + clamp(56px,7vw,104px))}
/* the black card sits on the paper: a soft shadow along its folded top edge */
.work-wrap{position:relative;z-index:1;filter:drop-shadow(0 -2px 2px rgba(62,46,30,.12)) drop-shadow(0 -14px 18px rgba(62,46,30,.16))}
.work__head,.grid,.work__more{max-width:var(--max);margin-left:auto;margin-right:auto}
.work__head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:12px 40px;margin-bottom:clamp(32px,4vw,52px)}
.work__head h2{font:300 clamp(36px,4.2vw,58px)/1.05 var(--serif);letter-spacing:-.01em;text-shadow:0 -1px 0 rgba(0,0,0,.6)}
.work__head p{grid-column:1;color:var(--on-screen-soft);max-width:36em}
.filter{grid-column:2;grid-row:1 / span 2;align-self:end;display:flex;background:rgba(0,0,0,.22);box-shadow:inset 0 1px 3px rgba(0,0,0,.55),0 1px 0 rgba(255,245,230,.06);padding:3px}
.filter button{background:none;border:0;padding:11px 16px;min-height:42px;font:500 13.5px/1 var(--sans);color:var(--on-screen-soft);cursor:pointer}
.filter button[aria-pressed="true"]{color:var(--ink);background:var(--tex) 0 0/512px 512px,linear-gradient(180deg,#F1EBE2,#DED5C9);background-blend-mode:soft-light,normal;box-shadow:0 1px 1px rgba(0,0,0,.5),0 4px 8px -4px rgba(0,0,0,.6)}
.filter button:focus-visible,.work :focus-visible{outline-color:var(--on-screen)}
.grid{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:40px 24px}
.card{all:unset;display:block;width:100%;cursor:pointer;box-sizing:border-box}
/* each film sits in a folded paper frame: four mitred strips, each catching the light differently */
.card__img{position:relative;display:block;aspect-ratio:16/9;background:#2B2622;box-sizing:content-box;
  border:clamp(5px,.55vw,8px) solid;border-color:#F3EDE4 #B9AD9F #A19484 #DDD4C8;
  box-shadow:0 2px 3px rgba(0,0,0,.45),0 18px 26px -14px rgba(0,0,0,.85);transition:transform .25s ease,box-shadow .25s ease}
.card__img::before{content:"";position:absolute;inset:0;box-shadow:inset 1px 1px 0 rgba(0,0,0,.45),inset -1px -1px 0 rgba(255,250,240,.12);pointer-events:none;z-index:1}
.card__img img{width:100%;height:100%;object-fit:cover}
.card:hover .card__img,.card:focus-visible .card__img{transform:translateY(-4px);box-shadow:0 3px 5px rgba(0,0,0,.45),0 28px 36px -16px rgba(0,0,0,.9)}
.card:focus-visible{outline:2px solid var(--on-screen);outline-offset:8px}
.card__brand{display:block;margin-top:16px;font:500 15px/1.35 var(--sans);color:var(--on-screen)}
.card__detail{display:block;font-size:14px;line-height:1.4;color:var(--on-screen-soft)}
.card__country{display:block;margin-top:4px;font-size:12.5px;color:var(--fold-3)}
.work__more{text-align:center;margin-top:56px}
.work__noscript{max-width:var(--max);margin:0 auto;color:var(--on-screen-soft)}

/* ---------- contact ---------- */
/* ---------- contact: an opened envelope, its top flap standing up into the dark section ---------- */
.contact{position:relative;z-index:2;isolation:isolate;padding:clamp(72px,9vw,132px) var(--gutter) clamp(88px,11vw,160px)}
.envelope{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.env-flap{position:absolute;left:0;width:100%;top:calc(var(--env) * -1);height:var(--env);pointer-events:none;filter:drop-shadow(0 -6px 10px rgba(0,0,0,.35))}
.contact__in{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(36px,6vw,96px);align-items:start}
.contact h2{font:300 clamp(48px,7vw,96px)/1 var(--serif);letter-spacing:-.015em}
.contact__text p{margin-top:22px;max-width:30em;color:var(--ink-soft);font-size:17.5px}
/* pressed into the sheet */
.status{display:flex;align-items:baseline;gap:12px;margin-top:30px!important;padding:16px 18px;color:var(--ink)!important;font-size:15.5px!important;max-width:30em;
  background:rgba(110,84,58,.06);box-shadow:inset 1px 2px 3px rgba(62,46,30,.20),inset -1px -1px 0 rgba(255,253,248,.75)}
.status__dot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--fold-3);transform:translateY(-1px);box-shadow:inset 0 1px 1px rgba(0,0,0,.25)}
.status.is-online .status__dot{background:var(--live);box-shadow:0 0 0 4px color-mix(in srgb,var(--live) 20%,transparent)}
.contact__ways{padding-top:clamp(0px,1.6vw,24px)}
.contact__ways .btn{width:100%}
.ways{margin:30px 0 0;display:grid}
.ways div{display:grid;grid-template-columns:96px 1fr;align-items:center;gap:16px;padding:16px 0;
  background:linear-gradient(180deg,rgba(110,84,58,.18) 0 1px,rgba(255,253,248,.8) 1px 2px,transparent 2px) top/100% 2px no-repeat}
.ways dt{font:500 14px var(--sans);color:var(--ink-soft)}
.ways dd{margin:0;font-size:16px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;overflow-wrap:anywhere}
.ways a{text-decoration:none;box-shadow:inset 0 -1px 0 var(--fold-4)}
.ways a:hover{box-shadow:inset 0 -2px 0 var(--oxblood)}
.copy{background:linear-gradient(180deg,#F5F0E8,#E6DED2);border:0;padding:6px 11px;min-height:34px;font:500 13px var(--sans);cursor:pointer;box-shadow:0 1px 1px rgba(62,46,30,.2),0 3px 6px -3px rgba(62,46,30,.35)}
.copy:active{transform:translateY(1px);box-shadow:0 1px 1px rgba(62,46,30,.2)}

/* ---------- corner timecode: a paper tag pinned to the bottom right ---------- */
.tc{--ear:11px;position:fixed;right:20px;bottom:20px;z-index:35;margin:0;padding:8px 13px 8px 12px;font:500 11px/1 var(--sans);transition:opacity .35s ease,transform .35s ease;font-variant-numeric:tabular-nums;color:var(--ink-soft);
  background:var(--tex) 0 0/512px 512px,linear-gradient(170deg,#F7F3EC,#EAE3D8);background-blend-mode:soft-light,normal;
  filter:drop-shadow(0 1px 1px rgba(62,46,30,.18)) drop-shadow(0 8px 12px rgba(62,46,30,.22))}
.tc__row{display:grid;grid-template-columns:6px auto 1fr;align-items:center;gap:8px;margin:0;padding:3px 0}
.tc.is-away{opacity:0;transform:translateY(10px);pointer-events:none}
.tc__code{letter-spacing:.05em;color:var(--ink-soft);white-space:nowrap}
.tc__row time{justify-self:end;padding-left:12px;color:var(--ink)}
.tc__dot{width:6px;height:6px;border-radius:50%;background:#CDC3B6;box-shadow:inset 0 1px 1px rgba(0,0,0,.2)}
.tc__row.is-day .tc__dot{background:#B89A72}
.tc__row--home .tc__code{color:var(--oxblood)}
.tc__row--home.is-day .tc__dot{background:var(--live)}

/* ---------- footer: black card ---------- */
.foot{color:var(--on-screen-soft);padding:48px var(--gutter);display:grid;grid-template-columns:auto 1fr auto;gap:24px 56px;align-items:start;font-size:13.5px;line-height:1.6;
  background:var(--tex) 0 0/512px 512px,#1C1916;background-blend-mode:soft-light,normal;box-shadow:inset 0 1px 0 rgba(255,245,230,.06)}
.foot img{width:104px;margin-top:3px}
.foot__legal{display:flex;flex-wrap:wrap;gap:8px 48px}
.foot__links{display:flex;gap:24px;flex-wrap:wrap}
.foot a{color:var(--on-screen)}

/* ---------- floating chat (mobile) ---------- */
.wa-float{--behind:transparent;position:fixed;right:16px;bottom:16px;z-index:45;display:none;width:56px;height:56px;place-items:center;
  background:linear-gradient(135deg,#7A1A21 0%,#64121A 50%,#4C0A10 50.2%,#3E070C 100%);
  filter:drop-shadow(0 6px 10px rgba(43,30,20,.35))}
.wa-float svg{width:28px;height:28px;fill:#F6F0E8}

/* ---------- player ---------- */
.player{width:min(1200px,94vw);max-width:none;padding:0;border:0;background:transparent;color:var(--on-screen)}
.player::backdrop{background:rgba(20,17,15,.92)}
.player__bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:0 0 12px}
.player__bar p{font:400 22px/1.2 var(--serif)}
.player__close{background:none;border:1px solid #5E554C;color:var(--on-screen);padding:9px 16px;min-height:42px;font:500 14px var(--sans);cursor:pointer}
.player__close:hover{border-color:var(--on-screen)}
.player__close:focus-visible{outline-color:var(--on-screen)}
.player__frame{aspect-ratio:16/9;background:#000;box-shadow:0 30px 60px -20px rgba(0,0,0,.8)}
.player__frame iframe{width:100%;height:100%;border:0;display:block}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .hero__body{grid-template-columns:1fr;align-items:start}
  .why{grid-template-columns:1fr}
  .why__head{position:static;margin-bottom:28px}
  .network__in{grid-template-columns:1fr}
  .network__fan{max-width:560px}
  .om{width:64px}
  .places__head{grid-template-columns:1fr}
  .places__list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .place--wide .place__photo{height:auto;aspect-ratio:3.3/1}
  .place--wide .place__stay{width:19%}
  .place--wide-lg{grid-column:auto}
  .place--wide-lg .place__photo{aspect-ratio:3/2}
  .place--wide-lg .place__stay{width:34%}
  .contact__in{grid-template-columns:1fr}
  .work__head{grid-template-columns:1fr}
  .filter{grid-column:1;grid-row:auto;justify-self:start;margin-top:12px}
  .wa-float{display:grid}
  .tc{display:none}
  .foot{grid-template-columns:1fr;padding-bottom:96px}
}
@media (max-width:720px){
  .top{height:68px;gap:14px}
  .top__logo img{height:46px}
  .top__nav{gap:16px;padding-left:14px;font-size:13.5px;overflow-x:auto;scrollbar-width:none;background-size:2px 26px}
  .top__nav::-webkit-scrollbar{display:none}
  .why__list{grid-template-columns:1fr}
  .why__list article:nth-child(even)::before{display:none}
  .why__list article:nth-child(n+2)::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(180deg,rgba(255,253,248,.85) 0 1px,rgba(110,84,58,.13) 1px 2px)}
  .why__list article:nth-child(odd){background:linear-gradient(180deg,rgba(255,253,248,.5),rgba(255,253,248,0))}
  .why__list article:nth-child(even){background:linear-gradient(180deg,rgba(110,84,58,0),rgba(110,84,58,.06))}
  .fan-label,.fan-base{display:none}
  .network__list{display:grid}
  .places__list{grid-template-columns:1fr;gap:64px}
  .place--wide{grid-column:auto}
  .place--wide .place__photo{aspect-ratio:3/2}
  .place--wide .place__stay{width:34%}
  .map-label{font-size:34px;stroke-width:6px}
  .map-label--big{font-size:40px}
  .map-label--small,.map-label--minor{display:none}
  .grid{grid-template-columns:1fr 1fr;gap:30px 16px}
  .card__brand{font-size:14px}
  .card__detail{font-size:13px}
  .hero__aside .actions .btn--primary{width:100%}
}
@media (max-width:360px){ .top__nav{gap:11px;font-size:12.5px;padding-left:11px} .top{gap:11px} .top__logo img{height:40px} }
@media (max-width:380px){ .grid{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}

/* =====================================================================
   Dark variant: black card stock with light paper accents.
   Only switched on for Samsung Internet in dark mode (or with ?theme=dark),
   so the browser shows our design instead of inverting the light one.
   ===================================================================== */
html.theme-dark{color-scheme:dark;
  --paper:#1A1714; --paper-hi:#221E1A; --paper-lo:#14110F;
  --ink:#ECE5DA; --ink-soft:#B9AD9F; --fold-3:#8E8173; --fold-4:#9C8F81;
  --oxblood:#C2646B; --oxblood-hi:#D07A80;
  --screen:#100E0C; --screen-2:#1E1B18;
  --lift-1:0 1px 1px rgba(0,0,0,.4),0 3px 6px -2px rgba(0,0,0,.5);
  --lift-2:0 1px 1px rgba(0,0,0,.4),0 10px 18px -8px rgba(0,0,0,.6),0 26px 48px -26px rgba(0,0,0,.7)}
html.theme-dark body{background:var(--tex) 0 0/512px 512px,var(--paper);background-blend-mode:soft-light,normal}

/* letterpress on black card: the pressed edge catches shadow, not light */
html.theme-dark :is(.hero__claim,.why__head h2,.why__list h3,.network h2,.contact h2,.place h3,.places__text h2){text-shadow:0 -1px 0 rgba(0,0,0,.55)}

/* header */
html.theme-dark .top{background:var(--tex) 0 0/512px 512px,color-mix(in srgb,#221E1A 94%,transparent);
  box-shadow:0 1px 0 rgba(255,245,230,.05) inset,0 1px 1px rgba(0,0,0,.4),0 8px 16px -10px rgba(0,0,0,.7)}
html.theme-dark .top__nav{background-image:linear-gradient(90deg,rgba(0,0,0,.6) 0 1px,rgba(255,245,230,.12) 1px 2px,transparent 2px)}
html.theme-dark .top__nav a{color:var(--ink)}
html.theme-dark .top__nav a.is-current{color:#E59AA0;box-shadow:inset 0 -2px 0 #B5474F}
html.theme-dark .btn--quiet{color:var(--ink);text-decoration-color:var(--fold-4)}

/* the folded hero sheet and the envelope become dark card; their facets keep their light and shade */
html.theme-dark .relief{filter:brightness(.2) sepia(.25)}
html.theme-dark .envelope,html.theme-dark .env-flap{filter:brightness(.21) sepia(.2)}
html.theme-dark .env-flap{filter:brightness(.3) sepia(.2) drop-shadow(0 -6px 10px rgba(0,0,0,.6))}

/* why: a slightly lighter card laid on the black one */
html.theme-dark .sheet-wrap{filter:drop-shadow(0 2px 2px rgba(0,0,0,.45)) drop-shadow(0 22px 26px rgba(0,0,0,.55))}
html.theme-dark .why{background:var(--tex) 0 0/512px 512px,linear-gradient(168deg,#2A2622 0%,#25211D 60%,#221E1A 100%);background-blend-mode:soft-light,normal}
html.theme-dark .why__list article:nth-child(odd){background:linear-gradient(90deg,rgba(255,245,230,.045),rgba(255,245,230,0) 85%)}
html.theme-dark .why__list article:nth-child(even){background:linear-gradient(90deg,rgba(0,0,0,0),rgba(0,0,0,.18))}
html.theme-dark .why__list article:nth-child(4n+3),html.theme-dark .why__list article:nth-child(4n+4){background-color:rgba(0,0,0,.06)}
html.theme-dark .why__list article:nth-child(even)::before{background:linear-gradient(90deg,rgba(0,0,0,.55) 0 1px,rgba(255,245,230,.08) 1px 2px)}
html.theme-dark .why__list article:nth-child(n+3)::after,
html.theme-dark .why__list article:nth-child(n+2)::after{background:linear-gradient(180deg,rgba(255,245,230,.08) 0 1px,rgba(0,0,0,.5) 1px 2px)}

/* locations: the folded map stays a light paper sheet on the black card, so its type stays dark */
html.theme-dark .map-shadow{filter:brightness(0);opacity:.9}
html.theme-dark .map-label{fill:#2B2622;stroke:#EFE8DE}
html.theme-dark .map-label--big{fill:#5A0C11}
html.theme-dark .map-label--small{fill:#5E554C}
html.theme-dark .map-pin.is-active .map-label,html.theme-dark .map-pin:hover .map-label{fill:#5A0C11}
html.theme-dark .place__photo,html.theme-dark .place__stay{border-color:#D9D0C4;box-shadow:0 1px 1px rgba(0,0,0,.4),0 16px 26px -14px rgba(0,0,0,.8)}
html.theme-dark .place b{color:var(--ink)}

/* the fan keeps its light paper pleats */
html.theme-dark .fan-apex circle{fill:#B5474F}
html.theme-dark .fan-base{fill:#E59AA0}

/* work: an even blacker card */
html.theme-dark .work{box-shadow:inset 0 0 0 100vmax rgba(0,0,0,.28)}
html.theme-dark .work-wrap{filter:drop-shadow(0 -2px 2px rgba(0,0,0,.4)) drop-shadow(0 -14px 18px rgba(0,0,0,.5))}

/* contact */
html.theme-dark .status{background:rgba(0,0,0,.25);box-shadow:inset 1px 2px 3px rgba(0,0,0,.6),inset -1px -1px 0 rgba(255,245,230,.07)}
html.theme-dark .ways div{background:linear-gradient(180deg,rgba(0,0,0,.55) 0 1px,rgba(255,245,230,.08) 1px 2px,transparent 2px) top/100% 2px no-repeat}
html.theme-dark .ways a{box-shadow:inset 0 -1px 0 var(--fold-4)}
html.theme-dark .copy{background:linear-gradient(180deg,#3A342E,#2C2723);color:var(--ink);box-shadow:0 1px 1px rgba(0,0,0,.5),0 3px 6px -3px rgba(0,0,0,.6)}

/* corner timecode tag */
html.theme-dark .tc{background:var(--tex) 0 0/512px 512px,linear-gradient(112deg,#2E2925 0%,#2A2622 57%,#221E1B 57.2%,#1E1A17 100%);background-blend-mode:soft-light,normal;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.5)) drop-shadow(0 8px 12px rgba(0,0,0,.6))}
html.theme-dark .tc__row time{color:var(--ink)}
html.theme-dark .tc__row--home .tc__code{color:#E59AA0}

/* footer */
html.theme-dark .foot{background:var(--tex) 0 0/512px 512px,#0F0D0B;background-blend-mode:soft-light,normal}

/* logos for the black card (Chromium and Safari both swap an img through content:url) */
html.theme-dark .hero__logo img{content:url(img/gemz-pictures-logo-depth-on-dark.svg)}
html.theme-dark .top__logo img{content:url(img/gemz-g-mark-on-dark.svg)}
html.theme-dark .filter button[aria-pressed="true"]{color:#2B2622}