/* Tanterra Home, tanterrahome.com. The brand's own system: sand ground, charcoal ink, terracotta accents;
   Cormorant Garamond for display, Inter for text. One light theme on purpose (it is the brand's site), with
   every colour set explicitly. One gutter (--gut) runs down the whole page: the mark in the top bar, the name
   in the hero and every section's left edge share it. */
:root{
  --sand:#F4F0E9; --paper:#FAF7F2; --tile:#EEE8DF; /* --tile: the ground behind a photo while it loads */ --ink:#3D3A3A; --muted:#6B645E; --terra:#A95C3D;
  --olive:#4A5A4F; --stone:#BDBAAE; --mustard:#C18E3A; --rule:rgba(61,58,58,.14);
  --display:"Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --body:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --gut:clamp(26px,6vw,88px);
  --sec:clamp(96px,11vw,168px);
  --bar-h:74px;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--sand)}
body{margin:0;background:var(--sand);color:var(--ink);font-family:var(--body);font-size:16.5px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,video{display:block;max-width:100%}
a{color:inherit}
p{margin:0}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:400;text-wrap:balance}
:focus-visible{outline:2px solid var(--terra);outline-offset:3px}
section[id],main [id]{scroll-margin-top:calc(var(--bar-h) - 1px)}
.skip{position:absolute;left:var(--gut);top:-60px;z-index:100;background:var(--ink);color:var(--sand);padding:10px 14px;font:500 12px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;text-decoration:none}
.skip:focus{top:12px}

/* ---------- top bar ---------- */
.bar{position:fixed;inset:0 0 auto 0;z-index:40;height:var(--bar-h);display:flex;align-items:center;justify-content:space-between;gap:24px;padding-inline:var(--gut);color:var(--ink);background:rgba(244,240,233,0);transition:background-color .5s ease,box-shadow .5s ease,color 2.4s ease-in-out}
.bar.solid,.page .bar{background:rgba(244,240,233,.96);box-shadow:0 1px 0 var(--rule);transition:background-color .5s ease,box-shadow .5s ease,color .5s ease}
@supports (backdrop-filter:blur(8px)){.bar.solid,.page .bar{background:rgba(244,240,233,.88);backdrop-filter:blur(10px)}}
.brand{display:flex;align-items:center;color:inherit;text-decoration:none}  /* the mark matches the words around it (Sam): charcoal, or sand on a dark frame / the footer */
.mark{display:block;height:30px;width:auto;fill:currentColor}
.nav{display:flex;gap:clamp(22px,2.6vw,40px)}
.nav a,.menu-btn{font:500 11px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:inherit;padding:8px 0;position:relative}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .4s ease}
.nav a:hover::after,.nav a[aria-current="true"]::after{transform:scaleX(1)}
.menu-btn{display:none;appearance:none;background:none;border:0;cursor:pointer;padding:12px 0 12px 12px}
/* on a hero frame whose wall is in shadow (the phone afternoon frame), the bar goes light with the hero's words */
.bar.light:not(.solid){color:var(--sand);text-shadow:0 1px 14px rgba(60,40,26,.38)}
@media (max-width:760px){
  :root{--bar-h:66px}
  .nav{display:none}
  .menu-btn{display:block}
  .mark{height:24px}
}
.menu{position:fixed;inset:0;z-index:60;background:var(--sand);padding:0 var(--gut) 40px;display:flex;flex-direction:column;overflow-y:auto}
.menu[hidden]{display:none}
.menu-top{height:var(--bar-h);display:flex;align-items:center;justify-content:space-between}
.menu-close{appearance:none;background:none;border:0;cursor:pointer;font:500 11px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--ink);padding:12px 0 12px 12px}
.menu nav{display:grid;gap:6px;margin-top:clamp(40px,10vh,90px)}
.menu nav a{font:300 clamp(38px,11vw,54px)/1.2 var(--display);text-decoration:none;color:var(--ink);padding-block:4px}
.menu-foot{margin-top:auto;padding-top:40px;font-size:15px;color:var(--muted)}

