/* ============================================================
   GREEN HOUR // WTFJANE.COM // THE ART NOUVEAU VARIATION
   100% HTML + CSS. Zero JavaScript. View source is a feature.
   The same house, opened into the conservatory at l'heure verte.
   The whiplash is the signature: a line that grows toward the light.
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
:root{
  --ground:#F3EAD2; --ground-2:#EADFC2; --ground-3:#E0D2B0; --hair:rgba(36,48,39,.16);
  --ink:#26302A; --ink-muted:#54604E;
  --sage:#7E9A55; --sage-deep:#5A7338; --sage-ink:#3E5226;
  --absinthe:#C8E66A;
  --rose:#C98B86; --rose-deep:#A86A66; --rose-ink:#7E4945;
  --ochre:#C99A3F; --ochre-deep:#9A7320;
  --conservatory:#10180F;
  --pole:var(--sage-deep); --pole-2:var(--rose-deep); --pole-text:var(--sage-ink); --focus:#5A7338;
  --btn-bg:var(--sage-ink); --btn-fg:#F3EAD2;
  --whip-hi:#7E9A55; --whip-base:#5A7338; --whip-deep:#3E5226;
  --rad:18px;
  --s--2:clamp(.66rem,.62rem + .12vw,.74rem);
  --s--1:clamp(.76rem,.72rem + .18vw,.86rem);
  --s-0:clamp(.99rem,.94rem + .22vw,1.1rem);
  --s-1:clamp(1.16rem,1rem + .62vw,1.55rem);
  --s-2:clamp(1.5rem,1.1rem + 1.9vw,2.8rem);
  --s-3:clamp(2.1rem,1.3rem + 3.8vw,4.4rem);
  --s-5:clamp(2.8rem,-.2rem + 15vw,11rem);
  --margin:clamp(1.1rem,5vw,3rem); --gutter:clamp(56px,9vw,118px); --edge:1.5px;
}
body{background:var(--ground);color:var(--ink);font-family:'Quicksand',system-ui,sans-serif;
  line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.skip{position:absolute;left:-999px}
.skip:focus{left:1rem;top:1rem;z-index:9999;background:var(--sage-ink);color:#F3EAD2;padding:.5rem .8rem;border-radius:999px}

/* one printed grain over the whole house (multiplied so it reads as paper tooth) */
.grain{position:fixed;inset:0;pointer-events:none;z-index:9000;opacity:.05;mix-blend-mode:multiply;transform:translateZ(0);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ROOM ENGINE: cream-paper rooms (default) + one dark conservatory. each room sets its pole. */
.room--sage{--pole:var(--sage-deep);--pole-2:var(--rose-deep);--pole-text:var(--sage-ink);
  --btn-bg:var(--sage-ink);--btn-fg:#F3EAD2;--whip-hi:#7E9A55;--whip-base:#5A7338;--whip-deep:#3E5226}
.room--rose{--pole:var(--rose-deep);--pole-2:var(--sage-deep);--pole-text:var(--rose-ink);
  --btn-bg:var(--rose-ink);--btn-fg:#F3EAD2;--whip-hi:#C98B86;--whip-base:#A86A66;--whip-deep:#7E4945}
.room--conservatory{--ground:#10180F;--ground-2:#16210F;--ground-3:#1E2D18;
  --ink:#EFEAD6;--ink-muted:#A9B89C;--hair:rgba(239,234,214,.16);
  --pole:var(--absinthe);--pole-2:#E8A9A3;--pole-text:var(--absinthe);--focus:#C8E66A;
  --btn-bg:var(--absinthe);--btn-fg:#10180F;--whip-hi:#E4F4A6;--whip-base:#C8E66A;--whip-deep:#7E9A55}
section{background:var(--ground);color:var(--ink);position:relative;padding:clamp(3rem,9vw,7rem) var(--margin)}
section>*{position:relative;z-index:1}
section::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(130% 100% at 82% 0%,color-mix(in srgb,var(--pole) 7%,transparent),transparent 60%)}

.kicker{font-family:'Josefin Sans',sans-serif;font-weight:600;text-transform:uppercase;font-size:var(--s--1);
  letter-spacing:.22em;display:flex;gap:.9em;align-items:center;margin-bottom:1.4rem;color:var(--ink);flex-wrap:wrap}
.kicker .n{color:var(--btn-fg);background:var(--btn-bg);padding:.2em .6em;letter-spacing:.06em;border-radius:999px}
.kicker .rule{flex:1;height:2px;background:var(--pole);min-width:2rem;opacity:.55;border-radius:2px}
h2.head{font-family:'Yeseva One',Georgia,serif;font-weight:400;line-height:1.06;letter-spacing:.01em;
  font-size:var(--s-3);margin-bottom:.4em;color:var(--ink)}
.lede{font-size:var(--s-1);line-height:1.5;max-width:56ch;color:var(--ink);
  font-family:'Josefin Slab',Georgia,serif;font-weight:500}

/* PRESS-IN BUTTONS, ROUNDED */
.btn{font-family:'Josefin Sans',sans-serif;font-weight:600;font-size:var(--s--1);letter-spacing:.08em;
  text-transform:uppercase;text-decoration:none;display:inline-block;padding:.7em 1.2em;border-radius:999px;
  border:var(--edge) solid var(--pole);background:var(--ground-2);color:var(--ink);
  box-shadow:4px 4px 0 color-mix(in srgb,var(--pole) 50%,transparent);transition:transform .14s ease,box-shadow .14s ease}
.btn:hover,.btn:focus-visible{transform:translate(3px,3px);box-shadow:1px 1px 0 color-mix(in srgb,var(--pole) 50%,transparent)}
.btn--fill{background:var(--btn-bg);color:var(--btn-fg);border-color:var(--btn-bg)}

/* ===================== WHIPLASH LINE ENGINE (the centerpiece) ===================== */
@property --grow  {syntax:'<number>';     inherits:true; initial-value:1}
@property --bloom {syntax:'<number>';     inherits:true; initial-value:.6}
@property --vein  {syntax:'<number>';     inherits:true; initial-value:1}
@property --sap   {syntax:'<percentage>'; inherits:true; initial-value:50%}
@property --sway  {syntax:'<angle>';      inherits:true; initial-value:0deg}

@keyframes sap-flow{from{background-position:130% 0}to{background-position:-30% 0}}
@keyframes vine-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes sap-rise{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}

/* whiplash TEXT: line gradient clipped to glyphs; a sap-light flows across */
.whip{
  background-image:linear-gradient(100deg,
    var(--whip-deep) 0%,var(--whip-base) 24%,var(--whip-hi) 42%,
    var(--whip-base) 60%,var(--whip-deep) 80%,var(--whip-base) 100%);
  background-size:260% 100%;background-position:0 0;background-repeat:no-repeat;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 1px 0 rgba(36,48,39,.10)) drop-shadow(0 0 calc(5px*var(--vein)) color-mix(in srgb,var(--whip-base) 26%,transparent))}
.wordmark{font-family:'Yeseva One',Georgia,serif;font-weight:400;line-height:1.0;letter-spacing:.01em}

/* the bower: an organic panel framed by inline-SVG whiplash vines + a blooming iris */
.bower{position:relative;background:var(--ground-2);border-radius:var(--rad);overflow:hidden;
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--whip-deep) 70%,transparent);
  transform:perspective(1200px) rotateX(var(--sway));transform-style:preserve-3d;
  transition:transform .4s ease,--bloom .5s ease,--vein .4s ease}
