/* Home Ground: kind.padma.nz
   Builds on site.css (tokens, fonts, header, footer, buttons). */

:root{
  --leaf:#8FA57E;
  --leaf-deep:#5C7352;
  --sheet:760px;
}

.vh{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.no-js .js-only{display:none !important;}
.print-only,.print-head,.print-foot{display:none;}

/* very narrow phones: keep the header on one line */
@media (max-width:380px){
  .site-header .brand img{width:150px;}
  .site-header .btn{padding:10px 14px;}
}

/* ---------- Home ---------- */
.hg-intro{padding:clamp(40px, 7vw, 88px) 0 clamp(24px, 4vw, 40px);}
.hg-intro h1{margin-bottom:20px;}
.hg-intro .lead{max-width:30em;margin-bottom:12px;}
.hg-how{max-width:38em;color:var(--ink-2);}

.hg-figure{margin:0;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:#EEF2EE;}
.hg-scene{display:block;width:100%;height:auto;aspect-ratio:1280 / 704;}
.hg-room{cursor:pointer;}
.hg-room .hit{fill:transparent;stroke:transparent;stroke-width:5;transition:stroke .15s, fill .15s;}
.hg-room:hover .hit,.hg-room:focus .hit{stroke:var(--vermilion);fill:rgba(240,132,105,0.08);}
.hg-pill rect{fill:var(--white);stroke:var(--line-strong);stroke-width:1.4;transition:stroke .15s;}
.hg-pill circle{fill:var(--vermilion-deep);}
.hg-pill .n{fill:var(--white);font:600 15px var(--sans);}
.hg-pill .t{fill:var(--ink);font:600 16px var(--sans);}
.hg-room:hover .hg-pill rect{stroke:var(--vermilion);stroke-width:2;}
.hg-badge{display:none;}
.hg-badge circle{fill:var(--vermilion-deep);stroke:var(--white);stroke-width:5;}
.hg-badge text{fill:var(--white);font:600 30px var(--sans);}
/* on small screens the names are too small to read: show big numbers that match the list */
@media (max-width:700px){
  .hg-pill{display:none;}
  .hg-badge{display:inline;}
  .hg-figure{border-radius:12px;}
}

.hg-rooms{padding:clamp(28px, 4vw, 48px) 0 clamp(48px, 7vw, 88px);}
.room-cards{list-style:none;margin:0;padding:0;display:grid;gap:16px;counter-reset:room;}
@media (min-width:640px){ .room-cards{grid-template-columns:repeat(2, minmax(0, 1fr));} }
@media (min-width:1000px){ .room-cards{grid-template-columns:repeat(3, minmax(0, 1fr));} }
.room-card{position:relative;background:var(--white);border:1px solid var(--line);border-radius:14px;padding:20px 22px 20px;
  transition:border-color .15s, box-shadow .15s;}
.room-card:hover{border-color:var(--line-strong);box-shadow:0 8px 24px rgba(46,43,39,0.07);}
.room-link{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:16px;align-items:center;
  text-decoration:none;color:var(--ink);}
.room-link::after{content:"";position:absolute;inset:0;border-radius:14px;}
.room-link:focus-visible{outline:none;}
.room-link:focus-visible::after{outline:2px solid var(--vermilion-deep);outline-offset:3px;}
.room-icon{grid-row:1 / span 2;width:56px;height:56px;}
.room-n{position:absolute;top:14px;right:16px;font-family:var(--mono);font-weight:500;font-size:0.8rem;color:var(--ink-2);}
.room-name{font-family:var(--serif);font-weight:500;font-size:1.45rem;line-height:1.2;}
.room-theme{font-family:var(--mono);font-weight:500;font-size:0.72rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--vermilion-deep);}
.room-card:hover .room-name{color:var(--vermilion-deep);}
.room-items{list-style:none;margin:14px 0 0;padding:12px 0 0;border-top:1px solid var(--line);font-size:0.98rem;line-height:1.45;color:var(--ink-2);}
.room-items li{padding:3px 0 3px 16px;position:relative;}
.room-items li::before{content:"";position:absolute;left:0;top:0.72em;width:7px;height:7px;border-radius:50%;background:var(--coral);}

.hg-about{padding:var(--section) 0;background:var(--sand);border-top:1px solid var(--line);}
.hg-about-grid{display:grid;gap:clamp(32px, 5vw, 64px);align-items:start;}
@media (min-width:900px){ .hg-about-grid{grid-template-columns:minmax(0, 1.1fr) minmax(0, 0.9fr);} }
.hg-about h2{margin-bottom:20px;}
.hg-about p{max-width:34em;}
.hg-about .urgent{margin-top:0;}

/* help box (shared): an h2 here, sized like the site's h3 version */
.hg-help h2{font-size:1.3rem;margin:0 0 8px;}

/* ---------- Room pages ---------- */
.room-head{padding:clamp(32px, 6vw, 72px) 0 clamp(24px, 4vw, 40px);}
.room-head-grid{display:grid;gap:clamp(24px, 5vw, 56px);align-items:center;}
@media (min-width:820px){ .room-head-grid{grid-template-columns:minmax(0, 0.95fr) minmax(0, 1.05fr);} }
.room-fig{margin:0;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:#EEF2EE;}
.hg-crop{display:block;width:100%;height:auto;aspect-ratio:4 / 3;}
.room-head h1{margin-bottom:8px;}
.room-head .sub{font-family:var(--serif);font-style:italic;font-size:1.3rem;color:var(--ink-2);margin:0 0 14px;}
.room-head .crumb{margin-bottom:22px;}
.room-head .lead{max-width:26em;}
.room-res{padding:0 0 var(--section);}
.res-list{list-style:none;margin:0;padding:0;display:grid;gap:16px;}
@media (min-width:820px){ .res-list{grid-template-columns:repeat(2, minmax(0, 1fr));} }
.res{position:relative;background:var(--white);border:1px solid var(--line);border-radius:14px;padding:24px 26px;
  transition:border-color .15s, box-shadow .15s;}
.res:hover{border-color:var(--line-strong);box-shadow:0 8px 24px rgba(46,43,39,0.07);}
.res h2{font-size:1.55rem;line-height:1.2;margin:0 0 10px;}
.res h2 a{color:var(--ink);text-decoration:none;}
.res h2 a::after{content:"";position:absolute;inset:0;border-radius:14px;}
.res h2 a:focus-visible{outline:none;}
.res h2 a:focus-visible::after{outline:2px solid var(--vermilion-deep);outline-offset:3px;}
.res:hover h2 a{color:var(--vermilion-deep);}
.res p{color:var(--ink-2);font-size:1rem;line-height:1.6;margin:0 0 12px;}
.res .res-meta{margin:0;font-family:var(--mono);font-weight:500;font-size:0.7rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-2);}

/* the way out at the bottom of rooms and sheets: back first, then keep walking */
.wayout{margin:clamp(32px, 5vw, 48px) 0 0;padding-top:28px;border-top:1px solid var(--line);}
.wayback{display:flex;flex-wrap:wrap;gap:12px;}
.walk-on{margin:18px 0 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 24px;font-size:1rem;line-height:1.4;}
.wo-label{flex-basis:100%;font-family:var(--mono);font-weight:500;font-size:0.7rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-2);}
@media (min-width:560px){ .wo-label{flex-basis:auto;} }
.walk-on a{display:inline-block;padding:4px 0;min-height:24px;color:var(--ink);text-decoration-color:var(--line-strong);}
.walk-on a:hover{color:var(--vermilion-deep);text-decoration-color:currentColor;}
.room-res .urgent,.sheet-after .urgent{margin-top:clamp(28px, 4vw, 40px);}