/* ---------- hero (The photograph) ---------- */
.hero{position:relative}
.stage{position:relative;height:100vh;height:100svh;min-height:560px;max-height:1200px;overflow:hidden;background:var(--sand);container-type:inline-size;touch-action:pan-y}
.wm-stack{font-family:var(--display);font-weight:300;line-height:.92;letter-spacing:.14em;text-transform:uppercase;margin:0;color:inherit}
.wm-stack span{display:block}
.wm-stack span + span{font-weight:300;letter-spacing:.3em;font-size:.56em;margin-top:.32em;padding-left:.04em}
.tagline{font-family:var(--display);font-style:italic;font-weight:400;line-height:1.3}
.lock{display:grid;gap:clamp(14px,2cqi,24px);justify-items:start}
.lock .rule{width:56px;height:1px;background:var(--terra)}
.lock .tagline{font-size:clamp(18px,2.1cqi,27px);max-width:21em;text-wrap:balance}
/* 2 the photograph: full-bleed staged photos, cross-fading */
.ph-frames{position:absolute;inset:0;overflow:hidden}
.ph-frames img,.ph-frames video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 2.4s ease-in-out}
.ph-frames .on{opacity:1}
/* light text for a frame whose wall is in shadow where the words sit (the phone afternoon frame); the colour
   changes with the cross-fade, and a very soft shadow keeps it legible where the light edge crosses the words */
.stage.ph .ph-copy,.stage.ph .h-nav,.stage.ph .h-nav .brand{transition:color 2.4s ease-in-out,text-shadow 2.4s ease-in-out}
.stage.ph-light .ph-copy,.stage.ph-light .h-nav,.stage.ph-light .h-nav .brand,.stage.ph-light .h-nav .menu{color:var(--sand);text-shadow:0 1px 18px rgba(60,40,26,.38)}

.stage.ph-light .ph-copy .rule{background:var(--sand)}
.stage.ph-light .ph-copy .tagline{text-shadow:0 1px 10px rgba(60,40,26,.6),0 0 2px rgba(60,40,26,.35)}
.stage.ph-light .ph-pick{--ring:rgba(244,240,233,.5);--fill:var(--sand);filter:drop-shadow(0 1px 6px rgba(60,40,26,.45))}


/* a fine, light film grain on this hero only (the page-wide noise read as grunge in After hours) */
.stage.ph::after{display:none}
.ph-grain{position:absolute;inset:-40px;z-index:2;pointer-events:none;opacity:.07;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.6 -.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E")}
.ph-grain.live{animation:grain .9s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}17%{transform:translate(-14px,9px)}33%{transform:translate(11px,-17px)}50%{transform:translate(-7px,19px)}67%{transform:translate(18px,4px)}83%{transform:translate(-19px,-11px)}100%{transform:translate(0,0)}}
.ph-copy{position:absolute;z-index:3;left:var(--gut);top:50%;transform:translateY(-54%);color:var(--ink);max-width:44%}
.ph-copy .wm-stack{font-size:clamp(40px,7cqi,104px)}
/* scene names: quiet text buttons under the brand line (always on plain wall); the line under the current one fills over the nine seconds */
/* scene picker: one small circle per scene, no text. The inner dot takes the piece's own tone; the ring around the
   current scene draws itself clockwise over the nine seconds, so visitors can see the scenes change */
.ph-pick{--ring:rgba(61,58,58,.32);--fill:var(--ink);margin-top:clamp(28px,4cqi,48px);display:flex;gap:10px}
.ph-pick button{appearance:none;background:none;border:0;padding:0;width:24px;height:24px;cursor:pointer;position:relative;display:grid;place-items:center}
.ph-pick button::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--dot);opacity:.55;transition:opacity .8s}
.ph-pick button[aria-pressed="true"]::before{opacity:1}
.ph-pick svg{position:absolute;inset:2px;width:20px;height:20px;transform:rotate(-90deg);overflow:visible}
.ph-pick circle{fill:none;stroke-width:1;transition:stroke 2.4s ease-in-out}
.ph-pick .trk{stroke:var(--ring)}
.ph-pick .prg{stroke:var(--fill);stroke-width:1.25;stroke-dasharray:100;stroke-dashoffset:100}
.ph-pick button.on .prg{stroke-dashoffset:0;transition:stroke-dashoffset 9s linear,stroke 2.4s ease-in-out}
.ph-pick button:hover::before{opacity:1}
.ph-pick button:focus-visible{outline:1px solid var(--fill);outline-offset:2px;border-radius:50%}
@container (max-width:700px){.ph-copy{top:96px;transform:none;left:var(--gut);right:var(--gut);max-width:none}.ph-copy .wm-stack{font-size:clamp(34px,12.5cqi,50px)}.ph-copy .tagline{font-size:18px}.ph-pick{margin-top:22px}}
@media (prefers-reduced-motion:reduce){.ph-pick button.on .prg{transition:none}}

