/* Find Me — hand-built front page. Palette pulled from her own images. */

:root{
  --cream: #fbf9f5;       /* bleached driftwood — the dominant tone now */
  --cream-deep: #f5f2ec;  /* barely-there separation, never a wash */
  --ink: #2b2822;
  --sage: #93a583;        /* the pop, used sparingly and on purpose */
  --sage-deep: #66765a;
  --line: rgba(43,40,34,0.10);
}
*{box-sizing:border-box;}
@media (prefers-reduced-motion: no-preference){ html{scroll-behavior:smooth;} }
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:-apple-system,'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight:300;
  overflow-x:hidden;
}
h1,h2,h3,.fm-serif{
  font-family:'Iowan Old Style','Palatino Linotype',Palatino,Georgia,'Times New Roman',serif;
  font-weight:400;
  letter-spacing:0.01em;
}
a{color:inherit;text-decoration:none;}
.screen-reader-text{position:absolute;left:-9999px;}
.skip-link:focus{left:1rem;top:1rem;position:absolute;background:#fff;padding:0.6rem 1rem;z-index:100;}

/* header — solid and in normal flow everywhere by default, so no page can
   ever collide with it, whichever plugin renders that page's content.
   Only the home page (with the hero behind it) turns it transparent. */
.fm-header{
  position:relative; z-index:10;
  padding:1.4rem clamp(1.5rem,5vw,4rem);
  background:var(--cream); border-bottom:1px solid var(--line);
}
.fm-header-inner{display:flex; align-items:center; justify-content:space-between;}
.fm-wordmark{
  font-family:'Iowan Old Style','Palatino Linotype',Palatino,Georgia,'Times New Roman',serif;
  font-style:italic; font-size:1.5rem; color:var(--ink);
}
.fm-nav{display:flex; gap:2.4rem; font-size:0.82rem; letter-spacing:0.14em; text-transform:uppercase; list-style:none; margin:0; padding:0;}
.fm-nav a{color:var(--ink); opacity:0.72; transition:opacity .25s;}
.fm-nav a:hover{opacity:1;}

body.home .fm-header{
  position:absolute; top:0; left:0; right:0;
  padding:2.2rem clamp(1.5rem,5vw,4rem) 0;
  background:transparent; border-bottom:none;
}
/* Find Me's own mark already stands, large, in the hero below — the header
   wordmark would be the same name shown a second time in the same breath.
   Her words: "I don't want to find me on there twice now." */
body.home .fm-wordmark{display:none;}
body.home .fm-header-inner{justify-content:flex-end;}
body.home .fm-nav a{color:#fff; text-shadow:0 1px 6px rgba(0,0,0,0.25);}

/* hero */
.fm-hero{
  position:relative; height:100vh; min-height:640px; overflow:hidden;
}
.fm-hero-bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:50% 30%;
  animation:fm-breathe 24s ease-in-out infinite alternate;
}
/* real, felt movement — a slow breathing zoom with a faint drift, never a
   static photograph standing still behind the words. */
@keyframes fm-breathe{
  0%{transform:scale(1) translate(0,0);}
  100%{transform:scale(1.13) translate(-1.2%,-0.8%);}
}
@media (prefers-reduced-motion: reduce){ .fm-hero-bg{animation:none;} }
.fm-hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,18,14,0.08) 0%, rgba(20,18,14,0.04) 35%, rgba(20,18,14,0.72) 100%);
}
.fm-hero-center{
  position:absolute; z-index:2; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  text-align:center; padding:0 1.5rem clamp(8rem,16vh,11.5rem); gap:clamp(0.9rem,2.2vw,1.5rem);
}
.fm-hero-logo{
  width:clamp(150px,17vw,240px); height:auto; margin:0;
  filter:drop-shadow(0 3px 16px rgba(0,0,0,0.35));
}
.fm-hero-line{
  color:#fff; max-width:30ch; font-size:clamp(1.5rem,3.6vw,2.8rem);
  font-family:'Iowan Old Style','Palatino Linotype',Palatino,Georgia,'Times New Roman',serif;
  font-style:italic; line-height:1.32; text-shadow:0 3px 24px rgba(0,0,0,0.55);
  margin:0;
}
.fm-scroll-cue{
  position:absolute; z-index:2; left:50%; bottom:2.5rem; transform:translateX(-50%);
  color:#fff; font-size:0.72rem; letter-spacing:0.22em; text-transform:uppercase;
  display:flex; flex-direction:column; align-items:center; gap:0.6rem; opacity:0.85;
}
.fm-stem{width:1px; height:44px; background:rgba(255,255,255,0.65);}