/* ---------- Sheets ---------- */
.sheet,.sheet-after{max-width:calc(var(--sheet) + 2 * var(--gutter));margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter);}
.sheet{padding-top:clamp(28px, 5vw, 56px);}
.sheet-after{padding-bottom:var(--section);}
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 26px;font-family:var(--mono);font-weight:500;font-size:0.74rem;
  letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-2);}
.crumb a{color:var(--ink-2);text-decoration:none;display:inline-flex;align-items:center;gap:8px;min-height:24px;}
.crumb a:hover{color:var(--vermilion-deep);text-decoration:underline;}
.crumb-icon{width:22px;height:22px;}
.sheet h1{font-size:clamp(2.2rem, 5vw, 3.2rem);margin-bottom:10px;}
.sheet .sub{font-family:var(--serif);font-style:italic;font-size:1.3rem;color:var(--ink-2);margin:0 0 18px;}
.sheet .lead{margin:14px 0 0;max-width:34em;}
.sheet .term{font-size:1.04em;}

.sh-body{margin-top:clamp(28px, 4vw, 40px);}
.sh-sec{margin:0 0 30px;}
.sh-sec h2{font-size:1.45rem;line-height:1.25;margin:0 0 10px;}
.sh-sec h3{font-size:1.15rem;line-height:1.25;margin:0 0 6px;}
.h-note{display:block;margin-top:4px;font-family:var(--sans);font-size:1rem;line-height:1.5;color:var(--ink-2);}
.sh-sec p{margin:0 0 10px;}
.sh-sec p:last-child{margin-bottom:0;}
.sh-list{list-style:none;margin:0 0 10px;padding:0;}
.sh-list li{position:relative;padding:5px 0 5px 20px;line-height:1.6;}
.sh-list li::before{content:"";position:absolute;left:2px;top:0.95em;width:7px;height:7px;border-radius:50%;background:var(--coral);}
.sh-steps{list-style:none;margin:0 0 10px;padding:0;counter-reset:step;}
.sh-steps > li{position:relative;padding:8px 0 8px 44px;line-height:1.6;counter-increment:step;}
.sh-steps > li::before{content:counter(step);position:absolute;left:0;top:7px;width:30px;height:30px;border-radius:50%;
  background:var(--vermilion-deep);color:var(--white);font:600 0.95rem/30px var(--sans);text-align:center;}