/* the films carry a 3-4px black edge from the video model (top and bottom on the desktop films, the
   sides on the phone films), visible as dark lines at the hero's edges; a 1.5% zoom hides it. */
.ph-frames video{transform:scale(1.015)}

/* ---------- shared section type ---------- */
.sec{padding:var(--sec) var(--gut)}
.eyebrow{font:500 11px/1.4 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:14px}
.eyebrow::before{content:"";width:32px;height:1px;background:var(--terra);flex:none}
.sec h2{font-weight:300;font-size:clamp(38px,4.6vw,64px);line-height:1.06;letter-spacing:-.005em;margin-top:22px}
.sec-head{max-width:46rem}
.link{display:inline-block;font:500 11px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--ink);border-bottom:1px solid var(--terra);padding-bottom:7px}
.link:hover{color:var(--terra)}

/* ---------- our story ---------- */
/* Lola large: her photo runs off the left edge of the screen, the words keep the page gutter */
.story{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,5fr);gap:clamp(40px,6vw,112px);align-items:center;padding-left:0}
.story-photo{margin:0}
.story-photo figcaption{margin-top:12px;padding-left:var(--gut);font:500 10.5px/1 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
/* the parallax frame: the room underneath, Lola on top. Both grow from the bottom edge, Lola a little faster as the
   section scrolls past (site.js), so she seems to come forward. She only ever grows relative to the room, so the patch
   painted in behind her never shows. Without motion the two layers line up into the original photo. */
.plx{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--tile)}
.plx img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform-origin:50% 100%;will-change:transform}
@media (max-width:900px){.story{grid-template-columns:1fr;padding-right:0}.story-photo{order:2}.story-text{padding-right:var(--gut);padding-left:var(--gut)}}
.prose{margin-top:30px;display:grid;gap:20px;max-width:30rem}
.prose p{font:400 clamp(20px,1.65vw,23px)/1.55 var(--display)}


/* ---------- what we make: words, then three atmosphere photos ---------- */
.range{background:var(--paper)}
.range-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px);row-gap:clamp(40px,5vw,72px);align-items:start}
.range-text{grid-column:1 / span 6;grid-row:1}
.range-lede{margin-top:28px;font:400 clamp(20px,1.65vw,23px)/1.55 var(--display);max-width:32rem}
.kinds{list-style:none;margin:34px 0 0;padding:0;max-width:30rem;border-top:1px solid var(--rule)}
.kinds li{padding:13px 0;border-bottom:1px solid var(--rule);font:500 11px/1.4 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.range figure{margin:0;overflow:hidden;background:var(--tile)}
.range figure img{width:100%;height:100%;object-fit:cover}  /* colour: graded at build time (build.py grade) */
.mood-a{grid-column:8 / span 5;grid-row:1;aspect-ratio:4/5;margin-top:clamp(24px,4vw,64px)!important}
.mood-a img{object-position:50% 60%}
.mood-b{grid-column:1 / span 7;grid-row:2;aspect-ratio:3/2}
.mood-c{grid-column:9 / span 4;grid-row:2;align-self:end;aspect-ratio:4/3}
@media (max-width:860px){
  .range-text,.mood-a,.mood-b,.mood-c{grid-column:1 / -1;grid-row:auto;margin-top:0!important}
  .mood-a{grid-column:1 / span 10}
  .mood-c{grid-column:4 / -1}
}

/* ---------- two ways to work with us ---------- */
.ways-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(48px,6vw,104px);margin-top:clamp(48px,5vw,72px);border-top:1px solid var(--rule);padding-top:clamp(36px,4vw,56px)}
.way{display:grid;align-content:start;justify-items:start;gap:0}
.way-k{font:400 clamp(28px,2.6vw,36px)/1.15 var(--display)}
.way-copy{margin:18px 0 28px;max-width:30rem;font:400 clamp(20px,1.65vw,23px)/1.55 var(--display)}
@media (max-width:760px){.ways-grid{grid-template-columns:1fr}}

