/* ═══════════════════════════════════════════════════════════════════
   ROUNDED CORNERS, SITE-WIDE  (decided 5 Oct 2026: "done with pointed edges")
   Linked last in every public page's <head>, so it is the one place the
   site's corners are set. Three sizes:
     --r     20px  cards, photographs, panels, dialogs
     --r-sm  12px  a photograph inside a card, inputs, small tiles
     pills         buttons and tags (most already were)
   Full-bleed bands — hero, quote band, the dark philosophy band, footer —
   stay edge to edge: they have no corners on screen to round.
   !important only on border-radius, which nothing else on the site sets,
   so it cannot fight the colour rules (light mode etc.).
   ═══════════════════════════════════════════════════════════════════ */
:root { --r: 20px; --r-sm: 12px; }

/* ── cards that hold a photograph: the card rounds, and clips what is in it ── */
.sp, .ct, .wstrip figure, .room-fig,                 /* home */
a.room, .room-media,                                 /* spaces */
.cat-tile, .item, .cat-hero-media,                   /* collection, essentials */
.na-media, .na-card .na-media,                       /* the nest edit */
                                                     /* (/nest pieces: see below) */
.nf-card                                             /* 404 */
{ border-radius: var(--r) !important; overflow: hidden; }
.sp::after, .ct::after, .wstrip figure::after { border-radius: inherit !important; }
.cat-tile-media { border-radius: var(--r) var(--r) 0 0 !important; }
.item .stage { border-radius: var(--r) var(--r) 0 0 !important; }

/* ── panels, forms and dialogs ── */
.form-card, main.card, .card, .gate-card, .callout,
.pillars-grid, .contact-grid,                        /* about: rounded outside, hairline grid inside */
#articleModal, .sheet, .lobby-card, .comments-section
{ border-radius: var(--r) !important; }
.pillars-grid, .contact-grid { overflow: hidden; }   /* not .sheet or #articleModal: they scroll on a phone */
#articleModal .modal-hero { border-radius: var(--r) var(--r) 0 0 !important; }
.rail .piece { border-radius: var(--r) !important; overflow: hidden; } /* /nest */
.rail .piece .piece-img { border-radius: 0 !important; }
main.card .logo, main.card .logo img { border-radius: 50% !important; }

/* the piece sheet on Collection / Essentials: stage on the left, details on the right */
@media (min-width: 821px) {
  .sheet .d-stage, .sheet .d-poster { border-radius: var(--r) 0 0 var(--r) !important; }
}

/* the product drawer in the 3D rooms: a side drawer on a laptop, a bottom sheet on a phone */
#panel { border-radius: var(--r) 0 0 var(--r) !important; overflow-x: hidden; }
@media (max-width: 768px) { #panel { border-radius: var(--r) var(--r) 0 0 !important; } }

/* ── inputs ── */
input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="search"], input[type="url"], input[type="number"], input:not([type]),
select, textarea, .comment-input, .newsletter-input
{ border-radius: var(--r-sm) !important; }

/* ── buttons: pills ── */
.submit-btn, .gate-btn, .newsletter-btn, .comment-submit, .back-home, .btn-similar, .buy, .d-buy, .state .btn
{ border-radius: 100px !important; }
.door { border-radius: 16px !important; }

/* ═══ DEPTH ═══
   Photo tiles and cards sit up off the page instead of lying flat on it.
   Shadows first (5 Oct 2026); borders or panels only if these are not enough. */