.sh-steps .t{font-family:var(--mono);font-weight:500;font-size:0.8em;color:var(--vermilion-deep);letter-spacing:0.04em;}
.sh-big > li{padding-top:12px;padding-bottom:12px;font-size:1.06em;}
.sh-cards{display:grid;gap:12px;}
@media (min-width:620px){ .sh-cards{grid-template-columns:1fr 1fr;} }
.sh-card{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:16px 18px;}
.sh-card p{font-size:1rem;line-height:1.6;color:var(--ink-2);}
.sh-box{background:var(--sand);border:1px solid var(--line);border-radius:14px;padding:20px 22px;}
.sh-quote{font-family:var(--serif);font-size:1.4rem;line-height:1.4;color:var(--ink);margin:0 0 30px;padding-left:18px;border-left:2px solid var(--vermilion);}
.sh-eg li{font-family:var(--serif);font-size:1.08em;}
.eg-intro{color:var(--ink-2);}
.sh-credit{font-size:0.92rem;line-height:1.55;color:var(--ink-2);border-top:1px solid var(--line);padding-top:14px;margin:8px 0 0;}
.sign{margin:28px 0 0;font-family:var(--mono);font-weight:500;font-size:0.72rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-2);}

/* write-in lines (for the printed copy; on screen they show what to fill in) */
.sh-card-mine{background:var(--white);border:1px dashed var(--line-strong);border-radius:14px;padding:18px 22px;}
.write{display:flex;align-items:flex-end;gap:10px;margin:0 0 4px;min-height:2.1em;}
.w-label{flex:none;font-size:0.95rem;color:var(--ink-2);}
.w-line{flex:1;border-bottom:1px solid var(--line-strong);min-width:2em;}
.mine-grid{display:grid;gap:0 28px;}
@media (min-width:620px){ .mine-grid{grid-template-columns:1fr 1fr;} }
.sh-sec h2 + p + h2,.sh-sec p + h2{margin-top:18px;}

/* small diagrams */
.sh-figure{margin:clamp(24px, 4vw, 36px) 0 0;background:var(--white);border:1px solid var(--line);border-radius:14px;padding:16px 18px 10px;}
.sh-fig{display:block;width:100%;height:auto;max-width:600px;margin:0 auto;overflow:visible;}
.sh-fig .f-t{font:400 13px var(--sans);fill:var(--ink-2);}
.sh-fig .f-b{font:600 14px var(--sans);fill:var(--ink);}
.sh-figure-in{margin:14px 0 14px;}

.sheet-after .sh-actions{display:flex;flex-wrap:wrap;gap:12px;margin:clamp(32px, 5vw, 48px) 0 0;padding-top:28px;border-top:1px solid var(--line);}
.sheet-after .wayout{margin-top:32px;}

