/* generated from site/nav.py, site/waves.py, site/icons.py,
   site/forms.py and site/footer.py
   -- do not edit here; edit the module. */

/* A page with no video hero has nothing for a see-through bar to sit on, so it starts
   solid. Written as :has() rather than a body class so a new page gets it for free. */
body:not(:has(.hero-media)) .nav{background:rgba(251,245,237,.96);
  backdrop-filter:blur(8px);box-shadow:0 1px 0 var(--rule)}
body:not(:has(.hero-media)) .nav .links a{color:var(--ink);text-shadow:none}
body:not(:has(.hero-media)) .nav .icon{color:var(--ink);filter:none}
body:not(:has(.hero-media)) .nav .navmark .on-video{display:none}
body:not(:has(.hero-media)) .nav .navmark .on-cream{display:block}
body:not(:has(.hero-media)) .nav.up{transform:none}
/* ---------- nav: see-through over the hero, gone when you scroll down ------ */
.nav{position:fixed;inset:0 0 auto;z-index:40;padding:14px 0;
  transition:transform .32s ease, background .32s ease, box-shadow .32s ease;
  padding-top:calc(14px + env(safe-area-inset-top,0px))}
.nav.up{transform:translateY(-104%)}
.nav.solid{background:rgba(251,245,237,.94);backdrop-filter:blur(8px);
  box-shadow:0 1px 0 var(--rule)}
/* Three columns so the daisy is CENTRED on the bar and stays there, which is what
   she asked for -- a flex row with space-between drifts as the link text changes. */
.nav .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px}
.nav .links{justify-self:start}
.nav .tools{justify-self:end;display:flex;align-items:center;gap:4px}
.nav .icon{display:grid;place-items:center;width:44px;height:44px;color:#fff;
  background:none;border:0;cursor:pointer;padding:0;
  filter:drop-shadow(0 1px 7px rgba(0,0,0,.55));transition:transform .18s ease}
.nav.solid .icon{color:var(--ink);filter:none}
.nav .icon svg{width:24px;height:24px;fill:currentColor}
.nav .icon:hover{transform:scale(1.16)}
.nav .icon:focus-visible,.nav .navmark:focus-visible{outline:2px solid var(--marigold-br);
  outline-offset:3px;border-radius:3px}

/* A small panel hanging off the icon, not a drawer across the whole bar. Right-aligned
   so it never runs off the edge, and capped to the viewport on a phone. */
.nav .tools{position:relative}
.searchbar{position:absolute;top:100%;right:0;margin-top:10px;z-index:3;
  width:min(340px,calc(100vw - 32px));background:#fff;border:1px solid rgba(16,16,16,.18);
  border-radius:3px;box-shadow:0 18px 40px rgba(16,16,16,.22);padding:12px}