:root {
  --depth: 0 1px 2px rgba(15,31,34,.06), 0 10px 24px rgba(15,31,34,.13), 0 28px 56px -18px rgba(15,31,34,.30);
  --depth-hover: 0 2px 4px rgba(15,31,34,.08), 0 18px 40px rgba(15,31,34,.18), 0 42px 72px -20px rgba(15,31,34,.36);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --depth: 0 0 0 1px rgba(234,242,241,.06), 0 4px 10px rgba(0,0,0,.40), 0 22px 48px rgba(0,0,0,.55);
    --depth-hover: 0 0 0 1px rgba(234,242,241,.10), 0 6px 14px rgba(0,0,0,.45), 0 30px 64px rgba(0,0,0,.62);
  }
}
:root[data-theme="dark"] {
  --depth: 0 0 0 1px rgba(234,242,241,.06), 0 4px 10px rgba(0,0,0,.40), 0 22px 48px rgba(0,0,0,.55);
  --depth-hover: 0 0 0 1px rgba(234,242,241,.10), 0 6px 14px rgba(0,0,0,.45), 0 30px 64px rgba(0,0,0,.62);
}
.sp, .ct, .wstrip figure, .room-fig, a.room, .na-media, .cat-hero-media,
.cat-tile, .item, .pc, .ed, .rail .piece, .nf-card, .dz-proj-img
{ box-shadow: var(--depth) !important; }
.sp:hover, .ct:hover, a.room:hover, .na:hover .na-media, .cat-tile:hover, .item:hover, .pc:hover, .ed:hover, .rail .piece:hover
{ box-shadow: var(--depth-hover) !important; }
.na-ph { box-shadow: none !important; }

/* ═══ THE NEST EDIT PAGE ═══ */
/* The article reader: its own scrollbar was squaring off the right-hand
   corners, so it scrolls without one (wheel, trackpad and touch still work),
   and a deep shadow lifts it off the dimmed page. */
#articleModal { scrollbar-width: none; box-shadow: 0 40px 100px rgba(0,0,0,.45), 0 12px 30px rgba(0,0,0,.25) !important; }
#articleModal::-webkit-scrollbar { display: none; }
#articleModal .modal-close { border-radius: 50% !important; top: 14px; right: 14px; width: 44px; height: 44px; z-index: 3; }
/* the stories beside the lead one: bigger photos and headlines, so the
   column is filled rather than two thumbnails floating in space */
@media (min-width: 901px) {
  .na-rail { grid-template-columns: minmax(120px, 46%) 1fr !important; gap: 20px !important; align-items: center !important; }
  .na-rail .na-media { aspect-ratio: 4 / 3 !important; }
  .na-rail .na-title { font-size: clamp(19px, 1.6vw, 23px) !important; }
  .na-rail .na-excerpt { display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px !important; line-height: 1.6 !important; }
}

/* Scrolling rails clip whatever spills past their box, which cut the
   shadows above off into a hard grey rectangle. The rail gets room to
   spill into, and gives it back with a negative margin so nothing moves. */
.un-rail { padding: 22px 26px 46px !important; margin: -22px -26px -30px !important; scroll-padding-inline: 26px !important; }
@media (max-width: 700px) { .un-rail { padding-inline: 16px !important; margin-inline: -16px !important; scroll-padding-inline: 16px !important; } }

/* ═══ THE PIECE SHEET ON A PHONE (Collection, Essentials) ═══
   The 3D stage stays pinned at the top while the details scroll under it.
   The share button was drawing over the stage's edge instead of passing
   beneath it; the stage now always sits on top, with a soft edge. */
@media (max-width: 820px) {
  .sheet .d-stage { z-index: 5 !important; box-shadow: 0 10px 24px -14px rgba(0,0,0,.35); }
  .sheet .d-body { position: relative; z-index: 1; padding-top: 30px !important; }
}

/* ═══ THE NEST STUDIO (/studio/, the writers' portal) ═══
   Scoped to its workspace: .panel, .btn and .nav are common names. */
#viewApp .panel, #viewApp .stats, #viewApp .stat, #viewApp .page-strip, #viewApp .fmt-toolbar,
#viewApp .slug-row, #viewApp .author-card { border-radius: var(--r) !important; }
#viewApp .panel, #viewApp .author-card { box-shadow: var(--depth) !important; }
#viewApp .stats { overflow: hidden; }
#viewApp .fmt-toolbar, #viewApp .slug-row { border-radius: var(--r-sm) !important; }
#viewApp .btn, #viewApp .rb, #viewApp .side-out { border-radius: 100px !important; }
#viewApp .nav { border-radius: 10px !important; }
#viewApp img.cover-prev { border-radius: var(--r-sm) !important; }

