/* Founder story (shown at the blog post linked in Studio → Founder story). Laid out from Jubin's sketch:
   title band → portrait + "The pull of home" → "It began with tea" + Elixir photo → wide Nativehill photo
   → "Why I started Travella" + Kohora photo → team + jeep photos → two stories → closing chapter → ventures → invitation.
   The title band is the page's .page-intro, so curtain.js slides the rest of the story over it like other pages. */
:root{--fs-teal:#275352;--fs-gold:#e6cf95;--fs-tint:#e9eddf;--fs-paper:#f7f3ea;--fs-white:#fffdf8;--fs-ink:#2c3b30;--fs-muted:#5d685e;--fs-line:#d5d9cc;
 --fs-serif:Marcellus,Georgia,'Times New Roman',serif;--fs-story:Fraunces,Georgia,'Times New Roman',serif;
 --fs-gl:max(22px,env(safe-area-inset-left,0px));--fs-gr:max(22px,env(safe-area-inset-right,0px))}

.fs-wrap{max-width:1180px;margin:0 auto;padding-left:var(--fs-gl);padding-right:var(--fs-gr);min-width:0}
.fs-eyebrow{margin:0;font:600 12px/1.6 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--green)}
.fs-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fs-intro h1,.fs-ch h2,.fs-cta h2{font-family:var(--display);font-weight:500;letter-spacing:-.02em;line-height:1.05;margin:0;text-wrap:balance;overflow-wrap:break-word}

/* Reading progress */
.fs-progress{position:fixed;inset:0 0 auto;height:3px;z-index:70;pointer-events:none}
.fs-progress>span{display:block;height:100%;background:var(--orange);transform-origin:left;transform:scaleX(var(--fs-read,0))}

/* Title band */
/* The title band fills the first screen below the header on every device, so the paper sheet's rounded
   top edge waits just below the fold and only appears once the reader scrolls. The extra corner radius
   matches the sheet's tuck-up (curtain.css); 100vh is the fallback where svh is unsupported. */
/* --fs-room is the screen left for the band when the page opens: below the header (and any announcement)
   and above the phone's bottom bar. Spacing and the heading scale down only on short screens, so the
   whole band — down to the author line — is visible on first load on every device. The text is centred
   in that visible room; the bottom padding also covers the sheet's tuck and the phone bar. */
.page-intro.fs-intro{--fs-tuck:clamp(24px,3.5vw,56px);
 --fs-room:calc(100vh - var(--nav-height,88px) - var(--dock-height,0px));--fs-room:calc(100svh - var(--nav-height,88px) - var(--dock-height,0px));
 padding:clamp(14px,calc(var(--fs-room)*.07),96px) 0 calc(clamp(14px,calc(var(--fs-room)*.06),72px) + var(--fs-tuck) + var(--dock-height,0px));
 background:var(--sage);color:var(--forest);display:flex;flex-direction:column;justify-content:center;box-sizing:border-box;
 min-height:calc(100vh - var(--nav-height,88px) + var(--fs-tuck));min-height:calc(100svh - var(--nav-height,88px) + var(--fs-tuck))}
.page-intro.fs-intro>.fs-wrap{width:100%}
@media (max-width:600px){.page-intro.fs-intro{--fs-tuck:28px}}
/* Without the curtain (reduced motion) there is no tuck-up, and the band keeps its natural height. */
@media (prefers-reduced-motion:reduce){.page-intro.fs-intro{min-height:0;padding-bottom:clamp(14px,calc(var(--fs-room)*.06),72px)}}
html.reduce-motion .page-intro.fs-intro{min-height:0;padding-bottom:clamp(14px,calc(var(--fs-room)*.06),72px)}
.fs-intro .fs-wrap{display:flex;flex-direction:column;gap:clamp(8px,calc(var(--fs-room)*.026),20px)}
.fs-intro .fs-back{align-self:flex-start;font-size:13px;line-height:1.4;color:var(--forest);text-decoration:none;opacity:.8}
.fs-intro .fs-back:hover{opacity:1;text-decoration:underline}
.page-intro.fs-intro h1{font-size:clamp(26px,min(max(6.4vw,34px),calc(var(--fs-room)*.088)),84px);max-width:16ch;margin:0;color:var(--forest)}
/* Phones: the heading follows the visible height, so the author line still fits above the bottom bar. */
@media (max-width:600px){.page-intro.fs-intro h1{font-size:clamp(24px,calc(var(--fs-room)*.068),36px);max-width:none}}
/* Short phones (an iPhone with Safari's bars showing, iPhone SE): a tighter title band. The "← Blog" link is
   dropped here only; Blog stays in the menu and footer. */