/* scroll-reveal — real movement as the page is read, not only the hero.
   Reduced motion is honoured: everything simply appears, already in place. */
.fm-reveal{opacity:0; transform:translateY(34px); transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);}
.fm-reveal.is-in{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  .fm-reveal{opacity:1; transform:none; transition:none;}
}

/* two ways in */
.fm-browse-by{
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  padding:0; background:var(--line);
}
.fm-browse-tile{display:block; overflow:hidden; position:relative;}
.fm-browse-tile img{width:100%; height:100%; display:block; object-fit:cover; transition:transform .8s ease;}
.fm-browse-tile:hover img{transform:scale(1.03);}
@media (max-width: 720px){ .fm-browse-by{grid-template-columns:1fr;} }

/* the second entrance — for the makers themselves */
/* the tie-back — what this is part of */
.fm-whole{background:var(--cream-deep); text-align:center;}
.fm-whole-inner{max-width:52ch; margin:0 auto;}
.fm-whole-line{
  font-size:1.05rem; line-height:1.85; color:rgba(43,40,34,0.8); margin:0 0 1.4rem;
}
.fm-whole-we{
  font-family:'Iowan Old Style','Palatino Linotype',Palatino,Georgia,'Times New Roman',serif;
  font-style:italic; font-size:1.2rem; color:var(--ink); margin-bottom:0;
}

.fm-maker-hero{
  position:relative; min-height:70vh; overflow:hidden;
  display:flex; align-items:center; justify-content:center; text-align:center;
}
.fm-maker-hero img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 30%;
}
.fm-maker-hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,18,14,0.15) 0%, rgba(20,18,14,0.25) 100%);
}
.fm-maker-hero-inner{position:relative; z-index:2; padding:2rem;}
.fm-maker-hero-inner h2{
  color:#fff; font-size:clamp(2.1rem,4vw,3.2rem); line-height:1.2; margin:0 0 2rem;
  text-shadow:0 2px 20px rgba(0,0,0,0.35);
}
.fm-maker-cta{
  display:inline-block; padding:0.9rem 2.2rem; border-radius:30px;
  background:var(--sage-deep); color:#fff; font-size:0.85rem; letter-spacing:0.08em; text-transform:uppercase;
}

/* sections */
section{padding:clamp(4rem,10vw,7.5rem) clamp(1.5rem,6vw,5rem);}
.fm-kicker{
  font-size:0.72rem; letter-spacing:0.28em; text-transform:uppercase;
  color:var(--sage-deep); margin-bottom:1.1rem; display:block;
}
.fm-section-title{font-size:clamp(2.3rem,4.2vw,3.4rem); max-width:18ch; margin:0 0 0.7rem; line-height:1.15;}
.fm-section-lede{max-width:56ch; font-size:1.05rem; line-height:1.75; color:rgba(43,40,34,0.78);}
.fm-meraki-def{
  font-family:'Iowan Old Style','Palatino Linotype',Palatino,Georgia,'Times New Roman',serif;
  font-style:italic; font-size:1rem; max-width:44ch; color:rgba(43,40,34,0.6); margin-bottom:1.6rem;
}

