/* hinagiku.day — dreamtime florist's marble archive */

:root{
  --buttercream:#f7f1e6;
  --cipollino:#efe4d2;
  --honey-vellum:#e8d8c0;
  --petal-blush:#f4d6cc;
  --wheat-vein:#d9c9a8;
  --platinum:#b8a99c;
  --graphite:#3d342a;
  --cursor-x:50%;
  --cursor-y:50%;
}

*{margin:0;padding:0;box-sizing:border-box;}

html,body{
  background:var(--buttercream);
  color:var(--graphite);
  font-family:"EB Garamond",Georgia,serif;
  min-height:100vh;
  overflow-x:hidden;
}

body{
  cursor:crosshair;
}

.marble-defs{position:absolute;}

/* ---- Atelier frame ---- */
.atelier{
  position:relative;
  min-height:100vh;
  padding:2.4vh 8vw 2.4vh;
  display:flex;
  flex-direction:column;
}

/* ---- Wordmark ---- */
.wordmark{
  font-family:"Cormorant Garamond",serif;
  font-style:italic;
  font-weight:300;
  letter-spacing:0.04em;
  font-size:clamp(1.6rem,3.2vw,2.4rem);
  color:var(--graphite);
  line-height:1;
  position:relative;
  display:inline-block;
  margin-bottom:0.4vh;
}
.wm-h{position:relative;}
.wm-underline{
  position:absolute;
  left:-0.05em;
  bottom:-0.32em;
  width:1.2em;
  height:0.34em;
  overflow:visible;
}

/* ---- Daisy chain header / nav ---- */
.daisy-chain{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0.05em;
  margin:0.8vh 0 1.6vh;
  font-family:"Cormorant Garamond",serif;
  font-size:22px;
  color:var(--honey-vellum);
  line-height:1;
  user-select:none;
}
.daisy-chain .dc-flower{
  display:inline-block;
  transition:transform 240ms cubic-bezier(.34,1.56,.64,1),filter 240ms ease;
  cursor:pointer;
  color:var(--honey-vellum);
}
.daisy-chain .dc-flower:hover{
  transform:scale(1.18) rotate(8deg);
  filter:drop-shadow(0 0 6px var(--petal-blush));
  color:var(--petal-blush);
}
.daisy-chain .dc-link{
  display:inline-block;
  width:14px;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--platinum) 30%,var(--platinum) 70%,transparent);
  margin:0 1px;
  opacity:.5;
  position:relative;
  top:-3px;
}

/* ---- Mosaic ---- */
.mosaic-wrap{
  position:relative;
  width:100%;
  margin:0 auto;
  flex:1;
}
.mosaic{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-template-rows:repeat(3,1fr);
  aspect-ratio:4/3;
  width:100%;
  position:relative;
  border:0.5px solid var(--platinum);
  /* extend registration marks beyond grid */
  box-shadow:
    0 0 0 0.5px var(--platinum),
    -10px 0 0 -9.5px var(--platinum),
    10px 0 0 -9.5px var(--platinum);
}
.mosaic::before,.mosaic::after{
  content:"";
  position:absolute;
  left:-14px;right:-14px;
  height:0.5px;
  background:var(--platinum);
  opacity:.55;
}
.mosaic::before{top:-14px;}
.mosaic::after{bottom:-14px;}

