/* ==========================================================================
   Gale Howell — personal page
   Palette sampled from the photographs. Self-hosted type.
   No external requests anywhere in this file (fonts are local, the grain is
   an inline data: URI, everything else is plain CSS).
   ========================================================================== */

/* ---------- self-hosted fonts ------------------------------------------- */

@font-face{
  font-family:'Fraunces';
  font-style:normal; font-weight:300 700; font-display:swap;
  src:url('../fonts/fraunces-latin.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:'Fraunces';
  font-style:normal; font-weight:300 700; font-display:swap;
  src:url('../fonts/fraunces-latin-ext.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:'Source Sans 3';
  font-style:normal; font-weight:300 700; font-display:swap;
  src:url('../fonts/source-sans-3-latin.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:'Source Sans 3';
  font-style:normal; font-weight:300 700; font-display:swap;
  src:url('../fonts/source-sans-3-latin-ext.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;
}

/* ---------- tokens ------------------------------------------------------- */

:root{
  --bone:#faf7f2;
  --cream:#f3ece1;
  --ink:#2e2a26;
  --ink-soft:#635b51;
  --sage:#8fa89b;
  --sage-deep:#55705f;
  --sage-deeper:#425a4c;
  --blush:#cf9c8e;
  --blush-pale:#f0ded7;
  --line:#e3dad0;

  --display:'Fraunces','Iowan Old Style',Georgia,serif;
  --sans:'Source Sans 3',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,
         Helvetica,Arial,sans-serif;

  --gut:clamp(1.25rem,5vw,4.5rem);
  --stack:clamp(4.5rem,12vw,10rem);
  --wrap:82rem;
  --r:10px;
  --ease:cubic-bezier(.22,.7,.28,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bone);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(1.0625rem,.98rem + .38vw,1.1875rem);
  font-weight:380;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; }
::selection{ background:var(--blush-pale); color:var(--ink); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:400;
  background:var(--ink); color:var(--bone);
  padding:.8rem 1.4rem; border-radius:0 0 var(--r) 0;
}
.skip:focus{ left:0; }

:focus-visible{ outline:2.5px solid var(--sage-deep); outline-offset:3px; }

.wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }

/* ---------- ambient background (CSS only, no network) -------------------- */

.ambient{
  position:fixed; inset:-20vmax; z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(38vmax 38vmax at 18% 22%, rgba(143,168,155,.20), transparent 62%),
    radial-gradient(32vmax 32vmax at 82% 68%, rgba(207,156,142,.17), transparent 64%),
    radial-gradient(30vmax 30vmax at 60% 12%, rgba(143,168,155,.11), transparent 66%);
  animation:drift 46s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes drift{
  from{ transform:translate3d(-2.2%,-1.4%,0) scale(1); }
  to  { transform:translate3d(2.2%,1.8%,0)  scale(1.06); }
}

/* fine static grain — inline SVG turbulence, no request */
.grain{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- scroll progress hairline ------------------------------------- */

.progress{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:300;
  transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(to right,var(--sage),var(--sage-deep));
  pointer-events:none;
}

/* ---------- reveal ------------------------------------------------------- */

.js .reveal{
  opacity:0; transform:translateY(20px);
  transition:opacity .85s var(--ease), transform .85s var(--ease);
}
.js .reveal.is-in{ opacity:1; transform:none; }
.js .reveal--d1{ transition-delay:.09s; }
.js .reveal--d2{ transition-delay:.18s; }

/* ---------- hero --------------------------------------------------------- */

.hero{
  position:relative; width:100%;
  min-height:78svh;
  display:flex; align-items:flex-end;
  overflow:hidden; isolation:isolate;
  background:var(--cream);
}

.hero__media{ position:absolute; inset:-6% 0 -6% 0; z-index:0; will-change:transform; }

.hero__media img{
  width:100%; height:100%;
  object-fit:cover; object-position:50% 34%;
  animation:heroSettle .95s var(--ease-out) both;
}
@keyframes heroSettle{ from{ transform:scale(1.06); } to{ transform:scale(1); } }

.hero::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top, rgba(28,25,22,.76) 0%, rgba(28,25,22,.38) 26%,
             rgba(28,25,22,.06) 52%, rgba(28,25,22,0) 72%);
}

.hero__title{ position:relative; z-index:2; width:100%;
  padding-block:clamp(2.5rem,7vw,5.5rem); }

.hero h1{
  margin:0;
  font-family:var(--display); font-weight:600;
  font-size:clamp(3.1rem,13.5vw,10.5rem);
  line-height:.87; letter-spacing:-.022em;
  color:#fdfbf7; text-wrap:balance;
  animation:opsz 1.15s var(--ease-out) both;
}
/* Fraunces settles from a small optical size to a large one */
@keyframes opsz{
  from{ font-variation-settings:'opsz' 9,'SOFT' 60,'WONK' 1; }
  to  { font-variation-settings:'opsz' 144,'SOFT' 24,'WONK' 1; }
}

/* per-WORD clip rise */
.w{ display:block; overflow:hidden; padding-bottom:.04em; }
.w > span{ display:inline-block; animation:wordRise .92s var(--ease-out) backwards; }
.w:nth-of-type(1) > span{ animation-delay:.06s; }
.w:nth-of-type(2) > span{ animation-delay:.19s; }
@keyframes wordRise{ from{ transform:translateY(106%); } }

.hero__sub{
  margin:clamp(1rem,2.4vw,1.6rem) 0 0; max-width:36ch;
  font-weight:400; font-size:clamp(1rem,.94rem + .3vw,1.2rem);
  line-height:1.5; color:rgba(253,251,247,.92);
  animation:subIn .8s var(--ease-out) .5s backwards;
}
@keyframes subIn{ from{ opacity:0; transform:translateY(12px); } }
.hero__sub::before{
  content:''; display:block; width:2.6rem; height:2px;
  margin-bottom:1.05rem; background:var(--sage); border-radius:2px;
}

/* ---------- section furniture -------------------------------------------- */

.eyebrow{
  margin:0 0 clamp(1.1rem,2.4vw,1.8rem);
  font-size:.72rem; font-weight:600; letter-spacing:.19em;
  text-transform:uppercase; color:var(--sage-deep);
  display:flex; align-items:center; gap:.85rem;
}
.eyebrow::after{
  content:''; flex:1 1 auto; height:1px; max-width:8rem;
  background:var(--line);
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform 1s var(--ease-out) .15s;
}
.js .eyebrow.is-in::after{ transform:scaleX(1); }
html:not(.js) .eyebrow::after{ transform:scaleX(1); }

/* ---------- about -------------------------------------------------------- */

.about{
  position:relative; margin-top:0;
  padding-block:clamp(4rem,10vw,8rem);
  background:
    radial-gradient(120% 90% at 12% 0%, var(--blush-pale) 0%, rgba(240,222,215,0) 58%),
    var(--cream);
}
.about::before{
  content:''; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(to right,transparent,var(--sage),transparent); opacity:.55;
}

.about__lede{
  margin:0; max-width:22ch;
  font-family:var(--display); font-weight:400;
  font-variation-settings:'opsz' 60,'SOFT' 30,'WONK' 0;
  font-size:clamp(1.7rem,1.25rem + 2.2vw,3rem);
  line-height:1.2; letter-spacing:-.012em; text-wrap:pretty;
}
.about__body{ margin:1.5em 0 0; max-width:58ch; color:var(--ink-soft); }
.about__body p{ margin:0 0 1.1em; }
.about__body p:last-child{ margin-bottom:0; }

/* ---------- gallery ------------------------------------------------------ */

.gallery{ padding-block:clamp(4.5rem,11vw,9rem) 0; }

.grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:1fr;
  gap:clamp(1.1rem,3.4vw,2.6rem);
}

.shot{
  display:block; position:relative; overflow:hidden;
  border-radius:var(--r); background:var(--cream); text-decoration:none;
  box-shadow:0 1px 2px rgba(46,42,38,.05), 0 10px 30px -18px rgba(46,42,38,.3);
  -webkit-tap-highlight-color:transparent;
}
.shot--45{ aspect-ratio:4/5; }
.shot--11{ aspect-ratio:1/1; }

/* clip-path mask wipe on entry (not a fade) */
.js .shot{ clip-path:inset(0 0 100% 0); transition:clip-path 1.05s var(--ease-out); }
.js .grid__item.is-in .shot{ clip-path:inset(0 0 0 0); }
html:not(.js) .shot{ clip-path:none; }

.shot img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .8s var(--ease);
}

/* warm sage wash */
.shot__wash{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(66,90,76,.55) 0%, rgba(66,90,76,.13) 42%, rgba(66,90,76,0) 68%);
  opacity:0; transition:opacity .45s var(--ease);
}