.searchbar input{width:100%;font:inherit;font-size:16px;padding:11px 13px;
  border:2px solid var(--marigold-d);border-radius:2px;background:#fff;color:var(--ink)}
.searchbar input:focus-visible{outline:3px solid var(--marigold-br);outline-offset:1px}
.searchbar ul{list-style:none;margin:8px 0 0;padding:0;max-height:min(340px,52vh);
  overflow:auto}
.searchbar li a{display:flex;justify-content:space-between;gap:12px;align-items:baseline;
  padding:10px 11px;text-decoration:none;color:#101010;border-radius:2px;font-size:15.5px;
  text-shadow:none}
.searchbar li a:hover,.searchbar li a:focus-visible{background:#F2F2F2;transform:none}
.searchbar li span{font-family:var(--f-m);font-size:12.5px;color:var(--sand);
  white-space:nowrap}
/* The search field's label. The homepage calls its own helper .sr and the inner
   pages call theirs .vh; the bar is on both, so it carries the one it uses rather
   than trusting whichever page it landed on. Undefined, that label painted as
   visible text inside the panel -- unnoticed only because the panel never opened
   anywhere but the homepage. */
.nav .sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.searchbar .none{margin:10px 2px 2px;color:var(--sand);font-size:14px}
/* the daisy, with her yellow centre sitting in the middle of the petals */
/* Her real flower, as it is drawn -- brush petals with her marigold centre. Two
   versions because the bar sits on video at the top and on cream once you scroll;
   the petals need to flip, the centre never does. */
.navmark{display:block;width:58px;justify-self:center;transition:transform .2s ease;
  line-height:0}
.navmark img{width:100%;height:auto}
.navmark .on-video{filter:drop-shadow(0 2px 7px rgba(0,0,0,.6))}
.navmark .on-cream{display:none}
.nav.solid .navmark .on-video{display:none}
.nav.solid .navmark .on-cream{display:block}
.navmark:hover{transform:scale(1.10)}
.nav a{text-decoration:none}
.nav .links{display:flex;gap:26px;align-items:center;font-family:var(--f-d);
  text-transform:uppercase;letter-spacing:.09em;font-size:13.5px;font-weight:500}
.nav .links a{color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.45);padding:6px 0;
  display:inline-block;transition:transform .18s ease}
.nav.solid .links a{color:var(--ink);text-shadow:none}
/* she asked for no colour under a hover -- it grows and lifts instead */
.nav .links a:hover,.nav .links a:focus-visible{transform:scale(1.18) translateY(-1px)}
.nav .mark{height:34px;width:auto;filter:drop-shadow(0 1px 8px rgba(0,0,0,.4))}
.nav.solid .mark{filter:brightness(0)}  /* white artwork on a cream bar
  was invisible -- flip it to ink once the bar goes solid */
.drop{position:relative}
/* Left-aligned under Shop, and the 6px gap is PADDING, not a transform. As a
   transform it was dead space: the pointer left the link, hovered nothing, and the
   menu shut before you got to it. Padding keeps the hover area continuous. */
.drop-panel{position:absolute;top:100%;left:-20px;padding:6px 6px 8px;
  margin-top:0;background:#fff;border:1px solid var(--rule);
  /* white, 16 Oct at her request -- the cream read as a dirty panel */
  border-radius:4px;min-width:178px;display:none;
  box-shadow:0 14px 34px rgba(16,16,16,.18)}
.drop-panel::before{content:"";position:absolute;left:20px;right:0;top:-8px;height:8px}
.drop:hover .drop-panel,.drop:focus-within .drop-panel{display:block}
.nav .drop-panel a{display:block;color:var(--ink) !important;text-shadow:none !important;
  padding:9px 13px;border-radius:3px;font-size:14px;letter-spacing:.06em}
.nav .drop-panel a:hover,.nav .drop-panel a:focus-visible{background:var(--sky);
  transform:none}
/* Shop grows on hover like the rest. Safe now: the panel is positioned against .drop,
   so scaling the link inside it does not move the panel. */

/* ---------- the phone bar --------------------------------------------------
   Everything below stays last in this file on purpose: the panel's links have to
   beat `.nav .links a`, which paints them white for the video hero, and at equal
   specificity that is decided by order. */
.nav .burger{display:none;width:44px;height:44px;place-items:center;padding:0;
  background:none;border:0;cursor:pointer;color:#fff;
  filter:drop-shadow(0 1px 7px rgba(0,0,0,.55))}
.nav .burger svg{width:26px;height:26px}
.nav.solid .burger{color:var(--ink);filter:none}
body:not(:has(.hero-media)) .nav .burger{color:var(--ink);filter:none}
.nav .burger:focus-visible{outline:2px solid var(--marigold-br);outline-offset:3px;
  border-radius:3px}
@media (max-width:760px){
  /* 1fr auto 1fr, not auto 1fr auto: the burger is 44px and the search+bag pair is
     84px, so with auto side columns the middle column is not the middle of the bar
     and her daisy sat about 5% left of centre. Equal side columns centre it on the
     screen regardless of what is in them. */
  .nav .wrap{grid-template-columns:1fr auto 1fr}
  .nav .burger{justify-self:start}
  .nav .burger{display:grid}
  /* justify-self:start is still on it from the desktop bar, and on an absolutely
     positioned grid child that beats left:0/right:0 -- the panel came out 119px wide,
     the width of the column it used to sit in. */
  .nav .links{position:absolute;left:0;right:0;top:100%;justify-self:stretch;display:none;
    flex-direction:column;align-items:stretch;gap:0;padding:6px 0 10px;
    background:var(--cream-2);box-shadow:0 18px 34px rgba(16,16,16,.20)}
  .nav .links[data-open="1"]{display:flex}
  .nav .links[data-open] a{color:var(--ink);text-shadow:none;padding:13px 18px;
    font-size:15px;display:block}
  .nav .links[data-open] a:hover,.nav .links[data-open] a:focus-visible{
    transform:none;background:var(--sky)}
  /* the Shop menu is already open on a phone -- nothing to hover with */
  .nav .drop{position:static}
  .nav .drop-panel{position:static;display:block;min-width:0;margin:0;
    padding:0 0 4px 16px;background:transparent;border:0;box-shadow:none}
  .nav .drop-panel::before{display:none}
  .nav .drop-panel a{padding:11px 18px}
  .navmark{width:46px}
  .nav .icon{width:42px;height:42px}
  .searchbar{right:6px}
}
/* ---------- the cartoon water band ---------------------------------------- */
/* Three layers of her sea, each drifting at its own speed and rising and falling on
   its own clock, so the crests pass each other instead of sliding as one sheet.
   The layers bleed past the band top and bottom so that drift can never open a gap.
   .down is the one join where the water is above and the bamboo below. */
.waves{position:relative;height:126px;overflow:hidden;line-height:0;
  background:transparent;margin-bottom:-1px}   /* -1px: the band and the section it
  dissolves into land on different device pixels, and the rounding shows as a hairline */
.waves .lay{position:absolute;inset:-8px 0 -10px;display:flex;width:200%;
  will-change:transform}
.waves .lay svg{width:50%;height:100%;display:block;flex:none}
.waves .l1{animation:roll 21s linear infinite,swell 7s ease-in-out infinite alternate}
.waves .l2{animation:roll 31s linear infinite reverse,
  swell 9s ease-in-out .8s infinite alternate}
.waves .l3{animation:roll 44s linear infinite,
  swell 12s ease-in-out 1.6s infinite alternate}
.waves.down{transform:scaleY(-1);margin-top:-1px}
/* Over the bamboo the water is a ribbon with a wavy underside, and the band is pulled
   down onto the footer so the sand shows through its troughs. The footer gets that
   overlap back as padding so nothing in it ends up underwater. */
.waves.on-sand{position:relative;z-index:2;margin-bottom:-58px}
.waves.on-sand + .foot,.waves.on-sand + .ftr{padding-top:120px}
.waves.down .fx{display:none}   /* bubbles below the waterline only */
@keyframes roll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes swell{from{margin-top:3px}to{margin-top:-4px}}
@media (prefers-reduced-motion:reduce){.waves .lay{animation:none !important}}
@media (max-width:640px){.waves{height:85px}}

/* Solid, not outlined. On the bamboo a ring in --on-bamboo with a glyph of the same
   colour measured about 1.9:1, and Instagram -- the one drawn as an outline rather
   than a solid shape -- disappeared into the weave entirely. A filled disc of her sea
   carries a white glyph at 4.67:1 and holds its own edge against the pattern. */
.socials{display:flex;gap:14px;margin-top:18px;flex-wrap:wrap}
.socials a{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;
  background:var(--sea);color:#fff;border:2px solid var(--sea-cream);
  box-shadow:0 6px 16px rgba(6,42,50,.30);
  transition:transform .18s ease,background .18s ease,color .18s ease}
.socials a:hover,.socials a:focus-visible{transform:scale(1.10);
  background:var(--sea-cream);color:var(--sea-deep);border-color:var(--sea-deep)}
.socials a:focus-visible{outline:3px solid var(--sea-deep);outline-offset:3px}
/* One size for three marks is not one size optically. Measured ink boxes in the
   24x24 viewBox: Instagram 19.7 wide by 19.8 tall, TikTok 16.1 x 18.1, Facebook
   8.6 x 18.0 -- a camera is a square, an f is a letter. At a flat 30px the f sat
   small and lost in its disc while Instagram crowded the edge. These are set so
   the three paint to the same height, which is what the eye reads along a row. */
.socials svg{width:30px;height:30px;fill:currentColor;display:block}
.socials .s-instagram svg{width:28px;height:28px}
.socials .s-tiktok svg{width:30px;height:30px}
.socials .s-facebook svg{width:32px;height:32px}

/* the line a form leaves behind, either way */
.form-out{margin:14px 0 0;font-family:var(--f-mono,monospace);font-size:15px;
  line-height:1.5}
.form-out.ok{color:var(--good,#3F5C46)}
.form-out.bad{color:var(--crit,#8E3A26)}
.form-out.bad a{color:inherit}

/* ---------- the footer ----------------------------------------------------
   One set of rules for one footer. Her woven bamboo is bright enough to carry
   ink on its own, so there is no wash over it. */
.foot{color:var(--ink);padding:66px 0 40px;
  background:url(../img/web/bamboo.jpg?v=e1482583) 0 0/300px 300px repeat}
.foot .cols{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:38px}
.foot h2{color:var(--ink);font-size:18px;letter-spacing:.12em;margin-bottom:16px}
.foot a{color:var(--ink);text-decoration:none;display:block;padding:8px 0;
  font-size:16.5px;font-weight:500}
.foot a:hover{color:var(--on-bamboo);text-decoration:underline}
.foot .footmark{width:104px;height:auto;margin-bottom:16px;display:block}
.foot .logo{padding:0}
.foot p{color:var(--ink-2);font-size:14px;max-width:34ch}
/* Her line and the hashtag. Without them the first column -- the widest of the
   three at 1.3fr -- held a logo and three buttons and nothing else, which read as
   a hole in the footer rather than as breathing room. */
.foot .blurb{margin:0 0 10px;line-height:1.5}
.foot .blurb+.blurb{margin-top:-2px}
/* The social discs are their own thing. `.foot a` above is a bare two-part
   selector, exactly as specific as the `.socials a` in site/icons.py, and this
   file is concatenated after it -- so source order alone decided, and the rule
   above was quietly repainting her white glyphs ink: 4.05:1 on the teal where
   icons.py had measured 4.70:1 for white. The contrast report never caught it
   because an SVG glyph is not text. Everything the disc needs is restated here
   rather than left to whichever file lands last. */
/* grid, NOT flex. site/icons.py centres the glyph with `place-items:center`,
   and in a flex container the justify-items half of that does nothing -- so an
   inline-flex override here centred them vertically and left them hard against
   the left edge, where the disc's own curve clipped Instagram's camera. The
   display still has to be restated to beat `.foot a{display:block}` above. */
.foot .socials a{display:grid;place-items:center;padding:0;color:#fff;
  text-decoration:none}
.foot .socials a:hover,.foot .socials a:focus-visible{
  color:var(--sea-deep);text-decoration:none}
.legal{margin-top:42px;padding-top:20px;border-top:1px solid rgba(16,16,16,.22);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:14px;color:var(--ink-2)}   /* .7 gave 3.7:1 on wood */
.legal a{display:inline;padding:0;font-size:inherit;font-weight:inherit}
@media (max-width:900px){.foot .cols{grid-template-columns:1fr;gap:26px}}