.bower>.bower-body{position:relative;z-index:3}
.bower svg.frame{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;overflow:visible}
.vine{fill:none;stroke:var(--whip-base);stroke-width:calc(2px*var(--vein));stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:0;
  filter:drop-shadow(0 0 calc(3px*var(--vein)) color-mix(in srgb,var(--whip-hi) 55%,transparent))}
.sap{fill:none;stroke:var(--whip-hi);stroke-width:calc(3.2px*var(--vein));stroke-linecap:round;
  stroke-dasharray:.06 .94;stroke-dashoffset:1;opacity:0;
  filter:drop-shadow(0 0 calc(5px*var(--vein)) var(--whip-hi))}
.petal{fill:color-mix(in srgb,var(--whip-base) 78%,transparent);stroke:var(--whip-deep);stroke-width:1.2;
  transform-box:fill-box;transform-origin:50% 100%;transform:scale(var(--bloom));transition:transform .5s ease}
.bower:hover,.bower:focus-within{--bloom:1;--vein:1.35;--sway:3deg}

/* small inline flourish (the coup de fouet under the wordmark) */
.flourish{display:block;overflow:visible}

@media (prefers-reduced-motion:no-preference){
  .wordmark{animation:sap-flow 8s linear infinite}
  .vine{stroke-dashoffset:1;animation:vine-draw 4.2s ease forwards}
  .sap{opacity:1;animation:sap-rise 5.5s linear infinite}
  .bower:hover .sap,.bower:focus-within .sap{animation-duration:2.4s}
  .whip:hover,.whip:focus-visible{animation:sap-flow 2.6s linear infinite}
}
@media (prefers-reduced-motion:reduce){.bower{transition:none}}

/* ORGANIC GEOMETRY: Mucha halo + vine divider */
.halowrap{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.halo{position:absolute;left:50%;top:18%;width:min(118vw,900px);aspect-ratio:1;transform:translate(-50%,-50%);
  border-radius:50%;
  background:
    radial-gradient(closest-side,transparent 57%,color-mix(in srgb,var(--sage) 26%,transparent) 58% 60%,transparent 61%),
    radial-gradient(closest-side,transparent 69%,color-mix(in srgb,var(--ochre) 20%,transparent) 70% 71%,transparent 72%),
    repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--sage) 9%,transparent) 0 1.1deg,transparent 1.1deg 6deg);
  -webkit-mask:radial-gradient(closest-side,#000 38%,transparent 73%);
          mask:radial-gradient(closest-side,#000 38%,transparent 73%);opacity:.75}
@media (prefers-reduced-motion:no-preference){.halo{animation:halo-turn 160s linear infinite}}
@keyframes halo-turn{to{transform:translate(-50%,-50%) rotate(360deg)}}

.vinebar{height:34px;border:0;margin:0;background:var(--pole);opacity:.7;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='34' viewBox='0 0 120 34'%3E%3Cpath d='M0 17 C20 2 40 2 60 17 S100 32 120 17' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cellipse cx='34' cy='8' rx='7' ry='3.4' fill='%23000'/%3E%3Cellipse cx='86' cy='26' rx='7' ry='3.4' fill='%23000'/%3E%3C/svg%3E") repeat-x center / auto 34px;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='34' viewBox='0 0 120 34'%3E%3Cpath d='M0 17 C20 2 40 2 60 17 S100 32 120 17' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cellipse cx='34' cy='8' rx='7' ry='3.4' fill='%23000'/%3E%3Cellipse cx='86' cy='26' rx='7' ry='3.4' fill='%23000'/%3E%3C/svg%3E") repeat-x center / auto 34px}

/* SPECIMEN PLATES: soft sap sheen on hover, no glitch, no rake */
.plate{position:relative;background:transparent}
.plate-img{position:relative;overflow:hidden;border-radius:12px;background:var(--ground-2);
  transition:transform .4s ease;transform-origin:center}
.plate-img img{display:block;width:100%;transition:filter .35s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.plate .sheen{position:absolute;inset:0;pointer-events:none;opacity:0;mix-blend-mode:screen;transition:opacity .4s ease;
  background:radial-gradient(120% 80% at 30% 0%,color-mix(in srgb,var(--absinthe) 50%,transparent),transparent 60%)}
.plate:hover .plate-img:not(.plate-front):not(.plate-back),.plate:focus-within .plate-img:not(.plate-front):not(.plate-back){transform:perspective(1000px) rotateX(2deg)}
.plate:hover .plate-img img,.plate:focus-within .plate-img img{filter:saturate(1.1) brightness(1.04)}
.plate:hover .sheen,.plate:focus-within .sheen{opacity:.55}
.plate figcaption{font-family:'Josefin Sans',sans-serif;font-size:var(--s--2);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-muted);margin-top:.85rem;text-align:center;padding:0 .3em}

/* the notch console */
.console{font-family:'Josefin Sans',sans-serif;font-size:var(--s--2);text-transform:uppercase;letter-spacing:.12em}
.console fieldset{border:1px solid var(--hair);border-radius:calc(var(--rad) - 6px);padding:.7rem .9rem;margin:0 0 .7rem;background:var(--ground-2)}
.console legend{color:var(--ink-muted);padding:0 .4em;letter-spacing:.18em}
.console .row{display:flex;gap:.4rem;flex-wrap:wrap}
.console input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0 0 0 0)}
.console label{border:1px solid var(--hair);border-radius:999px;color:var(--ink-muted);padding:.35em .7em;cursor:pointer;
  background:var(--ground);transition:color .15s,border-color .15s,box-shadow .15s;user-select:none}