.shot__cap{
  position:absolute; left:0; right:0; bottom:0;
  margin:0; padding:1rem clamp(1rem,2.2vw,1.5rem) clamp(.9rem,2vw,1.25rem);
  font-family:var(--sans); font-size:.9rem; font-weight:500;
  letter-spacing:.01em; color:#fbf9f5;
  text-shadow:0 1px 12px rgba(30,26,23,.5);
  pointer-events:none;
}

/* Default (mobile-first, and any touch device): wash + caption are simply
   ON. Captions are never hover-only — a narrow window and several touch
   devices still report hover:hover, so width gates this, not hover alone. */
.shot__wash{ opacity:1; }
.shot__cap{ transform:none; opacity:1; }

/* Only on a wide screen WITH a real pointer do they become a hover reveal. */
@media (hover:hover) and (pointer:fine) and (min-width:800px){
  .shot__wash{ opacity:0; }
  .shot__cap{ transform:translateY(105%); opacity:0;
              transition:transform .5s var(--ease), opacity .4s var(--ease); }
  .shot:hover img, .shot:focus-visible img{ transform:scale(1.04); }
  .shot:hover .shot__wash, .shot:focus-visible .shot__wash{ opacity:1; }
  .shot:hover .shot__cap, .shot:focus-visible .shot__cap{ transform:none; opacity:1; }
}