@media (max-width:600px) and (max-height:760px){
 .fs-intro .fs-back{display:none}
 .fs-intro .fs-eyebrow{font-size:11px;letter-spacing:.12em}
 .fs-dek{line-height:1.42}
 .fs-byline{font-size:14px}
 .fs-byline b{font-size:15px}
 .fs-av{width:42px;height:42px;font-size:17px}
}
@media (max-width:360px){.fs-dek{font-size:14px}.fs-route{font-size:12px}}
.fs-intro h1 em{font-style:normal;color:var(--fs-teal)}
.fs-dek{margin:0;font-size:clamp(15px,min(max(2vw,16px),calc(var(--fs-room)*.033)),23px);line-height:1.5;max-width:46ch;color:var(--forest)}
.fs-route{display:flex;align-items:center;gap:12px;margin:0;font:600 13px/1.4 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--forest)}
.fs-route svg{width:120px;height:14px;flex:none}
.fs-byline{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;border-top:1px solid #1b2a1e4d;padding-top:clamp(10px,calc(var(--fs-room,600px)*.026),18px);margin-top:clamp(0px,calc(var(--fs-room,600px)*.01),8px);font-size:15px;line-height:1.45}
.fs-av{width:48px;height:48px;border-radius:50%;background:var(--fs-teal);color:var(--fs-gold);display:grid;place-items:center;font:400 19px var(--fs-serif);flex:none}
.fs-byline>div{flex:1 1 150px;min-width:0}
.fs-byline b{display:block;font-size:16px}
.fs-read{font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.fs-preview-note{margin:0;padding:12px 16px;border:1px dashed var(--forest);background:#fcf9f2b3;font-size:14px;line-height:1.5}
.fs-preview-note a{text-decoration:underline}

/* Chapters */
.fs-ch{padding-block:clamp(64px,8vw,104px)}
.fs-sec-home+.fs-sec-tea{padding-top:0}
.fs-num{display:block;font:400 clamp(52px,6vw,76px)/1 var(--fs-serif);color:transparent;-webkit-text-stroke:1.2px var(--sand)}
@supports not (-webkit-text-stroke:1px black){.fs-num{color:var(--sand)}}
.fs-ch h2{font-size:clamp(32px,4.2vw,52px);color:inherit}
.fs-prose{display:flex;flex-direction:column;gap:18px;max-width:60ch;color:var(--fs-ink);font-size:18px;line-height:1.7}
.fs-prose p{margin:0}
.fs-lede::first-letter{float:left;font:400 84px/.8 var(--fs-serif);color:var(--fs-teal);margin:8px 12px 0 0}
.fs-pull{font-family:var(--fs-story);font-style:italic;font-size:clamp(23px,2.8vw,34px);line-height:1.35;color:var(--fs-teal);border-left:4px solid var(--orange);padding-left:20px;max-width:30ch}
.fs-text{display:flex;flex-direction:column;gap:20px;min-width:0}
/* Links written into the story text, captions, tags and lists */
.fs-link{color:var(--fs-teal);font-weight:500;text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:2px;text-underline-offset:3px;overflow-wrap:anywhere;transition:color .2s,text-decoration-color .2s}
.fs-link:hover,.fs-link:focus-visible{color:var(--forest);text-decoration-color:var(--fs-teal)}
.fs-close .fs-link{color:var(--fs-gold);text-decoration-color:var(--orange)}
.fs-close .fs-link:hover,.fs-close .fs-link:focus-visible{color:var(--cream)}
.fs-chips .fs-link{color:inherit;font-weight:inherit;text-decoration-thickness:1.5px}
.fs-photo-link{display:block;overflow:hidden}
.fs-photo-link img{transition:transform .5s cubic-bezier(.22,1,.36,1)}
.fs-photo-link:hover img,.fs-photo-link:focus-visible img{transform:scale(1.03)}
.fs-tilt .fs-photo-link{overflow:visible}
.fs-tilt .fs-photo-link:hover img,.fs-tilt .fs-photo-link:focus-visible img{transform:rotate(1.5deg) scale(1.03)}

/* Photos */
.fs-figure{margin:0;display:flex;flex-direction:column;gap:10px;min-width:0}
.fs-figure img,.fs-slot{display:block;width:100%;height:auto;aspect-ratio:var(--fs-ratio,4/3);object-fit:cover;object-position:var(--fs-focus,50% 50%);background:var(--fs-tint)}
.fs-figure figcaption{font-size:14px;line-height:1.5;color:var(--fs-muted)}
.fs-slot{background:repeating-linear-gradient(135deg,var(--fs-tint) 0 14px,#e2e7d6 14px 28px);border:1px dashed #b7bfa8;color:var(--green);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-align:center;font-size:14px;padding:14px}
.fs-slot b{font-size:11px;letter-spacing:.16em;text-transform:uppercase}

/* 01 portrait + the pull of home */
/* The text sits level with the portrait: centred beside it, never starting below the photo's middle. */
.fs-home{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,72px);align-items:center}
.fs-home .fs-figure{--fs-ratio:4/5;--fs-focus:50% 25%}
.fs-home.is-text,.fs-tea.is-text,.fs-native.is-text{grid-template-columns:minmax(0,1fr)}

/* 02 tea + Nativehill */
.fs-tea{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(28px,5vw,72px);align-items:start}
.fs-tea .fs-figure{margin-top:clamp(0px,6vw,90px);--fs-ratio:1/1}
.fs-tilt img,.fs-tilt .fs-slot{transform:rotate(1.5deg)}
.fs-native{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr);gap:clamp(28px,5vw,64px);align-items:center;margin-top:clamp(48px,7vw,96px)}
.fs-native>*{min-width:0}
.fs-native .fs-figure{--fs-ratio:16/9}
.fs-chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0}
.fs-chips li{border:1.5px solid var(--forest);border-radius:999px;padding:4px 14px;font-size:15px;font-weight:500;line-height:1.5}

/* 03 why I started Travella */
.fs-why{background:var(--fs-paper)}
.fs-center{display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px}
.fs-center .fs-prose{text-align:left;margin:0 auto}
.fs-why .fs-figure{width:min(760px,100%);margin:clamp(24px,4vw,40px) auto 0;--fs-ratio:3/2}
.fs-why figcaption{text-align:center}

/* team + jeep photos, then the two stories */
.fs-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,56px);align-items:start}
.fs-pair .fs-figure{--fs-ratio:4/3}
.fs-pair .fs-jeep{margin-top:clamp(0px,8vw,120px)}
.fs-pair.is-single{grid-template-columns:minmax(0,1fr);width:min(760px,100%);margin-inline:auto}
.fs-pair.is-single .fs-jeep{margin-top:0}
.fs-stories{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,5vw,72px);margin-top:clamp(40px,5vw,64px)}
.fs-stories.is-flush{margin-top:0}
.fs-stories.is-single{grid-template-columns:minmax(0,1fr);max-width:760px;margin-inline:auto}
.fs-stories>article{display:flex;flex-direction:column;gap:18px;min-width:0}
.fs-people{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column}
.fs-people li{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--fs-line);padding:10px 0;font-size:16px;line-height:1.5}
.fs-people li span:last-child{color:var(--fs-muted);text-align:right}