.console input:checked + label{color:var(--ink);border-color:var(--pole);
  box-shadow:inset 0 0 0 1px var(--pole),0 0 10px color-mix(in srgb,var(--pole) 30%,transparent)}
.console input:focus-visible + label{outline:3px solid var(--focus);outline-offset:2px}

/* showcase lab layout + :has() wiring */
.lab{display:grid;grid-template-columns:1fr;gap:2rem;margin-top:2rem}
@media(min-width:768px){.lab{grid-template-columns:1.2fr 1fr;align-items:start}}
.lab:has(#bloom-bud:checked){--bloom:.3}
.lab:has(#bloom-open:checked){--bloom:.65}
.lab:has(#bloom-lush:checked){--bloom:1}
.lab:has(#tone-absinthe:checked){--whip-hi:#E4F4A6;--whip-base:#C8E66A;--whip-deep:#7E9A55}
.lab:has(#tone-rose:checked){--whip-hi:#F0C9C4;--whip-base:#E8A9A3;--whip-deep:#A86A66}
.lab:has(#tone-bronze:checked){--whip-hi:#E8C98A;--whip-base:#C99A3F;--whip-deep:#7E5A24}
.lab:has(#glow-dim:checked){--vein:.6}
.lab:has(#glow-soft:checked){--vein:1}
.lab:has(#glow-bright:checked){--vein:1.5}

/* 01 PALETTE */
.palstack{margin-top:1.8rem;display:grid;gap:1.2rem}
.palrow{border:var(--edge) solid var(--pole);border-radius:var(--rad);overflow:hidden}
.palrow .name{font-family:'Josefin Sans',sans-serif;text-transform:uppercase;font-size:var(--s--1);
  letter-spacing:.12em;padding:.6rem .85rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  background:var(--ground-2);color:var(--ink)}
.palrow .name span{color:var(--pole-text)}
.chips{display:flex;flex-wrap:wrap}
.chip{flex:1 1 130px;min-height:100px;display:flex;flex-direction:column;justify-content:flex-end;
  padding:.5rem .6rem;font-family:'Josefin Sans',sans-serif;font-size:var(--s--2);letter-spacing:.04em;
  line-height:1.35;border-right:1px solid rgba(36,48,39,.14)}
.chip b{font-size:var(--s--1);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.2em;display:block}
.chip:last-child{border-right:0}
.palnote{margin-top:1.4rem;font-family:'Josefin Sans',sans-serif;font-size:var(--s--1);letter-spacing:.03em;
  color:var(--ink);border:var(--edge) solid var(--pole);border-radius:var(--rad);padding:.9rem 1.1rem;max-width:74ch;line-height:1.75;background:var(--ground-2)}
.palnote b{color:var(--pole-text)}

/* 02 TYPE */
.specgrid{margin-top:2rem;display:grid;gap:var(--edge);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  background:var(--pole);border:var(--edge) solid var(--pole);border-radius:var(--rad);overflow:hidden}
.spec{background:var(--ground);padding:clamp(1.1rem,3vw,1.6rem);position:relative;
  display:flex;flex-direction:column;justify-content:space-between;gap:1.2rem;min-height:208px}
.spec .num{position:absolute;top:.7rem;right:.9rem;font-family:'Josefin Sans',sans-serif;
  font-size:var(--s--2);letter-spacing:.1em;color:var(--pole-text)}
.spec .disp{line-height:1.05;color:var(--ink);word-break:break-word}
.spec .s-yeseva{font-family:'Yeseva One',serif;font-size:var(--s-3);letter-spacing:.01em;line-height:1}
.spec .s-cormorant{font-family:'Josefin Slab',Georgia,serif;font-weight:600;font-size:var(--s-2);line-height:1.05}
.spec .s-quicksand{font-family:'Quicksand',sans-serif;font-weight:500;font-size:var(--s-1);line-height:1.5;letter-spacing:.01em}
.spec .s-mono{font-family:'Josefin Sans',sans-serif;font-size:var(--s-1);letter-spacing:.02em}
.spec .meta{font-family:'Josefin Sans',sans-serif;font-size:var(--s--2);letter-spacing:.06em;text-transform:uppercase;
  color:var(--pole-text);display:flex;justify-content:space-between;gap:.8rem;border-top:1px solid var(--pole);
  padding-top:.7rem;flex-wrap:wrap}
.spec .meta b{color:var(--ink);font-weight:600}

/* 04 PLATES grid */
.plateset{margin-top:2rem;display:grid;gap:clamp(1.4rem,4vw,2.4rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.plateset figure{margin:0}

/* 05 COMPONENTS */
.compgrid{margin-top:2rem;display:grid;gap:var(--margin);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.comp{border:var(--edge) solid var(--pole);border-radius:var(--rad);background:var(--ground-2);padding:clamp(1.1rem,3vw,1.5rem);
  display:flex;flex-direction:column;gap:1rem}
.comp .ct{font-family:'Josefin Sans',sans-serif;font-size:var(--s--2);letter-spacing:.12em;text-transform:uppercase;
  color:var(--pole-text);border-bottom:1px solid var(--pole);padding-bottom:.5rem}
.comp .cap{font-family:'Quicksand',sans-serif;font-size:var(--s-0);line-height:1.6;color:var(--ink)}
.btnrow{display:flex;gap:.7rem;flex-wrap:wrap}
.chiprow{display:flex;gap:.6rem;flex-wrap:wrap;font-family:'Josefin Sans',sans-serif;font-size:var(--s--1);
  letter-spacing:.06em;text-transform:uppercase}
.chiprow span{border:1px solid var(--pole);border-radius:999px;padding:.4em .8em;color:var(--ink)}
.chiprow span.lit{background:var(--btn-bg);color:var(--btn-fg);border-color:var(--btn-bg)}
.entries{display:flex;flex-direction:column}
.entry{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;
  padding:.85rem 0;border-bottom:1px solid var(--hair);transition:color .14s ease,padding-left .14s ease}
.entry:first-child{padding-top:0}.entry:last-child{border-bottom:0}
.entry:hover{color:var(--pole-text);padding-left:.4rem}
.entry .et{font-family:'Josefin Slab',Georgia,serif;font-weight:600;font-size:var(--s-1)}
.entry .ed{font-family:'Josefin Sans',sans-serif;font-size:var(--s--2);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted)}
.entry:hover .ed{color:var(--pole-text)}
.cons-swatch{border-radius:calc(var(--rad) - 4px);background:#10180F;color:#EFEAD6;padding:1rem 1.1rem;
  font-family:'Josefin Sans',sans-serif;font-size:var(--s--1);line-height:1.65}
.cons-swatch b{color:#C8E66A}
.whipdemo{margin-top:var(--margin);border:var(--edge) solid var(--pole);border-radius:var(--rad);background:var(--ground-2);padding:clamp(1.4rem,4vw,2.4rem)}
.whipdemo .prompt-line{font-family:'Josefin Sans',sans-serif;font-size:var(--s--1);letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-muted);margin-top:1rem}

/* 06 COLOPHON */
.colo-grid{display:grid;gap:clamp(1.6rem,4vw,3rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));margin-top:1rem}
.colo-col h3{font-family:'Josefin Sans',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.16em;
  font-size:var(--s--1);color:var(--ink);border-bottom:1px solid var(--pole);padding-bottom:.5rem;margin-bottom:.9rem}
.colo-col ul{list-style:none;font-family:'Josefin Sans',sans-serif;font-size:var(--s--1);line-height:2;letter-spacing:.03em}
.colo-col ul a{text-decoration:none;border-bottom:1px dotted var(--ink-muted)}
.colo-col ul a:hover,.colo-col ul a:focus-visible{color:var(--pole-text);border-color:var(--pole-text)}
.colo-col p{font-family:'Josefin Sans',sans-serif;font-size:var(--s--1);line-height:1.85;letter-spacing:.02em;color:var(--ink)}
.colo-col p b{color:var(--pole-text);font-weight:600}
.subnote{font-size:var(--s--2);line-height:1.7;color:var(--ink-muted)}
.bigfoot{font-family:'Yeseva One',serif;font-size:var(--s-5);line-height:.92;letter-spacing:.01em;
  margin-top:clamp(2rem,6vw,4rem);white-space:nowrap;width:max-content;max-width:112%;position:relative;z-index:2}
.foot-meta{margin-top:1.4rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-family:'Josefin Sans',sans-serif;font-size:var(--s--2);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted)}

/* ============================================================
   GREEN HOUR TAROT extensions (the daily-card surface).
   The frame, the conservatory mount, the reversed flip, the
   archive, the reading. Everything below is the only thing that
   differs from the GREEN HOUR house style above.
   ============================================================ */
.tarot-stage{max-width:560px;margin:0 auto;width:100%}
.card-art{position:relative;overflow:hidden;border-radius:var(--rad);
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--ochre) 72%,transparent),0 18px 50px rgba(0,0,0,.34)}
.card-art img{display:block;width:100%;height:auto}
.card-art.reversed img{transform:rotate(180deg)}            /* literal flip, static */
.card-cap{font-family:'Josefin Sans',sans-serif;font-size:var(--s--1);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-muted);display:flex;gap:.6em;flex-wrap:wrap;
  align-items:baseline;justify-content:center;margin-top:1.1rem}
.card-cap .nm{color:var(--ink);font-weight:600}
.rev-mark{color:var(--rose-ink);border:1px solid var(--rose-deep);border-radius:999px;
  padding:.08em .6em;font-size:var(--s--2);letter-spacing:.16em}     /* marker, never on the art */
.room--conservatory .rev-mark{color:var(--absinthe);border-color:var(--absinthe)}
.card-keyword{font-family:'Josefin Sans',sans-serif;font-size:var(--s--1);letter-spacing:.12em;
  text-transform:uppercase;color:var(--pole-text);text-align:center;margin-top:.75rem}
.reading{font-family:'Josefin Slab',Georgia,serif;font-weight:500;font-style:italic;
  font-size:var(--s-1);line-height:1.55;max-width:52ch;margin:1.3rem auto 0;text-align:center;color:var(--ink)}
.draw-count{font-family:'Josefin Sans',sans-serif;font-size:var(--s--1);letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-muted)}
.archive .plate-img img.reversed{transform:rotate(180deg)}
.archive figcaption .rt{color:var(--rose-ink)}
.nav-row{display:flex;gap:1rem;flex-wrap:wrap;justify-content:space-between;margin-top:2rem;
  font-family:'Josefin Sans',sans-serif;font-size:var(--s--1);letter-spacing:.08em;text-transform:uppercase}
.nav-row a{text-decoration:none;border-bottom:1px dotted var(--ink-muted)}
.nav-row a:hover,.nav-row a:focus-visible{color:var(--pole-text);border-color:var(--pole-text)}
.permalink-link{font-family:'Josefin Sans',sans-serif;font-size:var(--s--1);letter-spacing:.1em;
  text-transform:uppercase;text-decoration:none;border-bottom:1px dotted currentColor}

/* ============================================================
   GREEN HOUR TAROT v2: jade-emerald two-column hero with a deco
   sunburst behind a specimen-plate card, a small plate archive
   (the framing and sheen hover from the green specimen plates),
   a non-disappearing glow wordmark, and a real footer.
   Deco geometry meets nouveau line.
   ============================================================ */
:root{
  --emerald:#2FB389; --emerald-deep:#1F7A5C; --emerald-ink:#14533B; --emerald-hi:#6FF0C2;
  --jade:#0C1A14; --jade-2:#11241B; --jade-3:#1A3328;
  --gilt-hi:#F0E2C0; --gilt:#E8C766; --gilt-base:#C9A227; --gilt-deep:#9A7B1E;
}
.room--jade{--ground:#0C1A14;--ground-2:#11241B;--ground-3:#1A3328;
  --ink:#ECF3EE;--ink-muted:#A9B8AF;--hair:rgba(236,243,238,.14);
  --pole:var(--emerald);--pole-2:var(--ochre);--pole-text:var(--emerald);--focus:#3FD7A3}

/* the gilded gold wordmark (Cinzel), non-disappearing: repeat-tiled gradient
   so the glyphs are always fully covered, with a slow glow pulse */
.goldmark{
  font-family:'Playfair Display',Georgia,serif;font-weight:800;line-height:1;letter-spacing:.01em;
  background-image:linear-gradient(100deg,
    var(--gilt-deep) 0%,var(--gilt-base) 18%,var(--gilt-hi) 36%,var(--gilt) 50%,
    var(--gilt-hi) 64%,var(--gilt-base) 82%,var(--gilt-deep) 100%);
  background-size:200% 100%;background-repeat:repeat;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.3)) drop-shadow(0 0 10px color-mix(in srgb,var(--gilt-hi) 34%,transparent))}
@media (prefers-reduced-motion:no-preference){
  .goldmark{animation:gold-shift 12s linear infinite,gold-glow 5s ease-in-out infinite alternate}}
@keyframes gold-shift{from{background-position:0 0}to{background-position:200% 0}}
@keyframes gold-glow{
  from{filter:drop-shadow(0 1px 0 rgba(0,0,0,.3)) drop-shadow(0 0 6px color-mix(in srgb,var(--gilt) 26%,transparent))}
  to{filter:drop-shadow(0 1px 0 rgba(0,0,0,.3)) drop-shadow(0 0 18px color-mix(in srgb,var(--gilt-hi) 52%,transparent))}}

/* two-column hero */
/* tiny wtfjane brand eyebrow: a gold cicada + lowercase wordmark sitting just
   above the hero h1, linking home. */
.hero .brandmark{display:inline-flex;align-items:center;gap:.5em;text-decoration:none;
  font-family:'Josefin Sans',sans-serif;font-weight:600;font-size:var(--s--1);
  letter-spacing:.26em;text-transform:lowercase;color:var(--ink);line-height:1;margin-bottom:.9rem}
.hero .brandmark .cic-mark{width:1.6em;height:1.45em}
.hero .brandmark:hover,.hero .brandmark:focus-visible{color:var(--emerald-hi)}

.hero{overflow:hidden}
/* let the hero sunburst bleed down into THE TURNING below: a shared dark
   wrapper provides the ground and clips only at its own edges (no page-wide
   scroll), while the hero itself stops clipping so the rays cross the seam. */
.nightfall{position:relative;overflow:hidden;background:var(--jade)}
.nightfall>section{background:transparent}
.nightfall>section::before{content:none}
.nightfall .hero{overflow:visible}
.hero-grid{display:grid;grid-template-columns:1fr;gap:clamp(1.8rem,5vw,3.4rem);align-items:center;position:relative;z-index:1}
@media(min-width:880px){.hero-grid{grid-template-columns:2fr 1fr}}
.hero-copy{min-width:0;position:relative;z-index:1}
.hero-card-col{position:relative;display:flex;justify-content:center;align-items:center;min-height:clamp(340px,50vw,540px)}
.hero-plate{position:relative;z-index:2;width:100%;max-width:392px}

/* deco sunburst behind the card (two counter-rotating ray layers, masked) */
.burst-wrap{position:absolute;inset:0;z-index:0;overflow:visible;pointer-events:none}
.burst{position:absolute;left:50%;top:50%;width:185vmax;height:185vmax;transform:translate(-50%,-50%);transform-origin:50% 50%;
  background:repeating-conic-gradient(from 0deg at 50% 50%,
    color-mix(in srgb,var(--emerald) 20%,transparent) 0deg 2deg,transparent 2deg 8.4deg);
  -webkit-mask:radial-gradient(closest-side,#000 0%,rgba(0,0,0,.4) 38%,transparent 82%);
          mask:radial-gradient(closest-side,#000 0%,rgba(0,0,0,.4) 38%,transparent 82%);opacity:.6}
.burst.gold{background:repeating-conic-gradient(from 3deg at 50% 50%,
    color-mix(in srgb,var(--ochre) 17%,transparent) 0deg 1deg,transparent 1deg 11deg);opacity:.42}
@media (prefers-reduced-motion:no-preference){
  .burst{animation:sun-turn 160s linear infinite}
  .burst.gold{animation:sun-turn 230s linear infinite reverse}}
@keyframes sun-turn{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* tarot plate: the rounded card is self-contained (its own four corners,
   drop shadow and deco-gold ring) and the label floats free below it. The
   ring rides an ::after overlay so it stays above the art and upright while
   the card tilts; the literal reversed flip lives on the image alone. */
.plate--card .plate-img{box-shadow:0 16px 46px rgba(0,0,0,.3)}
.plate--card .plate-img::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--ochre) 70%,transparent)}
.plate-img img.reversed{transform:rotate(180deg)}

/* turning cards: the card rests front-facing (so browsers without the
   animation, and reduced-motion users, simply see the card). the back is
   shown only while the turn-in plays. the hero turns once on load in every
   browser; the archive turns as it scrolls into view where scroll-driven
   animations exist, otherwise it just rests front-facing. */
.cardflip{position:relative;width:100%;perspective:1500px}
.cardflip-inner{position:relative;width:100%;aspect-ratio:940/1401;transform-style:preserve-3d}
.cardflip .plate-img{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.cardflip .plate-front{transform:rotateY(0deg)}
.cardflip .plate-back{transform:rotateY(180deg)}
.cardflip .plate-img img{width:100%;height:100%;object-fit:cover}
@keyframes turn-in{from{transform:rotateY(180deg)}to{transform:rotateY(0deg)}}
@media (prefers-reduced-motion:no-preference){
  .cardflip--load .cardflip-inner{animation:turn-in 1.1s cubic-bezier(.2,.8,.2,1) both}
}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .cardflip--view .cardflip-inner{animation:turn-in 1s linear both;
      animation-timeline:view();animation-range:entry 8% entry 70%}
  }
}

/* hero left column: keyword and reading aligned left, on jade */
.hero .card-keyword{color:var(--emerald);text-align:left;margin-top:.9rem}
.hero .reading{color:var(--ink);text-align:left;margin:.9rem 0 0;max-width:none;
  font-family:'Josefin Slab',Georgia,serif;font-style:normal;font-weight:500;font-size:calc(var(--s-1) * 1.16);line-height:1.6}
.hero .draw-count .dt{color:var(--ink-muted)}

/* mobile (single column): the card turns directly under the title + subtitle,
   above the draw count and reading. hero-copy is dissolved so its parts can be
   ordered around the card; its parts keep z-index above the sunburst. the
   two-column desktop layout (>=880px) is untouched. */
@media(max-width:879.98px){
  .hero .hero-grid{display:flex;flex-direction:column;gap:0;align-items:stretch}
  .hero .hero-copy{display:contents}
  .hero .hero-copy>*{position:relative;z-index:1}
  .hero .hero-copy>.brandmark{order:0}
  .hero .hero-copy>.wordmark{order:1}
  .hero .hero-copy>.hero-sub{order:2}
  .hero .hero-copy>.draw-count{order:3}
  .hero .hero-copy>.card-keyword{order:4}
  .hero .hero-card-col{order:5;margin:clamp(1.4rem,5vw,2.2rem) 0 .4rem}
  .hero .hero-copy>.reading{order:6}
  .hero .hero-copy>.nav-row{order:7}
}

/* small plate archive: same plate framing and sheen, smaller and centered */
.archive-head{max-width:62ch}
.archive-grid{margin-top:1.9rem;display:grid;gap:clamp(1rem,2.4vw,1.6rem);justify-content:center;
  grid-template-columns:repeat(auto-fill,minmax(170px,210px))}
.archive-grid figure{margin:0}
.archive-grid .plate-img{border-radius:7px}
.archive-grid figcaption{text-align:left;line-height:1.5}
.archive-grid figcaption .rt{color:var(--rose-ink)}
.plate--card .rt{color:var(--rose)}

/* THE CARD: the standing upright/reversed meaning, a reference block under the
   day's bespoke reading. Two framed panels, the drawn orientation flagged. */
/* full width; heading + lede sit above the two panels (eyebrow + rule span the full
   width). The two panels sit side by side on desktop; each is image-left / text-right. */
.card-meaning .meaning-pair{margin-top:1.9rem;display:grid;gap:clamp(1.2rem,2.6vw,2rem);
  grid-template-columns:minmax(0,1fr)}
@media(min-width:680px){.card-meaning .meaning-pair{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
/* each panel: image left, text right, top-aligned. flex-wrap drops the text under the
   image only when the panel is too narrow (small screens). Image kept at 360px. */
.meaning{display:flex;flex-wrap:wrap;align-items:flex-start;gap:clamp(1rem,2.2vw,1.6rem);
  border:var(--edge) solid color-mix(in srgb,var(--pole) 38%,transparent);border-radius:var(--rad);
  background:color-mix(in srgb,var(--ground-2) 45%,transparent);padding:clamp(1.2rem,3vw,1.6rem)}
.meaning-card{flex:0 0 auto;width:min(360px,100%)}
.meaning-card img{display:block;width:100%;height:auto;border-radius:8px;
  box-shadow:0 3px 16px rgba(0,0,0,.42)}
.meaning-card img.reversed{transform:rotate(180deg)}   /* literal flip: shows what "reversed" looks like */
.meaning-body{flex:1 1 240px;min-width:0}
.meaning-or{font-family:'Josefin Sans',sans-serif;font-size:var(--s--2);letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-muted);display:flex;gap:.7em;align-items:center;flex-wrap:wrap}
.meaning .m-drawn{font-size:.82em;letter-spacing:.06em;color:var(--ground);background:var(--pole);
  border-radius:999px;padding:.18em .7em}        /* badge in the deck's own accent, not the shared rose */
.meaning-kw{font-family:'Josefin Sans',sans-serif;font-size:var(--s--1);letter-spacing:.1em;
  text-transform:uppercase;color:var(--pole);margin:.75rem 0 .5rem}   /* category in the deck accent */
.meaning-text{font-family:inherit;font-size:var(--s-0);line-height:1.62;color:var(--ink)}  /* the deck's own body face */
/* MORE FROM: nearby cards, so every card carries several internal links */
.card-more .archive-grid{margin-top:1.4rem}

/* THE METHOD: how a card is drawn, with a pure-CSS flip of the card back */
.method-grid{display:grid;grid-template-columns:1fr;gap:clamp(1.8rem,5vw,3.4rem);align-items:center}
@media(min-width:880px){.method-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.9fr)}}
.method-card-col{display:flex;flex-direction:column;align-items:center;gap:1.1rem;order:-1}
@media(min-width:880px){.method-card-col{order:0}}
.method-copy{min-width:0}
.method-copy .lede{max-width:none}
.method-p{font-family:'Josefin Slab',Georgia,serif;font-weight:500;font-size:var(--s-1);
  line-height:1.55;color:var(--ink);max-width:none;margin-top:1rem}
.flip{perspective:1500px;width:100%;max-width:300px;background:none;border:0;padding:0;cursor:pointer}
.flip-inner{position:relative;width:100%;aspect-ratio:940/1401;transform-style:preserve-3d;transition:none}
@media(prefers-reduced-motion:no-preference){.flip-inner{transition:transform 1s cubic-bezier(.2,.8,.2,1)}}
.flip:hover .flip-inner,.flip:focus-within .flip-inner{transform:rotateY(180deg)}
.flip-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border-radius:12px;overflow:hidden;background:var(--ground-2);box-shadow:0 18px 50px rgba(0,0,0,.34)}
.flip-face img{display:block;width:100%;height:100%;object-fit:cover}
.flip-face::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--ochre) 70%,transparent)}
.flip-front{transform:rotateY(180deg)}
.flip:focus{outline:none}
.flip:focus-visible{outline:3px solid var(--focus);outline-offset:7px;border-radius:16px}
.flip-hint{font-family:'Josefin Sans',sans-serif;font-size:var(--s--2);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-muted)}