/* ═══ NO THIN WHITE LINES (5 Oct 2026) ═══
   The mount line drawn over photos, the hairline rim around photo tiles,
   and the faint rim the dark-mode shadow carried: all gone. The shadow
   alone gives the edge. */
.pc-frame::after, .ed-ph::after, .sp::after, .ct::after, .wstrip figure::after,
.ir-photo::after, .piece-ph::after { display: none !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --depth: 0 4px 10px rgba(0,0,0,.40), 0 22px 48px rgba(0,0,0,.55);
    --depth-hover: 0 6px 14px rgba(0,0,0,.45), 0 30px 64px rgba(0,0,0,.62);
  }
}
:root[data-theme="dark"] {
  --depth: 0 4px 10px rgba(0,0,0,.40), 0 22px 48px rgba(0,0,0,.55);
  --depth-hover: 0 6px 14px rgba(0,0,0,.45), 0 30px 64px rgba(0,0,0,.62);
}

/* ═══ LISTINGS: the words on their own panel ═══
   Collection and Essentials piece cards, the same lighter panel the Nest
   Edit cards have under their photo. */
.grid > .item { padding: 8px; }
.grid > .item .stage { border-radius: var(--r-sm) !important; }
.grid > .item .body { margin-top: 8px; border-radius: var(--r-sm); background: var(--panel); color: #EAF2F1; }
.grid > .item .body .name, .grid > .item .body .price { color: #EAF2F1; }
.grid > .item .body .desc { color: rgba(234,242,241,.66); }
.grid > .item .body .cat { color: #C2934D; }
.grid > .item .body .buy, .grid > .item .body .share { color: #EAF2F1; border-color: rgba(234,242,241,.45); }
.grid > .item .body .buy:hover { background: #EAF2F1; color: #0E3238; }
.grid > .item .body .share:hover { color: #C2934D; border-color: #C2934D; }

/* ═══ QUOTE BANDS (7 Oct 2026; option B chosen 12 Oct) ═══
   The Sanskrit bands on Home (.band), About (.wband), The Nest Edit (.nband)
   and Policies: about as wide as the words, only as tall as the quote and
   its source, the three lines set close together, with rounded corners and
   the same soft shadow as the photo tiles. (Option A, square and edge to
   edge, was shown and not chosen.) */
.band, .nband, .wband {
  border-radius: var(--r) !important; box-shadow: var(--depth) !important;
  min-height: 0 !important; padding: 26px 32px !important;
}
.band, .nband, .wband:not(.inline-band):not(.closing-band) {
  width: min(780px, calc(100% - 96px)) !important; margin-inline: auto !important; overflow: hidden !important;
}
.band-shloka, .nband-shloka, .wband-shloka { font-size: clamp(20px, 2.3vw, 32px) !important; line-height: 1.45 !important; }
.band-sense, .nband-sense, .wband-sense { margin-top: 4px !important; font-size: clamp(14px, 1.3vw, 18px) !important; line-height: 1.35 !important; }
.band-attr, .nband-attr, .wband-attr { margin-top: 8px !important; }
/* The Nest Edit's band is followed straight by the comments panel, which touched it */
.nband { margin-bottom: clamp(32px, 5vw, 56px) !important; }
@media (max-width: 768px) {
  .band, .nband, .wband:not(.inline-band):not(.closing-band) { width: calc(100% - 40px) !important; }
  .band, .nband, .wband { padding: 20px 16px !important; }
}

/* ═══ TIGHTER SPACING (14 Oct 2026) ═══
   Sections carried up to 100px of padding above AND below, so two of them
   side by side left 150-200px of empty page. Roughly a third less, everywhere.
   Home: its rhythm is two variables, so they are lowered here. */
:root { --sec: clamp(36px, 4.2cqw, 64px) !important; --sec-tight: clamp(22px, 2.6cqw, 38px) !important; }
@media (max-width: 820px) { :root { --sec: clamp(30px, 7vw, 44px) !important; --sec-tight: clamp(18px, 4.4vw, 28px) !important; } }
.philosophy { padding: var(--sec) 0 !important; }
/* the scroll rails keep room under their cards for the shadow, and gave all of it back as gap */
.un-rail { padding-bottom: 38px !important; margin-bottom: -30px !important; }
/* About */
.about-section { padding-top: 52px !important; padding-bottom: 52px !important; }
@media (max-width: 768px) { .about-section { padding-top: 40px !important; padding-bottom: 40px !important; } }
/* The Nest Edit */
section.nest { padding-bottom: 52px !important; }
.nband { margin-bottom: clamp(20px, 3vw, 36px) !important; }
.comments-section { padding-top: 40px !important; padding-bottom: 48px !important; }
/* Policies */
body:has(.toc) main { padding-bottom: 56px !important; }
.wband.inline-band { margin-bottom: 40px !important; }
.wband.closing-band { margin-top: 40px !important; }
/* /nest and /creators */
header.hero:not(.shop) { padding-bottom: 48px !important; }
section.join { padding-bottom: 44px !important; }

/* ═══ SQUIRCLE CORNERS (21 Oct 2026) ═══
   Every rounded corner on the site becomes a squircle: the continuous-
   curvature corner Apple uses, where the edge starts bending earlier and eases
   into the turn instead of meeting a quarter circle. A squircle looks tighter
   than a circle of the same size, so the radii go up (20 → 32, 12 → 20) to
   keep the same softness. Browsers without corner-shape (Safari, Firefox for
   now) skip this whole block and keep the round corners above.
   Circles and pill buttons are left alone: a full curve has nothing to smooth. */
@supports (corner-shape: squircle) {
  :root { --r: 32px; --r-sm: 20px; }

  /* everything the round-corner rules above set with --r / --r-sm */
  .sp, .ct, .wstrip figure, .room-fig, a.room, .room-media, .cat-tile, .item, .cat-hero-media,
  .na-media, .na-card .na-media, .nf-card, .cat-tile-media, .item .stage,
  .form-card, main.card, .card, .gate-card, .callout, .pillars-grid, .contact-grid,
  #articleModal, .sheet, .lobby-card, .comments-section, #articleModal .modal-hero,
  .rail .piece, .sheet .d-stage, .sheet .d-poster, #panel,
  input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="search"], input[type="url"], input[type="number"], input:not([type]),
  select, textarea, .comment-input, .newsletter-input,
  #viewApp .panel, #viewApp .stats, #viewApp .stat, #viewApp .page-strip, #viewApp .fmt-toolbar, #viewApp .slug-row, #viewApp .author-card, #viewApp img.cover-prev,
  .grid > .item .stage, .grid > .item .body, .band, .nband, .wband,
  /* and the ones that set their own sizes */
  .sh-card, .sh-card img, .flip-face, a.pc, .pc-frame, .pc-body, a.ed, .ed-ph, .ed-panel,
  .dcard, .reach > a, .lk-feed .pc, .door
  { corner-shape: squircle; }

  a.pc, a.ed, .flip-face, .lk-feed .pc { border-radius: var(--r) !important; }
  .pc-frame, .pc-body, .ed-ph, .ed-panel { border-radius: var(--r-sm) !important; }
  .sh-card { border-radius: 26px !important; }
  .sh-card img { border-radius: 16px !important; }
  .dcard { border-radius: 36px !important; }
  .reach > a { border-radius: 22px !important; }
  .door { border-radius: 26px !important; }
}