/* ---------- Breathing pacer ---------- */
@media screen{ .sheet-slow-breathing .sh-figure{display:none;} }   /* the pacer shows the rhythm on screen */
.pacer{margin:0 0 30px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(20px, 4vw, 32px);display:grid;gap:20px;justify-items:center;text-align:center;}
.pacer-stage{position:relative;width:min(260px, 70vw);aspect-ratio:1;display:grid;place-items:center;}
.pacer-ring{position:absolute;inset:0;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;}
.pacer-dot{width:100%;height:100%;border-radius:50%;background:radial-gradient(circle at 50% 45%, #F7B8A5, var(--coral));
  transform:scale(0.42);will-change:transform;}
.pacer-word{position:relative;margin:0;font-family:var(--serif);font-size:1.6rem;color:var(--ink);}
.pacer.is-running .pacer-word{color:var(--white);text-shadow:0 1px 8px rgba(151,48,22,0.35);}
.pacer-controls{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:center;}
.pacer-pace{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;}
.pacer-pace legend{float:left;margin-right:6px;font-family:var(--mono);font-weight:500;font-size:0.72rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-2);}
.pacer-pace label{display:inline-flex;align-items:center;gap:6px;min-height:44px;cursor:pointer;}
.pacer-pace input{width:18px;height:18px;accent-color:var(--vermilion-deep);}
.pacer-note{margin:0;font-size:0.95rem;color:var(--ink-2);}
.pn-still{display:none;}
/* reduced motion: the circle stays still and only the words change */
@media (prefers-reduced-motion: reduce){
  .pacer-dot{transform:scale(0.8) !important;}
  .pacer.is-running .pacer-word{color:var(--ink);text-shadow:none;}
  .pacer-dot{background:#FBE3DA;}
  .pn-move{display:none;}
  .pn-still{display:inline;}
}

/* ---------- RAIN ---------- */
.rain-scene{background:var(--sand);border:1px solid var(--line);border-radius:12px;padding:14px 18px;font-family:var(--serif);font-size:1.12rem;}
.eg-label{display:block;font-family:var(--mono);font-weight:500;font-size:0.68rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--vermilion-deep);margin-bottom:4px;}
.rain-steps{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:14px;}
.rain-step{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:20px 22px;display:grid;gap:14px;}
@media (min-width:700px){ .rain-step{grid-template-columns:minmax(0, 1.25fr) minmax(0, 0.75fr);gap:24px;} }
.rain-head{display:flex;align-items:baseline;gap:14px;margin:0 0 6px;}
.rain-letter{font-family:var(--serif);font-weight:500;font-size:3rem;line-height:1;color:var(--vermilion);}
.rain-word{font-family:var(--serif);font-weight:500;font-size:1.6rem;line-height:1.2;}
.rain-q{font-family:var(--serif);font-style:italic;font-size:1.15rem;color:var(--ink);}
.rain-eg{border-left:2px solid var(--coral);padding-left:14px;align-self:start;}
.rain-eg p{font-family:var(--serif);font-size:1.05rem;line-height:1.5;color:var(--ink);margin:0;}
/* step-through on screen, when scripts run */
.rain-tabs{display:none;}
.js .rain.is-stepper .rain-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0;}
.rain-tab{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;border:1px solid var(--line-strong);border-radius:999px;
  background:var(--paper);color:var(--ink);font:500 0.98rem var(--sans);cursor:pointer;}
.rain-tab b{font-family:var(--serif);font-weight:500;font-size:1.2rem;color:var(--vermilion-deep);}
.rain-tab[aria-current="step"]{background:var(--ink);border-color:var(--ink);color:var(--white);}
.rain-tab[aria-current="step"] b{color:var(--coral);}
.js .rain.is-stepper .rain-step{display:none;}
.js .rain.is-stepper .rain-step.is-current{display:grid;}
.rain-move{display:none;}
.js .rain.is-stepper .rain-move{display:flex;justify-content:space-between;gap:12px;margin-top:14px;}
.rain-move .btn:disabled{opacity:0.4;cursor:default;pointer-events:none;}