/* ---------- contact / footer --------------------------------------------- */

.foot{
  margin-top:var(--stack);
  padding-block:clamp(3.5rem,8vw,6rem);
  background:
    radial-gradient(100% 120% at 88% 100%, rgba(143,168,155,.24) 0%, rgba(143,168,155,0) 60%),
    var(--cream);
  border-top:1px solid var(--line);
}
.foot__inner{ display:flex; flex-wrap:wrap; align-items:flex-end;
  justify-content:space-between; gap:2rem; }

.foot__say{
  margin:0 0 1.1rem;
  font-family:var(--display); font-weight:400;
  font-variation-settings:'opsz' 48,'SOFT' 30,'WONK' 0;
  font-size:clamp(1.5rem,1.2rem + 1.3vw,2.3rem);
  line-height:1.15; letter-spacing:-.01em;
}

/* the one call to action */
.mailbtn{
  display:inline-flex; align-items:center; gap:.7rem;
  min-height:56px; padding:.85rem 1.65rem;
  border-radius:999px;
  background:var(--sage-deep); color:#fbf9f5;
  font-family:var(--sans); font-size:clamp(1.05rem,1rem + .45vw,1.28rem);
  font-weight:600; letter-spacing:.01em; text-decoration:none;
  box-shadow:0 2px 4px rgba(46,42,38,.08), 0 14px 28px -16px rgba(66,90,76,.75);
  transition:background .28s var(--ease), transform .28s var(--ease),
             box-shadow .28s var(--ease);
}
.mailbtn:hover,.mailbtn:focus-visible{
  background:var(--sage-deeper); transform:translateY(-2px);
  box-shadow:0 3px 6px rgba(46,42,38,.1), 0 20px 34px -16px rgba(66,90,76,.85);
}
.mailbtn:active{ transform:translateY(0); }
.mailbtn svg{ flex:0 0 auto; }

.foot__name{
  margin:0; font-size:.72rem; font-weight:600;
  letter-spacing:.19em; text-transform:uppercase; color:var(--ink-soft);
}

/* ---------- back to top -------------------------------------------------- */