/* moments */
.fm-moments-head{max-width:1400px; margin:0 auto 4.5rem;}
.fm-moments{
  max-width:1400px; margin:0 auto;
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,3vw,3rem);
}
.fm-moment{position:relative;}
.fm-moment-frame{
  position:relative;
  border-radius:50% 50% 6px 6px / 30% 30% 4px 4px;
  overflow:hidden; aspect-ratio:1/1.08;
  box-shadow:0 30px 60px -25px rgba(43,40,34,0.35);
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.fm-moment:nth-child(2) .fm-moment-frame{ transform:translateY(-2.2rem); }
.fm-moment-frame img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s ease;}
.fm-moment:hover .fm-moment-frame img{ transform:scale(1.045); }
.fm-moment-cap{text-align:center; margin-top:1.6rem;}
.fm-moment-num{
  font-family:'Iowan Old Style','Palatino Linotype',Palatino,Georgia,'Times New Roman',serif;
  font-style:italic; color:var(--sage-deep); font-size:0.95rem; display:block; margin-bottom:0.35rem;
}
.fm-moment-cap h3{font-size:1.5rem; margin:0 0 0.5rem;}
.fm-moment-cap p{font-size:0.92rem; line-height:1.65; color:rgba(43,40,34,0.68); max-width:30ch; margin:0 auto;}

/* quote strip — white, not washed; sage arrives only as the small marks either side */
.fm-strip{background:var(--cream); text-align:center; position:relative;}
.fm-strip::before,.fm-strip::after{
  content:"\201C"; display:block; font-family:'Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif;
  font-style:italic; color:var(--sage); font-size:3.5rem; line-height:1; opacity:0.7;
}
.fm-strip::after{content:"\201D";}
.fm-strip blockquote{
  margin:0.4rem auto 0; max-width:30ch;
  font-family:'Iowan Old Style','Palatino Linotype',Palatino,Georgia,'Times New Roman',serif;
  font-style:italic; font-size:clamp(1.6rem,3vw,2.3rem); line-height:1.4; color:var(--ink);
}
.fm-strip .fm-attrib{
  display:block; margin-top:1.6rem; font-size:0.72rem; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--sage-deep);
}

/* inner page hero — smaller than the home hero, still hers */
.fm-page-hero{background:var(--cream-deep); text-align:center; padding-top:3rem;}
.fm-page-hero-inner{max-width:60ch; margin:0 auto; padding:0 1.5rem 4rem;}
.fm-page-hero h1{font-size:clamp(2rem,4vw,3rem); margin:0.6rem 0 1.2rem;}

.fm-occasions{
  max-width:1200px; margin:0 auto; padding-top:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2.5vw,2rem);
}
.fm-occasion-tile{
  margin:0; border-radius:4px; overflow:hidden;
  box-shadow:0 20px 45px -25px rgba(43,40,34,0.35);
}
.fm-occasion-tile img{width:100%; display:block; transition:transform .6s ease;}
.fm-occasion-tile:hover img{transform:scale(1.03);}
@media (max-width: 880px){ .fm-occasions{grid-template-columns:1fr 1fr;} }
@media (max-width: 560px){ .fm-occasions{grid-template-columns:1fr;} }

.fm-empty-promise{
  max-width:52ch; margin:0 auto; text-align:center;
  padding-top:6rem; padding-bottom:8rem;
}
.fm-empty-eyebrow{
  font-size:0.72rem; letter-spacing:0.28em; text-transform:uppercase;
  color:var(--sage-deep); margin:0 0 1rem;
}
.fm-empty-promise h2{font-size:clamp(1.6rem,3vw,2.2rem); margin:0 0 1.2rem;}
.fm-empty-body{font-size:1.02rem; line-height:1.8; color:rgba(43,40,34,0.72);}

/* The Sitting — Find Me's own name for the Atelier, promoted, not buried */
.fm-sitting{
  max-width:52ch; margin:0 auto; text-align:center;
  padding:5rem 1.5rem 8rem; border-top:1px solid var(--line);
}
.fm-sitting h2{
  font-size:clamp(1.8rem,3vw,2.4rem); margin:0.8rem 0 1.4rem;
}
.fm-sitting-body{font-size:1.05rem; line-height:1.8; color:rgba(43,40,34,0.75); margin:0 0 1.2rem;}
.fm-sitting-cta{
  display:inline-block; margin-top:0.6rem; padding:0.9rem 2.4rem; border-radius:30px;
  background:var(--sage-deep); color:#fff; font-size:0.85rem; letter-spacing:0.08em; text-transform:uppercase;
  transition:background .25s;
}
.fm-sitting-cta:hover{background:var(--ink);}