/* ---- Cells ---- */
.cell{
  position:relative;
  overflow:hidden;
  border-right:0.5px solid var(--platinum);
  border-bottom:0.5px solid var(--platinum);
  background:var(--base,#f7f1e6);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:clamp(0.6rem,1.4vw,1.4rem);
  text-align:center;
  transition:border-color 200ms ease;
}
.cell:nth-child(4n){border-right:none;}
.cell:nth-child(n+9){border-bottom:none;}
.cell:hover{border-color:var(--graphite);}

.marble{
  position:absolute;
  inset:-10%;
  background:var(--base,#f7f1e6);
  z-index:0;
  opacity:.85;
  pointer-events:none;
  transition:transform 600ms cubic-bezier(.22,.61,.36,1);
}
.cell:hover .marble{transform:scale(1.04);}

.cell-body{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.5em;
  width:100%;
}

.roman{
  position:absolute;
  top:0.5em;right:0.6em;
  z-index:3;
  font-family:"EB Garamond",serif;
  font-style:italic;
  font-size:0.78rem;
  color:var(--graphite);
  opacity:.55;
  letter-spacing:0.06em;
}

.seal{
  position:absolute;
  bottom:0.5em;left:0.6em;
  width:26px;height:26px;
  z-index:3;
  opacity:.85;
}

.cell-title{
  font-family:"Cormorant Garamond",serif;
  font-weight:500;
  font-size:clamp(1.1rem,1.8vw,1.5rem);
  color:var(--graphite);
  line-height:1.15;
}
.cell-title.faint{opacity:.4;}

.cell-cap{
  font-family:"EB Garamond",serif;
  font-size:clamp(0.72rem,0.95vw,0.95rem);
  line-height:1.6;
  color:var(--graphite);
  opacity:.78;
  max-width:24ch;
}
.cell-cap.faint{opacity:.35;}

.latin{
  font-family:"EB Garamond",serif;
  font-style:italic;
  font-size:clamp(0.74rem,1vw,0.98rem);
  line-height:1.6;
  color:var(--graphite);
  opacity:.8;
}
.latin.big{font-size:clamp(1rem,1.5vw,1.4rem);font-style:italic;}

.chain-rule{
  font-size:0.7em;
  letter-spacing:0.4em;
  color:var(--petal-blush);
  line-height:1;
}

.haiku{
  font-family:"Cormorant Garamond",serif;
  font-style:italic;
  font-weight:500;
  font-size:clamp(0.95rem,1.4vw,1.3rem);
  line-height:1.7;
  color:var(--graphite);
}

.fortune{
  font-family:"EB Garamond",serif;
  font-style:italic;
  font-size:clamp(0.85rem,1.2vw,1.1rem);
  line-height:1.7;
  color:var(--graphite);
}
.fortune .amp{color:var(--petal-blush);margin:0 0.4em;}

/* ---- Daisy SVGs ---- */
.daisy{width:clamp(46px,7vw,86px);height:clamp(46px,7vw,86px);}
.daisy.small{width:clamp(38px,5.5vw,64px);height:clamp(38px,5.5vw,64px);}
.daisy.ghost{position:relative;z-index:2;}
.daisy-petals{transform-origin:50% 50%;}
.cell[data-cell="1"] .daisy{transform:rotate(-6deg);}
.cell[data-cell="3"] .daisy{transform:rotate(8deg);}
.cell[data-cell="4"] .daisy{transform:rotate(-11deg);}
.cell[data-cell="6"] .daisy{transform:rotate(5deg);}

.stem-svg{
  width:clamp(54px,7vw,92px);
  height:auto;
}
.stem-svg.tall{height:clamp(120px,16vw,160px);}
.stem-svg.short{height:clamp(70px,10vw,100px);}
.stem-path{
  transition:d 220ms ease;
}

/* ---- Watercolour wash cell ---- */
.wash{
  position:relative;
  width:clamp(70px,10vw,120px);
  height:clamp(70px,10vw,120px);
  display:flex;
  align-items:center;
  justify-content:center;
}
.wash .blob{
  position:absolute;
  border-radius:50%;
  filter:blur(8px);
  mix-blend-mode:multiply;
}
.wash .b1{width:80%;height:80%;background:var(--petal-blush);opacity:.5;top:5%;left:0;}
.wash .b2{width:65%;height:65%;background:var(--wheat-vein);opacity:.45;bottom:0;right:5%;}
.wash .b3{width:55%;height:55%;background:var(--honey-vellum);opacity:.5;top:25%;left:30%;}

/* ---- Provenance map cell ---- */
.map{
  position:relative;
  width:clamp(70px,9vw,110px);
  height:clamp(50px,7vw,80px);
  border:0.5px solid var(--platinum);
  background:rgba(244,214,204,0.12);
}
.map-pin{
  position:absolute;
  width:8px;height:8px;border-radius:50%;
  background:var(--petal-blush);
  border:1px solid var(--platinum);
  top:40%;left:55%;
  box-shadow:0 0 0 6px rgba(244,214,204,0.25);
}
.map-line{position:absolute;background:var(--platinum);opacity:.4;}
.map-line.ml1{height:0.5px;width:100%;top:55%;}
.map-line.ml2{width:0.5px;height:100%;left:40%;}

/* ---- Date stamp cell ---- */
.datestamp{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.1em;
  border:0.5px solid var(--platinum);
  padding:0.6em 1.2em;
  background:rgba(247,241,230,0.4);
}
.datestamp .ds-day{
  font-family:"Cormorant Garamond",serif;
  font-weight:500;
  font-size:clamp(1.6rem,3vw,2.6rem);
  line-height:1;
  color:var(--graphite);
}
.datestamp .ds-mon{
  font-family:"EB Garamond",serif;
  letter-spacing:0.4em;
  font-size:0.7rem;
  color:var(--graphite);opacity:.8;
}
.datestamp .ds-yr{
  font-family:"EB Garamond",serif;
  font-style:italic;
  font-size:0.72rem;
  color:var(--graphite);opacity:.6;
}

/* ---- Falling petals cell ---- */
.petal-field{
  position:absolute;
  inset:0;
  z-index:1;
  overflow:hidden;
  pointer-events:none;
}
.petal-field .petal{
  position:absolute;
  top:-20px;
  width:14px;height:9px;
  background:var(--buttercream);
  border:1px solid var(--platinum);
  border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
  opacity:.85;
  will-change:transform;
}

/* ---- Empty cell graph paper ---- */
.cell.empty .marble{opacity:.45;}
.graph-grid{
  position:absolute;inset:0;z-index:1;
  background-image:
    linear-gradient(var(--platinum) 0.5px,transparent 0.5px),
    linear-gradient(90deg,var(--platinum) 0.5px,transparent 0.5px);
  background-size:12.5% 12.5%;
  opacity:.04;
  pointer-events:none;
}

/* ---- Self-reference mini grid ---- */
.mini-grid{
  width:clamp(48px,6vw,72px);
  aspect-ratio:4/3;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-template-rows:repeat(3,1fr);
  border:0.5px solid var(--platinum);
  margin:0.2em 0;
}
.mini-grid span{
  border-right:0.5px solid var(--platinum);
  border-bottom:0.5px solid var(--platinum);
}
.mini-grid span:nth-child(4n){border-right:none;}
.mini-grid span:nth-child(n+9){border-bottom:none;}

/* ---- Grid pulse overlay ---- */
.grid-pulse{
  position:absolute;
  inset:0;
  z-index:5;
  pointer-events:none;
  mix-blend-mode:multiply;
  background-image:
    linear-gradient(90deg,transparent calc(25% - 0.5px),var(--platinum) 25%,transparent calc(25% + 0.5px)),
    linear-gradient(90deg,transparent calc(50% - 0.5px),var(--platinum) 50%,transparent calc(50% + 0.5px)),
    linear-gradient(90deg,transparent calc(75% - 0.5px),var(--platinum) 75%,transparent calc(75% + 0.5px)),
    linear-gradient(transparent calc(33.333% - 0.5px),var(--platinum) 33.333%,transparent calc(33.333% + 0.5px)),
    linear-gradient(transparent calc(66.666% - 0.5px),var(--platinum) 66.666%,transparent calc(66.666% + 0.5px));
  opacity:0.02;
  transition:opacity 240ms ease;
}

/* ---- Specimen tag ---- */
.specimen-tag{
  align-self:flex-end;
  position:relative;
  width:160px;
  margin-top:1.6vh;
  padding:0.7em 0.9em 0.7em 1.6em;
  border:0.5px solid var(--platinum);
  background:var(--buttercream);
  display:flex;
  flex-direction:column;
  gap:0.15em;
  transform:rotate(-1.4deg);
}
.tag-hole{
  position:absolute;
  top:6px;left:6px;
  width:16px;height:16px;
}
.specimen-tag span{
  font-family:"EB Garamond",serif;
  font-style:italic;
  font-size:0.78rem;
  line-height:1.4;
  color:var(--graphite);
}
.specimen-tag .tag-l1{font-weight:400;}
.specimen-tag .tag-l3{font-family:"Caveat",cursive;font-style:normal;font-size:0.95rem;color:#5a4d3e;}

/* ---- Cursor magnifier ---- */
.magnifier{
  position:fixed;
  top:0;left:0;
  width:180px;height:180px;
  border-radius:50%;
  border:1px solid var(--platinum);
  pointer-events:none;
  z-index:50;
  opacity:0;
  transition:opacity 300ms ease;
  backdrop-filter:contrast(1.15) brightness(1.06);
  -webkit-backdrop-filter:contrast(1.15) brightness(1.06);
  box-shadow:0 0 60px 8px rgba(244,214,204,0.18), inset 0 0 24px rgba(244,214,204,0.12);
  transform:translate3d(-100px,-100px,0);
  overflow:hidden;
}
.magnifier.on{opacity:1;}
.mag-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(var(--platinum) 0.5px,transparent 0.5px),
    linear-gradient(90deg,var(--platinum) 0.5px,transparent 0.5px);
  background-size:5.625px 5.625px;
  opacity:.07;
}
.mag-note{
  position:absolute;
  font-family:"Caveat",cursive;
  font-size:0.85rem;
  color:#5a4d3e;
  opacity:.7;
  white-space:nowrap;
}
.mag-note.n1{top:24%;left:18%;transform:rotate(-6deg);}
.mag-note.n2{top:50%;left:42%;transform:rotate(3deg);}
.mag-note.n3{bottom:22%;left:24%;transform:rotate(-2deg);}

/* ---- Responsive ---- */
@media (max-width:900px){
  body{overflow-y:auto;}
  .atelier{padding:3vh 6vw;}
  .mosaic{
    grid-template-columns:repeat(2,1fr);
    grid-template-rows:repeat(6,1fr);
    aspect-ratio:2/3;
  }
  .cell{border-right:0.5px solid var(--platinum) !important;border-bottom:0.5px solid var(--platinum) !important;}
  .cell:nth-child(2n){border-right:none !important;}
  .cell:nth-child(n+11){border-bottom:none !important;}
  .grid-pulse,.magnifier{display:none;}
}
@media (max-width:600px){
  .mosaic{
    grid-template-columns:1fr;
    grid-template-rows:repeat(12,1fr);
    aspect-ratio:1/12;
  }
  .cell{
    aspect-ratio:1/1;
    border-right:none !important;
    border-bottom:0.5px solid var(--platinum) !important;
  }
  .cell:last-child{border-bottom:none !important;}
  .daisy-chain{font-size:18px;}
}