/* ─────────────────────────────────────────────────────────────
   breather.css · the breather (2026-10-01; was wtf.css). Logic: js/breather.js.
   A big sibling of the tangent stickers in js/chrome.js: paper,
   a white die-cut border, a tilt, a corner you can lift. Loads on
   every page after css/age.css. Tokens from css/type.css; the
   button and the sheet carry their own paper and ink so the dark
   home page cannot flip them.
   ───────────────────────────────────────────────────────────── */

/* ── The button: a small paper sticker, bottom-right ── */
.rk-breather-btn {
  position: fixed; z-index: 9450;
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  height: 36px; min-width: 44px; padding: 0 .95em 0 .95em; margin: 0;
  border: 0; border-radius: 2px;
  background: #FCFCFA; color: #111110;
  font: 400 var(--mono-a, 11px)/1 var(--mono, ui-monospace, Menlo, monospace);
  letter-spacing: var(--mono-a-track, .22em); text-transform: uppercase; text-indent: .1em;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none;
  transform: rotate(1.5deg); transform-origin: 50% 60%;
  box-shadow:
    inset 0 0 0 1px rgba(17,17,16,.22),
    0 0 0 3px #fff,
    0 0 0 3.5px rgba(14,14,12,.14),
    0 8px 18px -8px rgba(14,14,12,.5);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), background-color .2s ease, color .2s ease;
}
.rk-breather-btn:hover, .rk-breather-btn:focus-visible {
  background: #111110; color: #FCFCFA; outline: none;
  transform: rotate(0deg) translateY(-2px);
  box-shadow:
    inset 0 0 0 1px rgba(252,252,250,.18),
    0 0 0 3px #fff,
    0 0 0 3.5px rgba(14,14,12,.14),
    0 12px 22px -8px rgba(14,14,12,.6);
}
.rk-breather-btn:focus-visible { outline: 2px solid #E03A1F; outline-offset: 6px; }
.rk-breather-btn:active { transform: rotate(.6deg) translateY(0) scale(.97); }
/* Censored: the label is a bar, drawn exactly like js/age.js draws every other bar. */
.rk-breather-btn .rk-cen { position: relative; display: inline; white-space: nowrap; }
.rk-breather-btn .rk-cen-w {
  color: transparent !important; background: #111110; border-radius: 1px; padding: 0 .06em;
  -webkit-user-select: none; user-select: none;
}
.rk-breather-btn:hover .rk-cen-w, .rk-breather-btn:focus-visible .rk-cen-w { background: #FCFCFA; }
.rk-breather-btn .rk-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Phones: the Index fab owns the corner; this sits above it. */
@media (max-width: 640px) {
  .rk-breather-btn {
    height: 40px;
    bottom: calc(14px + 48px + 10px + env(safe-area-inset-bottom, 0px));
    font-size: var(--mono-a, 11.5px);
  }
}
html.ph-locked .rk-breather-btn { display: none; }
/* The tangent stickers move up so they never land on the button. */
html.rk-breather-on .rk-sticker.pin-corner { bottom: calc(20px + 52px + env(safe-area-inset-bottom, 0px)); }
/* While the sheet is up, the button steps back. */
html.rk-breather-open .rk-breather-btn { pointer-events: none; opacity: 0; transition: opacity .18s ease; }

/* ── The dialog ── */
html.rk-breather-open { overflow: hidden; }
.rk-breather {
  position: fixed; inset: 0; z-index: 9900;
  display: grid; place-items: center;
  padding: 4vh 4vw; box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
.rk-breather[hidden] { display: none; }
.rk-breather-frost {
  position: fixed; inset: 0; z-index: 9900;
  background: rgba(252,252,250,.55);
  -webkit-backdrop-filter: blur(14px) saturate(.8); backdrop-filter: blur(14px) saturate(.8);
  opacity: 0; transition: opacity .25s ease;
  cursor: default;
}
.rk-breather.night .rk-breather-frost { background: rgba(11,11,10,.32); }
.rk-breather.in .rk-breather-frost { opacity: 1; }

/* The sheet: the sticker itself. --r is the resting tilt; the fly-off
   adds --fx/--fy/--fr from js/breather.js along the drag vector. */
.rk-breather-sheet {
  --r: -2.2deg; --fx: 0px; --fy: 0px; --fr: 0deg;
  position: relative; z-index: 9901;
  box-sizing: border-box;
  width: min(92vw, 900px); max-height: 92vh;
  display: flex; flex-direction: column;
  background: #FCFCFA; color: #111110;
  border-radius: 22px 17px 24px 15px / 18px 25px 15px 22px;
  box-shadow:
    inset 0 0 0 1px rgba(17,17,16,.2),
    0 0 0 10px #fff,
    0 0 0 10.5px rgba(14,14,12,.1),
    0 30px 60px -20px rgba(0,0,0,.6);
  transform: rotate(var(--r)) scale(1.05);
  transform-origin: 100% 100%;
  opacity: 0;
  transition: opacity .22s ease, transform .5s cubic-bezier(.34,1.56,.64,1);
  touch-action: pan-y;
  -webkit-user-select: none; user-select: none;
}
.rk-breather.in .rk-breather-sheet { opacity: 1; transform: rotate(var(--r)) scale(1); }
.rk-breather-sheet.drag { transition: none; }
/* Release past the line: it flies off the way it was pulled. */
.rk-breather-sheet.fly {
  opacity: 0;
  transform: translate(var(--fx), var(--fy)) rotate(calc(var(--r) + var(--fr))) scale(.92);
  transition: opacity .32s ease .1s, transform .42s cubic-bezier(.5,0,.85,.35);
}
/* A plain release (frost, reduced motion): a fade, nothing else. */
.rk-breather-sheet.fade { opacity: 0; transform: rotate(var(--r)) scale(1); transition: opacity .18s linear, transform .18s linear; }
.rk-breather.out .rk-breather-frost { opacity: 0; transition: opacity .18s linear; }

/* The body: what scrolls when the sheet is taller than the screen. */
.rk-breather-body {
  flex: 1 1 auto; min-height: 0;
  overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  border-radius: inherit;
  display: grid; grid-template-columns: 55fr 45fr; align-items: stretch;
  scrollbar-width: thin;
}

/* The art, inside its link. The <picture> wrapper stays out of the layout. */
.rk-breather-pic { display: contents; }
.rk-breather-arta {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem;
  min-width: 0; min-height: 0;
  padding: clamp(20px, 3.4vw, 40px);
  color: inherit; text-decoration: none;
  outline: none;
}
.rk-breather-arta:focus-visible .rk-breather-art { outline: 2px solid #E03A1F; outline-offset: 10px; }
.rk-breather-art {
  display: block; width: 100%; height: auto;
  max-height: min(68vh, 640px); object-fit: contain;
  -webkit-user-drag: none; user-select: none; pointer-events: none;
  filter: drop-shadow(0 14px 18px rgba(14,14,12,.22));
}
.rk-breather-artcap {
  margin: 0; font-family: var(--hand, Caveat, cursive); font-size: 1.15rem; line-height: 1.1;
  color: #2C2B28; text-align: center; max-width: 30ch;
}
.rk-breather-artcap:empty { display: none; }

/* The right column */
.rk-breather-side {
  display: flex; flex-direction: column; justify-content: center; gap: 1.15rem;
  min-width: 0;
  padding: clamp(24px, 3.4vw, 44px) clamp(22px, 3vw, 40px) 84px clamp(6px, 1vw, 14px);
}
.rk-breather-text { margin: 0; }
.rk-breather-text p { margin: 0; }
.rk-breather-text p:first-child {
  font-family: var(--display, Georgia, serif); font-style: italic; font-weight: 400;
  font-size: clamp(1.7rem, 2.7vw, 2.45rem); line-height: 1.04; letter-spacing: -.01em;
  margin: 0 0 .85rem; max-width: 16ch;
}
.rk-breather-text p + p {
  font-family: var(--serif, Georgia, serif); font-size: 1.06rem; line-height: 1.5;
  color: #2C2B28; max-width: 30ch;
}
.rk-breather-text p + p + p { margin-top: .2rem; }

/* The honest count: one mono line */
.rk-breather-count {
  margin: 0; padding-top: .9rem; border-top: 1px solid rgba(17,17,16,.16);
  font: 400 var(--mono-b, 10px)/1.7 var(--mono, ui-monospace, Menlo, monospace);
  letter-spacing: var(--mono-b-track, .18em); text-transform: uppercase; color: #8A867D;
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .9em; row-gap: .1em;
}
.rk-breather-count[hidden] { display: none; }
.rk-breather-lead { color: #8A867D; }
.rk-breather-k { color: #111110; white-space: nowrap; }
.rk-breather-k + .rk-breather-k::before { content: "·"; color: #8A867D; margin-right: .9em; }

/* The off switch (9 Oct 2026): a small ink pill at the foot of the tag's text, only when the
   breather popped up by itself. Same family as the switch on the ADHD stickers (js/chrome.js .rk-s-off). */
.rk-breather-off {
  all: unset; box-sizing: border-box; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 5px; height: 18px; padding: 0 7px 0 5px; margin-top: .2rem;
  cursor: pointer; font: 400 9px/1 var(--mono, ui-monospace, Menlo, monospace); letter-spacing: .14em; text-transform: uppercase;
  background: #191815; color: #FCFCFA; box-shadow: 0 0 0 2px #FCFCFA, 0 2px 6px rgba(14,14,12,.22);
  transition: background-color .2s ease;
}
.rk-breather-off[hidden] { display: none; }
.rk-breather-off .tk { position: relative; flex: none; width: 18px; height: 10px; border-radius: 5px; box-sizing: border-box; border: 1px solid #FCFCFA; background: #E03A1F; transition: background-color .2s ease; }
.rk-breather-off .tk::after { content: ""; position: absolute; top: 1px; left: 9px; width: 6px; height: 6px; border-radius: 50%; background: #FCFCFA; transition: left .2s ease; }
.rk-breather-off[aria-checked="false"] .tk { background: transparent; }
.rk-breather-off[aria-checked="false"] .tk::after { left: 1px; }
.rk-breather-off:hover, .rk-breather-off:focus-visible { background: #E03A1F; outline: none; }
.rk-breather-off:hover .tk, .rk-breather-off:focus-visible .tk { background: #191815; }
.rk-breather-off:focus-visible { outline: 2px solid #E03A1F; outline-offset: 3px; }
@media (max-width: 640px) { .rk-breather-off { height: 22px; } }

/* What you saw and Come back to this left the sticker for the eye's sheet
   (2026-10-01): css/eye.css .ph-seen. */

/* ── The peel control: the bottom-right corner, already lifting ── */
.rk-breather-peel {
  all: unset; box-sizing: border-box;
  position: absolute; z-index: 5; right: 0; bottom: 0;
  width: 84px; height: 84px; min-width: 44px; min-height: 44px;
  cursor: grab; touch-action: none;
  border-radius: 0 0 24px 0 / 0 0 15px 0;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.rk-breather-peel::before {               /* what shows beneath the lifted corner: the frost */
  content: ""; position: absolute; inset: 0;
  background: rgba(252,252,250,.9);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.rk-breather.night .rk-breather-peel::before { background: rgba(11,11,10,.85); }
.rk-breather-peel::after {                /* the flap: paper back, folded over */
  content: ""; position: absolute; inset: 0;
  background: #EDEBE4;
  background-image: linear-gradient(135deg, #D9D6CC 0, #EDEBE4 34%, #F6F5F0 62%, #E4E2DA 100%);
  clip-path: polygon(0 100%, 100% 0, 0 0);
  box-shadow: inset -1px -1px 0 rgba(17,17,16,.18);
  transform-origin: 0 0;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
.rk-breather-peel span {
  position: absolute; z-index: 1; left: 0; right: 0; top: 50%;
  transform: translateY(-50%) rotate(-45deg) translate(-14px, -6px);
  font: 400 var(--mono-c, 9px)/1 var(--mono, ui-monospace, Menlo, monospace);
  letter-spacing: var(--mono-c-track, .16em); text-transform: uppercase; color: #2C2B28;
  text-align: center; pointer-events: none;
}
.rk-breather-peel:hover::after, .rk-breather-peel:focus-visible::after { transform: scale(1.08); }
.rk-breather-peel:hover span, .rk-breather-peel:focus-visible span { color: #E03A1F; }
.rk-breather-peel:focus-visible { outline: 2px solid #E03A1F; outline-offset: -3px; }
.rk-breather-peel:active { cursor: grabbing; }

/* The other three corners: invisible hot zones for the hand */
.rk-breather-hz {
  position: absolute; z-index: 4; width: 60px; height: 60px;
  touch-action: none; cursor: grab; -webkit-tap-highlight-color: transparent;
}
.rk-breather-hz[data-c="tl"] { left: 0; top: 0; }
.rk-breather-hz[data-c="tr"] { right: 0; top: 0; }
.rk-breather-hz[data-c="bl"] { left: 0; bottom: 0; }
.rk-breather-sheet.drag, .rk-breather-sheet.drag * { cursor: grabbing !important; }

/* ── The underside: the flap that follows the pointer (js/breather.js sets
   transform, clip-path and the one gradient that IS the curl) ── */
.rk-breather-under {
  position: absolute; inset: 0; z-index: 6; pointer-events: none;
  border-radius: inherit;
  transform-origin: 0 0;
  filter: drop-shadow(0 10px 16px rgba(14,14,12,.38));
  display: none;
}
.rk-breather-sheet.drag .rk-breather-under, .rk-breather-sheet.fly .rk-breather-under { display: block; }
.rk-breather-under > i {
  position: absolute; inset: 0; display: block;
  border-radius: inherit;
  background-color: #EDEBE4;
  /* the back of the sticker keeps its white die-cut border, like the front */
  box-shadow: inset 0 0 0 1px rgba(17,17,16,.12), 0 0 0 10px #fff, 0 0 0 10.5px rgba(14,14,12,.1);
}

/* ── Phones: stacked, the art on top, the whole sheet is the hand's ── */
@media (max-width: 640px) {
  .rk-breather { padding: 3vh 0; }
  .rk-breather-sheet { --r: -1.2deg; width: min(88vw, 900px); transform-origin: 50% 50%; }
  .rk-breather-body { display: block; }
  .rk-breather-arta { padding: 16px 16px 6px; }
  .rk-breather-art { height: 42vh; max-height: none; width: 100%; }
  .rk-breather-side { padding: 14px 20px 96px; gap: 1rem; }
  .rk-breather-count { padding-right: 76px; }
  /* The tangent stickers clear the button here too (button bottom 72px, 40px tall). */
  html.rk-breather-on .rk-sticker.pin-corner { bottom: calc(14px + 48px + 10px + 40px + 10px + env(safe-area-inset-bottom, 0px)); }
  .rk-breather-peel { width: 72px; height: 72px; }
  .rk-breather-peel::before { opacity: .8; }
  .rk-breather-text p:first-child { font-size: 1.75rem; max-width: none; }
  .rk-breather-text p + p { max-width: none; }
  .rk-breather-hz { width: 44px; height: 44px; }
}

/* ── Reduced motion: nothing moves, things appear and go ── */
@media (prefers-reduced-motion: reduce) {
  .rk-breather-btn, .rk-breather-btn:hover, .rk-breather-btn:focus-visible, .rk-breather-btn:active { transition: none; transform: rotate(1.5deg); }
  .rk-breather-sheet, .rk-breather.in .rk-breather-sheet, .rk-breather-sheet.fly, .rk-breather-sheet.fade {
    transform: rotate(var(--r)); transition: opacity .18s linear;
  }
  .rk-breather-frost, .rk-breather.in .rk-breather-frost { transition: opacity .18s linear; }
  .rk-breather-peel::after { transition: none; }
  .rk-breather-under { display: none !important; }
}

@media print { .rk-breather-btn, .rk-breather { display: none !important; } }

/* ── The cutout form (ships): the work itself is the sticker, the words on a tag ──
   The sheet has no paper of its own: the die-cut PNG carries its white border, and
   the sheet's box is the picture's box. The tag (the .rk-breather-side column of the
   card form) is a small paper sticker slapped across the picture's lower right
   corner, overhanging it; the underside box extends by --ue so the flap carries
   the overhang too (js/breather.js reads --ue). */
.rk-breather.form-cutout { padding: 4vh 4vw 6vh; }
.rk-breather.form-cutout .rk-breather-sheet {
  --r: -1.6deg;
  width: auto; max-height: none;
  background: transparent; color: #111110;
  border-radius: 0; box-shadow: none;
  overflow: visible;
  transform-origin: 50% 60%;
}
.rk-breather.form-cutout .rk-breather-body {
  display: block; overflow: visible; border-radius: 0;
}
.rk-breather.form-cutout .rk-breather-arta { padding: 0; display: block; }
.rk-breather.form-cutout .rk-breather-art {
  display: block; width: auto; max-width: min(84vw, 760px);
  height: min(80vh, 820px); max-height: none; object-fit: contain;
  filter: drop-shadow(0 22px 28px rgba(14,14,12,.42)) drop-shadow(0 2px 4px rgba(14,14,12,.25));
}
.rk-breather.form-cutout .rk-breather-artcap { display: none; }
/* the tag */
.rk-breather.form-cutout .rk-breather-side {
  --tr: -3.2deg;
  position: absolute; z-index: 3;
  right: -96px; bottom: -44px;
  width: min(286px, 76vw);
  box-sizing: border-box;
  padding: 18px 20px 44px 18px;
  gap: .7rem; justify-content: flex-start;
  background: #FCFCFA;
  border-radius: 9px 7px 10px 6px / 7px 10px 6px 9px;
  box-shadow:
    inset 0 0 0 1px rgba(17,17,16,.2),
    0 0 0 6px #fff,
    0 0 0 6.5px rgba(14,14,12,.1),
    0 18px 34px -14px rgba(0,0,0,.55);
  transform: rotate(var(--tr));
  transform-origin: 50% 50%;
}
.rk-breather.form-cutout .rk-breather-text p:first-child { font-size: 1.22rem; line-height: 1.08; margin-bottom: .45rem; max-width: none; }
.rk-breather.form-cutout .rk-breather-text p + p { font-size: .9rem; line-height: 1.38; max-width: none; }
.rk-breather.form-cutout .rk-breather-count { padding-top: .6rem; line-height: 1.6; }
/* the peel corner rides the tag's corner, which overhangs the sheet by the same offsets */
.rk-breather.form-cutout .rk-breather-peel {
  right: -96px; bottom: -44px; width: 64px; height: 64px; z-index: 7;
  border-radius: 0 0 10px 0 / 0 0 9px 0;
  transform: rotate(var(--tr, -3.2deg)); transform-origin: 50% 50%;
}
/* the back of the sticker: paper in the shape of the work (mask set by js/breather.js), no square border */
.rk-breather.form-cutout .rk-breather-under { --ue: 96px; inset: calc(-1 * var(--ue)); transform-origin: var(--ue) var(--ue); border-radius: 0; }
.rk-breather.form-cutout .rk-breather-under > i {
  border-radius: 0; box-shadow: none;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-composite: source-over; mask-composite: add;
}
/* the other corners: the picture's bounding box */
.rk-breather.form-cutout .rk-breather-hz { z-index: 4; }
@media (max-width: 640px) {
  .rk-breather.form-cutout { padding: 2vh 0 3vh; }
  .rk-breather.form-cutout .rk-breather-sheet { --r: -1deg; width: 88vw; display: flex; flex-direction: column; align-items: center; transform-origin: 50% 50%; }
  .rk-breather.form-cutout .rk-breather-body { width: 100%; display: flex; flex-direction: column; align-items: center; }
  .rk-breather.form-cutout .rk-breather-arta { padding: 0 4vw; }
  .rk-breather.form-cutout .rk-breather-art { height: 44vh; width: auto; max-width: 80vw; }
  .rk-breather.form-cutout .rk-breather-side {
    --tr: -1.4deg;
    position: relative; right: auto; bottom: auto; margin-top: -28px; align-self: stretch;
    width: auto; padding: 16px 18px 54px 18px; gap: .7rem;
  }
  .rk-breather.form-cutout .rk-breather-text p:first-child { font-size: 1.3rem; }
  .rk-breather.form-cutout .rk-breather-text p + p { font-size: .94rem; }
  .rk-breather.form-cutout .rk-breather-count { padding-right: 60px; }
  .rk-breather.form-cutout .rk-breather-peel { right: 0; bottom: 0; width: 64px; height: 64px; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rk-breather.form-cutout .rk-breather-sheet { transform: rotate(var(--r)); }
}

/* ── Phones and touch screens: the peel keeps up with the finger (2026-10-01) ──
   Every frame of the curl repaints the sheet, and three live blurs were being
   recomputed with it: the frost's backdrop blur, the flap's drop-shadow and the
   art's double drop-shadow. On Android that is what made the peel lag and break.
   Here the frost is a denser wash with no blur, the flap carries its crease
   gradient but no blurred shadow, and the art keeps one lighter shadow.
   The cutout has nothing to scroll, so the whole sheet belongs to the hand. */
@media (max-width: 640px), (hover: none) and (pointer: coarse) {
  .rk-breather-frost { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(252,252,250,.86); }
  .rk-breather.night .rk-breather-frost { background: rgba(11,11,10,.74); }
  .rk-breather-under { filter: none; }
  .rk-breather-art, .rk-breather.form-cutout .rk-breather-art { filter: drop-shadow(0 12px 10px rgba(14,14,12,.36)); }
  .rk-breather.form-cutout .rk-breather-sheet { touch-action: none; }
}