/* 06 closing chapter */
.fs-close{background:var(--forest);color:var(--cream)}
.fs-close .fs-eyebrow{color:var(--fs-gold)}
.fs-close .fs-prose{color:#dfe5d6}
.fs-close .fs-num{-webkit-text-stroke-color:var(--fs-gold)}
@supports not (-webkit-text-stroke:1px black){.fs-close .fs-num{color:var(--fs-gold)}}
.fs-sign{margin:10px 0 0;font:italic 400 clamp(25px,3vw,34px)/1.3 var(--fs-story);color:var(--fs-gold)}
.fs-sign small{display:block;margin-top:4px;font:500 15px/1.5 var(--body);font-style:normal;color:#cdd5c3;letter-spacing:.04em}

/* ventures */
.fs-marks{padding-block:clamp(56px,7vw,88px)}
.fs-mark-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:28px}
.fs-mark-row.is-1{grid-template-columns:minmax(0,420px)}
.fs-mark-row.is-2,.fs-mark-row.is-4{grid-template-columns:repeat(2,minmax(0,1fr))}
.fs-mark{border:1px solid var(--fs-line);background:var(--fs-white);padding:26px 22px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;min-width:0;color:var(--forest);text-decoration:none;transition:border-color .2s,transform .25s cubic-bezier(.22,1,.36,1)}
a.fs-mark:hover{border-color:var(--forest);transform:translateY(-2px)}
.fs-mark>div{min-width:0}
.fs-mark b{display:block;font:500 22px/1.25 var(--display)}
.fs-mark span:not(.fs-logo){display:block;margin-top:4px;font-size:15px;line-height:1.5;color:var(--fs-muted)}
.fs-logo{width:88px;height:88px;flex:none;display:grid;place-items:center;border:1.5px dashed #b7bfa8;font:400 40px var(--fs-serif);color:var(--fs-teal);background:var(--fs-tint);overflow:hidden}
.fs-logo.is-filled{border:0;background:var(--fs-teal);color:var(--fs-gold)}
.fs-logo.has-image{border:0;background:var(--fs-white)}
.fs-logo.has-image img{width:100%;height:100%;object-fit:contain}

/* invitation */
.fs-cta{background:var(--sage);padding-block:56px}
.fs-cta .fs-wrap{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-end;justify-content:space-between}
.fs-cta h2{font-size:clamp(38px,6vw,76px);max-width:13ch;color:var(--forest)}
.fs-cta-side{display:flex;flex-direction:column;align-items:flex-start;gap:12px;min-width:0}
.fs-btn{display:inline-flex;align-items:center;gap:14px;min-height:52px;padding:0 8px 0 24px;border-radius:999px;background:var(--orange);color:var(--forest);font:600 16px var(--body);text-decoration:none;box-shadow:0 10px 24px #e6a15c59;transition:transform .25s cubic-bezier(.22,1,.36,1),background .2s}
.fs-btn:hover{transform:translateY(-2px);background:#f0b97f}
.fs-btn i{width:36px;height:36px;border-radius:50%;background:var(--forest);color:var(--cream);display:grid;place-items:center;font-style:normal}
.fs-phone{font:500 24px/1.3 var(--display);color:var(--forest);text-decoration:none}
.fs-contact{font-size:14px;line-height:1.5;overflow-wrap:anywhere}
.fs-contact a{text-decoration:underline}

/* Tablets and phones: one column, as sketched */
@media (max-width:900px){
 .fs-home,.fs-tea,.fs-native,.fs-stories{grid-template-columns:minmax(0,1fr)}
 .fs-tea .fs-figure,.fs-pair .fs-jeep{padding-top:0;margin-top:0}
 .fs-home .fs-figure{max-width:440px}
 .fs-tea .fs-figure{max-width:440px}
 .fs-native{margin-top:clamp(40px,7vw,64px)}
 .fs-mark-row,.fs-mark-row.is-2,.fs-mark-row.is-4{grid-template-columns:minmax(0,1fr)}
 .fs-mark{flex-direction:row;text-align:left;align-items:center}
 .fs-logo{width:64px;height:64px;font-size:30px}
}
/* Phones: the team and jeep photos stay side by side, smaller */
@media (max-width:560px){
 .fs-prose{font-size:17px}
 .fs-pair{gap:12px}
 .fs-pair .fs-figure figcaption{font-size:13px}
 .fs-lede::first-letter{font-size:66px}
 .fs-route svg{width:84px}
 .fs-cta .fs-wrap{align-items:flex-start}
 .fs-people li{font-size:15px}
}
@media (max-width:360px){
 .fs-pair{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){.fs-btn,.fs-mark,.fs-link,.fs-photo-link img{transition:none}.fs-photo-link:hover img{transform:none}.fs-progress{display:none}}
html.reduce-motion .fs-progress{display:none}
@media print{.fs-progress{display:none}}

/* ---- Uniform site look -------------------------------------------------------------------------------------------
   The founder story wears the same colours and type as the rest of the site: forest and orange instead of its own teal
   and gold, the site's display face instead of two extra serif fonts, the ✳ labels, and framed photos and cards with
   the hard forest offset shadow. Colour, type and decoration only: every size, space and position above is unchanged. */
:root{--fs-teal:var(--forest);--fs-gold:var(--orange);--fs-serif:var(--display);--fs-story:var(--display)}
.fs-eyebrow::before{content:"\2733";margin-right:8px;color:var(--orange);letter-spacing:0}
.fs-intro h1 em{color:var(--forest);background:linear-gradient(transparent 62%,#e6a15c73 62%);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.fs-av{background:var(--forest);color:var(--cream);font-weight:600;box-shadow:0 0 0 2px var(--sage),0 0 0 3px var(--orange)}
.fs-num{font-weight:700;-webkit-text-stroke-color:var(--orange)}
@supports not (-webkit-text-stroke:1px black){.fs-num{color:var(--orange)}}
.fs-close .fs-num{-webkit-text-stroke-color:var(--orange)}
.fs-lede::first-letter{font-weight:700;color:var(--forest)}
.fs-pull{font-style:normal;font-weight:500;letter-spacing:-.01em;color:var(--forest)}
.fs-pull::before{content:"\2733";display:block;margin-bottom:6px;font-size:18px;color:var(--orange)}
.fs-sign{font-style:normal;font-weight:500;color:var(--orange)}
.fs-figure img,.fs-slot{border:1px solid var(--forest);box-shadow:6px 6px 0 var(--forest)}
.fs-chips li{background:#fffdf8;box-shadow:2px 2px 0 var(--forest)}
.fs-mark{border:1px solid var(--forest);border-radius:4px;background:linear-gradient(165deg,#fffdf8 0%,#fbf6ec 60%,#f3e8d6 100%);box-shadow:6px 6px 0 var(--forest);transition:translate .3s cubic-bezier(.22,1,.36,1),box-shadow .3s cubic-bezier(.22,1,.36,1)}
a.fs-mark:hover{transform:none;translate:-3px -3px;box-shadow:9px 9px 0 var(--orange)}
.fs-logo{border-color:var(--forest);color:var(--forest);font-weight:600}
.fs-logo.is-filled{background:var(--forest);color:var(--orange)}
.fs-btn{border:1px solid var(--forest);border-radius:2px;box-shadow:5px 5px 0 var(--forest);transition:translate .25s cubic-bezier(.22,1,.36,1),box-shadow .25s cubic-bezier(.22,1,.36,1),background .2s}
.fs-btn:hover{transform:none;translate:-2px -2px;box-shadow:7px 7px 0 var(--forest);background:#f0b97f}
.fs-btn i{border-radius:2px}
@media (prefers-reduced-motion:reduce){.fs-mark,.fs-btn{transition:none}}
html.reduce-motion .fs-mark,html.reduce-motion .fs-btn{transition:none}