.fm-404-links{display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-top:1rem;}
.fm-404-secondary{background:transparent; color:var(--sage-deep); border:1px solid var(--sage-deep);}
.fm-404-secondary:hover{background:var(--sage-deep); color:#fff;}

/* WooCommerce's own screens — not restyled wholesale (that's Market's job),
   just kept from colliding with the fixed header or looking like a stranger's
   site while they wait to be replaced. */
.woocommerce-page:not(.home) #main{
  padding-top:3rem;
  max-width:640px; margin:0 auto;
}
/* Dokan's own pages — same shell fix, header no longer collides with any of them */
.dokan-theme-find-me:not(.home) #main{ padding-top:2rem; }
.dokan-theme-find-me:not(.home) .dokan-btn-theme,
.dokan-theme-find-me:not(.home) .dokan-btn{
  background:var(--sage-deep) !important; border-color:var(--sage-deep) !important;
}
.woocommerce-page:not(.home) #main h1{font-size:2rem; margin-bottom:1.5rem;}
.woocommerce-page:not(.home) .woocommerce-form-row{margin-bottom:1.2rem;}
.woocommerce-page:not(.home) label{display:block; font-size:0.85rem; margin-bottom:0.4rem; color:rgba(43,40,34,0.75);}
.woocommerce-page:not(.home) input[type="text"],
.woocommerce-page:not(.home) input[type="email"],
.woocommerce-page:not(.home) input[type="password"]{
  width:100%; padding:0.75rem 1rem; border:1px solid var(--line); border-radius:3px;
  background:var(--cream); font-family:inherit; font-size:1rem; color:var(--ink);
}
.woocommerce-page:not(.home) button,
.woocommerce-page:not(.home) input[type="submit"],
.woocommerce-page:not(.home) .button{
  background:var(--sage-deep); color:#fff; border:none; border-radius:30px;
  padding:0.8rem 2rem; font-size:0.85rem; letter-spacing:0.06em; text-transform:uppercase;
  cursor:pointer;
}
.woocommerce-page:not(.home) a{color:var(--sage-deep); text-decoration:underline;}
.woocommerce-page:not(.home) .woocommerce-info,
.woocommerce-page:not(.home) .woocommerce-message{
  border-top-color:var(--sage); background:var(--cream-deep); padding:1rem 1.4rem;
  font-size:0.95rem;
}

/* The Atelier's own sitting — real, working, hers */
.fm-atelier-intro{
  max-width:52ch; margin:0 auto; text-align:center;
  padding-bottom:1rem;
}
.fm-atelier-intro p{font-size:1.05rem; line-height:1.85; color:rgba(43,40,34,0.78);}

.fm-atelier-form-wrap{max-width:52ch; margin:0 auto; padding-top:1rem;}
.fm-atelier-form{display:flex; flex-direction:column; gap:1.8rem;}
.fm-atelier-honeypot{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
.fm-atelier-field{display:flex; flex-direction:column; gap:0.6rem;}
.fm-atelier-field label,
.fm-atelier-chips legend{
  font-size:0.78rem; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--sage-deep); padding:0;
}
.fm-atelier-field input[type="text"],
.fm-atelier-field input[type="email"],
.fm-atelier-field textarea{
  width:100%; padding:0.9rem 1rem; border:1px solid var(--line); border-radius:4px;
  background:var(--cream-deep); font-family:inherit; font-size:1.02rem; color:var(--ink);
  resize:vertical;
}
.fm-atelier-field input:focus,
.fm-atelier-field textarea:focus{outline:2px solid var(--sage); outline-offset:1px;}