/* ---------- Print: one side of A4 per sheet ---------- */
@page{size:A4;margin:12mm 14mm 11mm;}
@media print{
  html,body{background:#fff;}
  body{font-size:9.6pt;line-height:1.42;color:var(--ink);}
  .site-header,.site-footer,.skip,.sheet-after,.crumb,.sign,.pacer,.rain-tabs,.rain-move,.hg-help,.room-nav{display:none !important;}
  a{color:inherit;text-decoration:none;}
  .print-only{display:block;}
  /* each sheet's type size is fitted to the page by the build (--ps) */
  .sheet{font-size:var(--ps, 9.6pt);max-width:none;padding:0;margin:0;display:flex;flex-direction:column;min-height:270mm;}
  .print-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:4mm;margin-bottom:5mm;border-bottom:0.6pt solid var(--line-strong);}
  .print-head img{width:44mm;height:auto;}
  .print-head span{font-family:var(--mono);font-weight:500;font-size:7pt;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-2);}
  .rule{margin-bottom:3mm;width:16px;}
  .sheet h1{font-size:23pt;line-height:1.05;margin:0 0 1mm;}      /* titles stay the same size across the set */
  .sheet .sub{font-size:12.5pt;margin:0 0 1mm;}
  .sheet .lead{font-size:1.1em;line-height:1.45;margin:2mm 0 0;max-width:none;}
  .sh-figure{margin:3mm 0 0;padding:1.5mm 4mm 0.5mm;border-radius:3mm;break-inside:avoid;}
  .sh-fig{max-height:7.4em;width:auto;}
  .mine-grid{grid-template-columns:1fr 1fr;gap:0 7mm;}
  .sh-figure-in{display:none;}            /* the wave is for the screen; the words carry it on paper */
  .sh-sec p + h2{margin-top:2.4mm;}
  .sh-body{margin-top:4mm;columns:2;column-gap:7mm;}
  .sh-sec{margin:0 0 3.4mm;break-inside:avoid;}
  .sh-wide,.sh-quote,.sh-card-mine,.sh-credit{column-span:all;}
  .sh-sec h2{font-size:1.25em;margin:0 0 1.2mm;}
  .sh-sec h3{font-size:1.04em;margin:0 0 0.6mm;}
  .sh-sec p{margin:0 0 1.4mm;}
  .sh-list li{padding:0.5mm 0 0.5mm 1.06em;line-height:1.38;}
  .sh-list li::before{width:0.44em;height:0.44em;top:0.68em;left:0.1em;}
  .sh-steps > li{padding:0.8mm 0 0.8mm 2.06em;line-height:1.38;}
  .sh-steps > li::before{width:1.36em;height:1.36em;font-size:0.78em;line-height:1.75em;width:1.75em;height:1.75em;top:0.26em;}
  .sh-wide .sh-steps{columns:2;column-gap:7mm;}
  .sh-list-2{columns:2;column-gap:7mm;}
  .sh-list-2 li{break-inside:avoid;}
  .sh-rules{display:grid;grid-template-columns:repeat(3, 1fr);gap:0 6mm;margin:0;}
  .sh-wide .sh-steps > li{break-inside:avoid;}
  .sh-big > li{font-size:1em;}
  .sh-cards{grid-template-columns:repeat(3, 1fr);gap:2.4mm;}
  .sh-card{padding:2mm 3mm;border-radius:2.4mm;}
  .h-note{display:inline;margin:0 0 0 2mm;font-size:0.75em;}
  .sh-card p{font-size:0.92em;line-height:1.36;}
  .sh-box{padding:2.6mm 3.6mm;border-radius:2.6mm;}
  .sh-quote{font-size:1.25em;margin:0 0 3.4mm;padding-left:3mm;}
  .sh-credit{font-size:0.82em;padding-top:1.6mm;margin:1mm 0 0;}
  .sh-card-mine{padding:2.4mm 4mm 1.6mm;border-radius:2.6mm;break-inside:avoid;}
  .sh-card-mine h2{font-size:1.15em;}
  .write{min-height:1.9em;margin:0;}
  .w-label{font-size:0.9em;}
  .rain-scene{font-size:1.08em;padding:2.4mm 3.6mm;border-radius:2.4mm;margin:0;}
  .rain-steps{margin-top:2mm;gap:1.6mm;}
  .rain-step{display:grid !important;grid-template-columns:1.3fr 0.7fr;gap:5mm;padding:2mm 3.6mm;border-radius:2.4mm;break-inside:avoid;}
  .rain-step p{margin:0 0 0.4mm;line-height:1.36;}
  .rain-letter{font-size:1.67em;}
  .rain-word{font-size:1.25em;}
  .rain-head{margin:0 0 0.6mm;gap:3mm;}
  .rain-q{font-size:1.08em;}
  .rain-eg{padding-left:3mm;}
  .rain-eg p{font-size:0.98em;}
  .eg-label{font-size:0.67em;margin-bottom:0.6mm;}
  .print-foot{display:block;margin-top:auto;padding-top:2.6mm;border-top:0.6pt solid var(--line-strong);font-size:7.2pt;line-height:1.45;color:var(--ink-2);}
  .print-foot p{margin:0;}
  .print-foot b{color:var(--ink);font-weight:600;}
}