/* ---------- contact and the list ---------- */
.contact{background:var(--paper)}
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(48px,7vw,120px);align-items:start}
.ways-list{margin:36px 0 0;display:grid;gap:0;max-width:30rem}
.ways-list div{display:grid;grid-template-columns:8.5rem minmax(0,1fr);gap:16px;padding:18px 0;border-top:1px solid var(--rule)}
.ways-list div:last-child{border-bottom:1px solid var(--rule)}
.ways-list dt{font:500 10.5px/2.1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.ways-list dd{margin:0;font:400 21px/1.4 var(--display);overflow-wrap:anywhere}
.ways-list a{text-decoration:none;border-bottom:1px solid rgba(169,92,61,.45)}
.ways-list a:hover{color:var(--terra)}
.signup{background:var(--sand);padding:clamp(28px,4vw,52px)}
.signup h3{font-size:clamp(30px,2.8vw,40px);font-weight:300;line-height:1.1}
.signup > p{margin-top:12px}
.fillout{margin:20px -8px 6px;width:calc(100% + 16px);height:500px}  /* the Fillout form; 500px to start, as on the old password page, then it sizes itself */
.form-note{font-size:13.5px;color:var(--muted)}
.form-note a{text-underline-offset:3px}
@media (max-width:860px){.contact-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:520px){.ways-list div{grid-template-columns:1fr;gap:4px}}

/* ---------- privacy policy and not-found: their own pages (/privacy, 404) ---------- */
.privacy-page{padding:calc(var(--bar-h) + clamp(40px,6vw,88px)) var(--gut) clamp(80px,9vw,128px);background:var(--paper);min-height:80vh}
.priv{max-width:44rem}
.priv .back{display:inline-block;margin-bottom:clamp(32px,4vw,48px);font:500 11px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--muted)}
.priv .back::before{content:"\2190\00a0\00a0"}
.priv .back:hover{color:var(--terra)}
.priv h1{font-weight:300;font-size:clamp(34px,3.6vw,48px);line-height:1.08;margin-top:20px}
.priv-item{margin-top:28px;padding-top:24px;border-top:1px solid var(--rule)}
.priv-item p{font-size:15.5px;line-height:1.75}
.priv-item a{text-underline-offset:3px}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:var(--sand);padding:clamp(64px,7vw,96px) var(--gut) 36px}
.foot a{color:var(--sand);text-decoration:none}
.foot a:hover{color:#E4C9B8}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);gap:40px 48px;align-items:start}
.foot .mark{height:34px}
.foot-name{margin-top:22px;font:400 20px/1 var(--display);letter-spacing:.34em;text-transform:uppercase}
.foot-name span{font-weight:300}
.foot .tagline{margin-top:12px;font-size:19px;color:rgba(244,240,233,.78);max-width:20em}
.foot-nav,.foot-contact{display:grid;gap:12px;font:500 11px/1.6 var(--body);letter-spacing:.16em;text-transform:uppercase}
.foot-contact{text-transform:none;letter-spacing:.02em;font-size:14.5px;font-weight:400}
.foot-small{margin-top:clamp(56px,6vw,80px);padding-top:22px;border-top:1px solid rgba(244,240,233,.16);font-size:12.5px;color:rgba(244,240,233,.62);display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px}
.foot-small a{color:rgba(244,240,233,.62);text-decoration:underline;text-underline-offset:3px}
@media (max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}}

/* ---------- the hero's fine grain, on every photo below it (Sam, 16 Oct; static here, not animated) ---------- */
.grain{position:relative}
.grain::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.08;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.6 -.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E")}

/* ---------- arrival: photos and text fade up slowly as they come into view (site.js adds .in) ---------- */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity 1.6s ease,transform 1.8s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;transform:none}
.js figure.reveal img{transform:scale(1.06);transition:transform 2.6s cubic-bezier(.2,.7,.2,1)}
.js figure.reveal.in img{transform:none}
.js .story-photo.reveal img{transform:none;transition:none}  /* Lola's layers are moved by the parallax instead */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal,.js figure.reveal img{opacity:1;transform:none;transition:none}
  .nav a::after,.bar{transition:none}
}