.fm-atelier-chips{border:none; margin:0; padding:0;}
.fm-chip-row{display:flex; flex-wrap:wrap; gap:0.7rem; margin-top:0.5rem;}
.fm-chip{position:relative;}
.fm-chip input{position:absolute; opacity:0; width:1px; height:1px;}
.fm-chip span{
  display:inline-block; padding:0.6rem 1.2rem; border-radius:30px;
  border:1px solid var(--line); font-size:0.85rem; color:var(--ink); opacity:0.75;
  cursor:pointer; transition:all .2s;
}
.fm-chip input:checked + span{
  background:var(--sage-deep); border-color:var(--sage-deep); color:#fff; opacity:1;
}
.fm-chip input:focus-visible + span{outline:2px solid var(--sage-deep); outline-offset:2px;}

.fm-atelier-status{
  font-size:0.92rem; color:var(--ink); min-height:1.2em;
}
.fm-atelier-submit{
  align-self:flex-start; padding:0.95rem 2.6rem; border-radius:30px; border:none;
  background:var(--sage-deep); color:#fff; font-size:0.85rem; letter-spacing:0.08em;
  text-transform:uppercase; cursor:pointer; transition:background .25s;
}
.fm-atelier-submit:hover{background:var(--ink);}
.fm-atelier-submit:disabled{opacity:0.6; cursor:wait;}

.fm-atelier-thanks{
  max-width:52ch; margin:0 auto; text-align:center; padding:2rem 0 6rem;
}
.fm-atelier-thanks h2{font-size:clamp(1.7rem,3vw,2.3rem); margin:0 0 1rem;}
.fm-atelier-thanks p{font-size:1.02rem; line-height:1.8; color:rgba(43,40,34,0.75);}

/* footer — was one thin line, built out 8 September 2026 */
.fm-footer{
  padding:clamp(3.5rem,7vw,5.5rem) clamp(1.5rem,6vw,5rem) 2.4rem;
  border-top:1px solid var(--line);
}
.fm-footer-inner{
  max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:clamp(2rem,5vw,4rem);
  padding-bottom:2.6rem; margin-bottom:2.2rem; border-bottom:1px solid var(--line);
}
.fm-footer-wordmark{
  font-family:'Iowan Old Style','Palatino Linotype',Palatino,Georgia,'Times New Roman',serif;
  font-style:italic; font-size:1.3rem; color:var(--ink); display:inline-block; margin-bottom:0.5rem;
}
.fm-footer-line{margin:0; font-size:0.88rem; color:rgba(43,40,34,0.6); max-width:28ch;}
.fm-footer-heading{
  display:block; font-size:0.7rem; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--sage-deep); margin-bottom:1rem;
}
.fm-footer-nav, .fm-footer-write{display:flex; flex-direction:column; gap:0.7rem;}
.fm-footer-nav a, .fm-footer-write a{
  font-size:0.9rem; color:rgba(43,40,34,0.75); transition:color .2s;
}
.fm-footer-nav a:hover, .fm-footer-write a:hover{color:var(--sage-deep);}
.fm-footer-copy{
  margin:0; text-align:center; font-size:0.75rem; letter-spacing:0.06em; color:rgba(43,40,34,0.45);
}
@media (max-width: 720px){
  .fm-footer-inner{grid-template-columns:1fr; gap:2rem; text-align:left;}
}

@media (max-width: 880px){
  .fm-nav{display:none;}
  .fm-moment:nth-child(2) .fm-moment-frame{transform:none;}
}

/* Made / Chosen / Given — side by side on a phone, never stacked one under
   the other. Her words: "could we fit them in next to each other on a
   mobile?" A smaller, tighter version of the same three frames. */
@media (max-width: 640px){
  .fm-moments{grid-template-columns:repeat(3,1fr); gap:0.7rem;}
  .fm-moment-frame{border-radius:50% 50% 4px 4px / 30% 30% 3px 3px;}
  .fm-moment-cap{margin-top:0.8rem;}
  .fm-moment-num{font-size:0.7rem; margin-bottom:0.15rem;}
  .fm-moment-cap h3{font-size:0.92rem; line-height:1.25; margin:0 0 0.35rem;}
  .fm-moment-cap p{
    font-size:0.68rem; line-height:1.4;
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
  }
}