/* real footer */
.site-foot{background:var(--jade);color:#ECF3EE;padding:clamp(2.6rem,6vw,4.2rem) var(--margin) clamp(1.6rem,4vw,2.4rem);
  position:relative;border-top:2px solid color-mix(in srgb,var(--ochre) 50%,transparent)}
.foot-top{display:grid;gap:clamp(1.2rem,3vw,1.9rem);grid-template-columns:1fr}
/* >=1100px: brand on the left, a flexible slack column, then The Decks / The Draw /
   The Turning packed on the right. Below 1100 it all stacks to a single column
   (The Decks' sub-columns included) -- the multi-column footer gets crowded narrower. */
@media(min-width:1100px){
  .foot-top{grid-template-columns:minmax(18rem,28rem) 1fr auto auto auto;gap:clamp(1.5rem,3vw,2.6rem)}
  .foot-decks{grid-column-start:3}
}
.foot-decks-cols{display:grid;grid-template-columns:1fr}
@media(min-width:1100px){
  .foot-decks-cols{grid-template-columns:max-content max-content;gap:clamp(1rem,2.2vw,1.6rem)}
}
.foot-decks .soon{opacity:.45}   /* a deck that hasn't launched yet: plain text, not a link */
.foot-brand .fw{font-size:var(--s-2);line-height:1;display:inline-block;text-decoration:none}
.foot-brand p{font-family:'Josefin Slab',serif;font-style:italic;font-size:var(--s-1);color:#A9B8AF;margin-top:.7rem;max-width:46ch}
.foot-col h2{font-family:'Josefin Sans',sans-serif;font-weight:600;font-size:var(--s--1);line-height:1.2;letter-spacing:.18em;text-transform:uppercase;color:var(--emerald);margin:0 0 .8rem}
.foot-col a,.foot-col span{display:block;font-family:'Josefin Sans',sans-serif;font-size:var(--s-0);letter-spacing:.03em;color:#ECF3EE;text-decoration:none;line-height:2.0}
.foot-col a{border-bottom:1px dotted transparent;width:max-content}
.foot-col a:hover,.foot-col a:focus-visible{border-color:var(--emerald);color:var(--emerald-hi)}
.foot-rule{margin:clamp(1.6rem,4vw,2.4rem) 0 0;border:0;border-top:1px solid rgba(236,243,238,.14)}
/* the 404 cicada, tiny and gilt, as the footer divider */
:root{--cic:url("data:image/png;base64,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")}
.cic-div{display:inline-block;width:1.5em;height:1.3em;vertical-align:-.26em;margin:0 .12em;
  background:linear-gradient(155deg,var(--gilt-hi),var(--gilt) 48%,var(--gilt-base));
  -webkit-mask:var(--cic) center/contain no-repeat;mask:var(--cic) center/contain no-repeat}
/* the same cicada, larger, perched at the left of an eyebrow; one tint each */
.cic-mark{display:inline-block;width:1.5em;height:1.35em;flex:none;
  -webkit-mask:var(--cic) center/contain no-repeat;mask:var(--cic) center/contain no-repeat}
.cic-gilt{background:linear-gradient(150deg,var(--gilt-hi),var(--gilt) 48%,var(--gilt-base))}
.cic-sage{background:linear-gradient(150deg,var(--sage),var(--sage-deep) 55%,var(--sage-ink))}
.foot-meta2{margin:1.1rem 0 0;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-family:'Josefin Sans',sans-serif;font-size:var(--s--2);letter-spacing:.1em;text-transform:uppercase;color:#A9B8AF}
.foot-meta2 a{color:inherit;text-decoration:none}
.foot-meta2 a:hover,.foot-meta2 a:focus-visible{color:var(--emerald-hi)}

/* deck index pages: a quiet top-right hamburger to jump between decks (zero JS).
   It sits over the dark hero on every deck, so it uses light glass, not theme ink. */
@keyframes nav-reveal{from{opacity:0}to{opacity:1}}
.deck-nav{position:absolute;top:clamp(.85rem,2.5vw,1.4rem);right:clamp(.85rem,3vw,1.8rem);z-index:60}
@media (prefers-reduced-motion:no-preference){.deck-nav{animation:nav-reveal .55s ease 2.3s backwards}}
.menu-btn{list-style:none;cursor:pointer;display:inline-flex;flex-direction:column;justify-content:center;
  gap:5px;width:40px;height:36px;padding:9px 8px;background:none;border:0;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.55))}
.menu-btn::-webkit-details-marker{display:none}
.menu-btn span{display:block;height:2px;width:100%;border-radius:2px;background:rgba(245,242,255,.9)}
.deck-menu[open] .menu-btn span,.menu-btn:hover span,.menu-btn:focus-visible span{background:#fff}
.deck-menu-list{position:absolute;right:0;top:calc(100% + .5rem);display:flex;flex-direction:column;min-width:200px;
  padding:.5rem;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(12,10,20,.97);
  box-shadow:0 22px 55px rgba(0,0,0,.6)}
.deck-menu-list a{display:flex;align-items:center;padding:.6rem .7rem;border-radius:8px;text-decoration:none;
  font-family:'Josefin Sans',system-ui,sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.1em;
  font-size:var(--s--1);color:rgba(245,242,255,.9)}
.deck-menu-list a:hover,.deck-menu-list a:focus-visible{color:var(--accent,#fff);
  background:color-mix(in srgb,var(--accent,#fff) 18%,transparent)}
.deck-menu-list .dm-head{font-weight:700;color:rgba(245,242,255,.96);letter-spacing:.16em;border-radius:8px 8px 0 0;
  border-bottom:1px solid rgba(255,255,255,.14);margin-bottom:.25rem;padding-bottom:.6rem}
.deck-menu-list .dm-deck{padding-left:1.5rem;color:rgba(245,242,255,.66);border-radius:0;
  font-family:var(--wm,'Josefin Sans',sans-serif)}
.deck-menu-list a:last-child{border-radius:0 0 8px 8px}

/* deck-index Type filter (zero-JS). Chip visuals come from facets.css; these are the
   container-scoped filter rules. Selecting a suit/arcana hides non-matching plates. */
.deck-archive .facet{margin-top:1.6rem}
.deck-archive:has(#df-type-major:checked) .plate:not(.c-type-major){display:none}
.deck-archive:has(#df-type-cups:checked) .plate:not(.c-type-cups){display:none}
.deck-archive:has(#df-type-pentacles:checked) .plate:not(.c-type-pentacles){display:none}
.deck-archive:has(#df-type-swords:checked) .plate:not(.c-type-swords){display:none}
.deck-archive:has(#df-type-wands:checked) .plate:not(.c-type-wands){display:none}

/* keep hero copy on its own stable GPU layer so the hero text (draw-count, keyword,
   etc.) does not transiently flicker during fast scroll over the animated sunburst */
.hero-copy{transform:translateZ(0)}
.hero .hero-copy>*{transform:translateZ(0)}

/* deck index -> its gallery facet page */
.archive-gallery-link{margin-top:1.6rem;font-size:var(--s--1)}
.archive-gallery-link a{color:inherit;padding-bottom:1px;
  border-bottom:1px solid color-mix(in srgb,var(--pole,currentColor) 55%,transparent)}
.archive-gallery-link a:hover,.archive-gallery-link a:focus-visible{color:var(--pole,inherit)}