.totop{
  position:fixed; right:clamp(1rem,3vw,2.25rem); bottom:clamp(1rem,3vw,2.25rem);
  z-index:250;
  width:52px; height:52px; border:0; border-radius:50%; cursor:pointer;
  background:rgba(85,112,95,.94); color:#fbf9f5;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px -12px rgba(46,42,38,.7);
  opacity:0; visibility:hidden; transform:translateY(12px) scale(.9);
  transition:opacity .35s var(--ease), transform .35s var(--ease),
             visibility 0s linear .35s, background .25s var(--ease);
}
.totop.is-on{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }
.totop:hover{ background:var(--sage-deeper); }

/* ---------- wide --------------------------------------------------------- */

@media (min-width:800px){
  .hero{ min-height:min(90svh,54rem); }
  .hero__media img{ object-position:14% 40%; }
  .hero h1{ font-size:clamp(4.6rem,9vw,9.5rem); }
  .hero__title{ padding-block:clamp(2.5rem,6vw,4.5rem); }

  .about__inner{
    display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
    gap:clamp(2rem,5vw,5rem); align-items:start;
  }
  .about__body{ margin-top:.4rem; }

  .grid{ grid-template-columns:repeat(12,1fr); gap:clamp(1.5rem,2.6vw,2.75rem);
         align-items:start; }
  .grid__item--a{ grid-column:1 / span 7; }
  .grid__item--b{ grid-column:8 / span 5; margin-top:clamp(3rem,7vw,7rem); }
  .grid__item--c{ grid-column:1 / span 5; margin-top:clamp(1rem,3vw,3rem); }
  .grid__item--d{ grid-column:6 / span 7; margin-top:clamp(-4rem,-5vw,-1rem); }
}

/* ---------- lightbox ----------------------------------------------------- */

.lb{
  position:fixed; inset:0; z-index:500;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:clamp(.85rem,2.6vw,2.5rem);
}
.lb[hidden]{ display:none; }

.lb__scrim{
  position:absolute; inset:0;
  background:rgba(30,26,23,.955);
  opacity:0; transition:opacity .34s var(--ease);
}
.lb.is-open .lb__scrim{ opacity:1; }

.lb__stage{
  position:relative; z-index:1;
  flex:1 1 auto; min-height:0; width:100%;
  display:flex; align-items:center; justify-content:center;
}
.lb__img{
  max-width:100%; max-height:100%; width:auto; height:auto;
  object-fit:contain; border-radius:var(--r);
  transform-origin:top left;
  box-shadow:0 30px 80px -40px rgba(0,0,0,.9);
}

.lb__cap{
  position:relative; z-index:1; flex:0 0 auto;
  margin:clamp(.9rem,2vw,1.4rem) auto 0; max-width:54ch; text-align:center;
  font-size:.9rem; font-weight:350; line-height:1.5; color:rgba(250,247,242,.85);
  opacity:0; transition:opacity .4s var(--ease);
}
.lb__cap.is-on{ opacity:1; }

.lb__btn{
  position:absolute; z-index:2; appearance:none; border:0; cursor:pointer;
  width:3.1rem; height:3.1rem; border-radius:50%;
  background:rgba(250,247,242,.11); color:#faf7f2;
  font-size:1.5rem; line-height:1;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .3s var(--ease) .1s, background .25s var(--ease);
}
.lb.is-open .lb__btn{ opacity:1; }
.lb__btn:hover{ background:rgba(250,247,242,.24); }
.lb__close{ top:clamp(.85rem,2.6vw,2.5rem); right:clamp(.85rem,2.6vw,2.5rem); font-size:1.7rem; }
.lb__prev{ left:clamp(.5rem,2vw,2.5rem);  top:50%; margin-top:-1.55rem; }
.lb__next{ right:clamp(.5rem,2vw,2.5rem); top:50%; margin-top:-1.55rem; }

body.lb-open{ overflow:hidden; }

/* ---------- confetti canvas ---------------------------------------------- */

.confetti{
  position:fixed; inset:0; z-index:600; pointer-events:none;
}
.confetti[hidden]{ display:none; }

/* ---------- reduced motion: collapse everything -------------------------- */

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .ambient{ animation:none; }
  .hero__media img,.hero h1,.hero__sub,.w > span{ animation:none !important; }
  .js .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .js .shot{ clip-path:none !important; transition:none !important; }
  .eyebrow::after{ transform:scaleX(1) !important; transition:none !important; }
  .lb__img{ transition:none !important; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}