/* Céramique de Loulou — shared style for every page */
:root{
  --mist:#EEF0E6;      /* rice-paper mist */
  --paper:#F4F3EC;
  --celadon:#DCE5D4;   /* stamp paper */
  --celadon-deep:#B9CAB4;
  --sage:#7E9580;
  --ink:#2A3A30;       /* ink green, from the logo */
  --ink-soft:#4E5F53;
  --seal:#B04A42;      /* the lotus seal */
  --lotus:#D98DA3;
  --water:#C6D3C0;
  /* warm parchment pages and ochre stamps, from the logo */
  --page:#F3E7CD;
  --stamp:#ECD8AE;
  --stamp-deep:#D9B47E;
  --stamp-hover:#F4E4C2;
  --stamp-ink:#3A2E18;
  --indigo:#172A58;
  --serif:"Cormorant Garamond", Georgia, "Times New Roman", serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html{background:var(--page)}
body{margin:0;min-height:100vh;color:var(--ink);font:500 1.18rem/1.62 var(--serif);-webkit-tap-highlight-color:transparent;
  background:
    url(paper.png),
    radial-gradient(900px 600px at 8% 12%,rgba(201,148,95,.35),transparent 70%),
    radial-gradient(800px 600px at 95% 55%,rgba(138,45,31,.07),transparent 70%),
    radial-gradient(1100px 700px at 30% 100%,rgba(120,103,61,.2),transparent 70%),
    var(--page)}
img{max-width:100%;display:block}
[hidden]{display:none!important}
a{color:inherit}
h1,h2,h3{font-weight:500;line-height:1.1;margin:0;letter-spacing:.01em}
p{margin:0 0 1em}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* ---- the stamp: links that look like ochre postage stamps ---- */
.stamp{display:inline-block;text-decoration:none;filter:drop-shadow(0 4px 5px rgba(58,44,20,.2));outline:none}
.stamp span{display:flex;align-items:center;gap:8px;padding:9px 15px 10px 17px;color:var(--stamp-ink);
  background:
    radial-gradient(60% 80% at 20% 30%,rgba(120,103,61,.16),transparent 70%),
    radial-gradient(50% 70% at 85% 80%,rgba(138,45,31,.06),transparent 70%),
    var(--stamp);
  font:600 1.1rem/1 var(--serif);letter-spacing:.04em;white-space:nowrap;
  box-shadow:inset 0 0 0 5px var(--stamp),inset 0 0 0 6px rgba(58,44,20,.38);
  -webkit-mask:radial-gradient(circle at 50% 50%,#0000 2.6px,#000 3px) -4px -4px/8px 8px round,
               linear-gradient(#000 0 0) 4px 4px/calc(100% - 8px) calc(100% - 8px) no-repeat;
          mask:radial-gradient(circle at 50% 50%,#0000 2.6px,#000 3px) -4px -4px/8px 8px round,
               linear-gradient(#000 0 0) 4px 4px/calc(100% - 8px) calc(100% - 8px) no-repeat;
  transition:background-color .25s}
.stamp span::after{content:"";width:7px;height:9px;border-radius:1px;background:var(--seal);opacity:.82}
.stamp:hover span,.stamp:focus-visible span{background-color:var(--stamp-hover);box-shadow:inset 0 0 0 5px var(--stamp-hover),inset 0 0 0 6px var(--stamp-ink)}
.stamp:focus-visible{filter:drop-shadow(0 0 2px var(--stamp-ink))}
.stamp[aria-current] span{background-color:var(--stamp-deep);box-shadow:inset 0 0 0 5px var(--stamp-deep),inset 0 0 0 6px var(--stamp-ink)}
button.stamp{border:0;background:none;padding:0;cursor:pointer;font:inherit}

/* ---- page top: logo + stamps ---- */
.top{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;
  max-width:1160px;margin:0 auto;padding:18px 20px 10px}
.top .home img{height:56px;width:auto}
.top nav{display:flex;gap:10px;flex-wrap:wrap}

/* ---- the pond strip at the top of each page ---- */
.banner{position:relative;height:clamp(240px,40vh,380px);margin:4px 0 0;overflow:hidden;
  -webkit-mask:linear-gradient(#000 78%,transparent);mask:linear-gradient(#000 78%,transparent)}
.banner canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y;cursor:pointer}
.banner .title{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);text-align:center;pointer-events:none;
  width:min(560px,86vw);z-index:2}
.banner .title::before{content:"";position:absolute;inset:-45% -10%;z-index:-1;filter:blur(4px);
  background:radial-gradient(closest-side,rgba(246,238,220,.9) 35%,rgba(246,238,220,.52) 65%,rgba(246,238,220,0))}
.banner h1{font-size:clamp(2.6rem,7vw,4.4rem);font-weight:500}
.banner .title p{margin:.35em 0 0;font-style:italic;font-size:clamp(1.05rem,2.4vw,1.3rem);color:var(--ink-soft)}

/* ---- content ---- */
main{max-width:1160px;margin:0 auto;padding:8px 20px 40px}
.measure{max-width:640px}
.lead{font-size:clamp(1.3rem,2.6vw,1.55rem);line-height:1.45}
.muted{color:var(--ink-soft)}
.seal-mark{display:inline-block;width:9px;height:12px;border-radius:1px;background:var(--seal);opacity:.85;margin-right:10px;vertical-align:.05em}
.brush{height:14px;margin:48px auto;max-width:520px;opacity:.5;
  background:radial-gradient(50% 40% at 50% 50%,var(--sage),transparent 75%)}

/* a photo mounted like a stamp */
.mount{background:#F1E5CB;padding:10px;filter:drop-shadow(0 8px 14px rgba(42,58,48,.16));
  -webkit-mask:radial-gradient(circle at 50% 50%,#0000 3.6px,#000 4px) -5px -5px/10px 10px round,
               linear-gradient(#000 0 0) 5px 5px/calc(100% - 10px) calc(100% - 10px) no-repeat;
          mask:radial-gradient(circle at 50% 50%,#0000 3.6px,#000 4px) -5px -5px/10px 10px round,
               linear-gradient(#000 0 0) 5px 5px/calc(100% - 10px) calc(100% - 10px) no-repeat}
.mount img,.mount .empty{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.mount .empty{display:grid;place-items:center;text-align:center;color:var(--ink-soft);font-style:italic;font-size:1rem;
  background:
    radial-gradient(45% 35% at 35% 40%,rgba(201,148,95,.26),transparent 70%),
    radial-gradient(40% 30% at 65% 65%,rgba(120,103,61,.16),transparent 70%),
    #EFE2C4}
.mount .empty::before{content:"";display:block;width:14px;height:19px;margin:0 auto 8px;background:var(--seal);opacity:.7;border-radius:1px}

/* ---- footer ---- */
.foot{max-width:1160px;margin:0 auto;padding:26px 20px 40px;display:flex;gap:14px 28px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  color:var(--ink-soft);font-size:1rem;border-top:1px solid rgba(42,58,48,.14)}
.foot nav{display:flex;gap:18px;flex-wrap:wrap}
.foot a{text-decoration:none}
.foot a:hover{text-decoration:underline}

@media (max-width:640px){
  .top{justify-content:center;padding-top:14px}
  .top .home img{height:46px}
  .top nav{justify-content:center}
  .stamp span{font-size:1.02rem;padding:8px 13px 9px 15px}
}
@media (prefers-reduced-motion: reduce){*{scroll-behavior:auto}}

/* ---- Instagram: a small square stamp with the camera glyph in seal red ---- */
.stamp.ig span{padding:8px 10px;gap:0}
.stamp.ig span::after{display:none}
.ig-glyph{display:block;color:var(--seal)}
.ig-line{display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.ig-line .ig-glyph{width:17px;height:17px}
.ig-line:hover{color:var(--seal)}

/* a soft label over a blurred "coming soon" photo */
.mount{position:relative}
.soon-tag{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:6px 14px 7px;white-space:nowrap;
  background:rgba(250,242,225,.82);color:var(--ink);font:italic 500 1.05rem/1 var(--serif);letter-spacing:.04em;
  box-shadow:0 0 0 1px rgba(58,44,20,.12)}

/* photo whites take on the parchment tone, so pieces sit in the page rather than on it */
.mount img{mix-blend-mode:multiply}
.mount{background-image:radial-gradient(70% 60% at 50% 45%,rgba(250,242,225,.5),transparent 80%)}

/* ---- page transitions ---- */
/* first visit: the page clears in like mist */
body::after{content:"";position:fixed;inset:0;z-index:200;pointer-events:none;background:var(--page);animation:mist-clear .7s cubic-bezier(.4,0,.2,1) .05s both}
@keyframes mist-clear{from{opacity:1}to{opacity:0}}
/* arriving from another page: hold the right colour until the painted transition takes over */
html.water-in body::after{animation:none;opacity:1;background:radial-gradient(ellipse 75% 75% at 50% 45%,#C6D3CB 0%,#A9BDBC 40%,#87A0A2 75%,#6A7F78 100%)}
html.brush-in body::after{animation:none;opacity:1;background:url(seal.png) center/auto min(190px,24vh) no-repeat,url(paper.png),var(--page)}
html.arrived body::after{display:none}
.trans-layer{position:fixed;inset:0;width:100vw;height:100vh;z-index:201;pointer-events:none}
/* the water draining away on arrival: only fading and scaling, so the graphics hardware plays it smoothly */
.drain{position:fixed;inset:0;width:100%;height:100%;object-fit:fill;display:block;z-index:201;pointer-events:none;background:radial-gradient(ellipse 75% 75% at 50% 45%,#C6D3CB 0%,#A9BDBC 40%,#87A0A2 75%,#6A7F78 100%);will-change:transform,opacity;transform-origin:50% 45%}
.drain-b{-webkit-mask-image:radial-gradient(ellipse 60% 60% at 50% 45%,transparent 0%,rgba(0,0,0,.25) 38%,rgba(0,0,0,.8) 70%,#000 100%);
        mask-image:radial-gradient(ellipse 60% 60% at 50% 45%,transparent 0%,rgba(0,0,0,.25) 38%,rgba(0,0,0,.8) 70%,#000 100%)}
.drain-a.go{animation:drain-a .5s cubic-bezier(.4,0,.6,1) forwards}
.drain-b.go{animation:drain-b 1.15s cubic-bezier(.25,.1,.25,1) forwards}
@keyframes drain-a{to{opacity:0}}
@keyframes drain-b{0%{transform:scale(1);opacity:1}55%{opacity:.8}100%{transform:scale(2.2);opacity:0}}
@media (prefers-reduced-motion: reduce){ .drain-b.go{animation:drain-a .3s forwards} .drain-a.go{animation-duration:.3s} }
@media (prefers-reduced-motion: reduce){ body::after{animation-duration:.2s} }