/* AnotherV · the "room" look — first on objects.html (Note / Cart still use styles.css).
   The pages sit inside the peek box of the homepage: a warm grey room with the niche light,
   matte frosted glass panels (the contact card's recipe), rounded corners, icons before words.
   Shape rule: panels 24, things inside a panel 14–16 (nested), anything you press is a pill.
   Fonts follow the homepage: Kepler (Newsreader stand-in), Forma DJR (Hanken Grotesk stand-in),
   TSC Hand for Vivi's own voice, Cormorant Garamond italic for small asides, Hubballi for legal. */

@font-face { font-family: "TSC Hand"; src: url("/fonts/tsc-hand.woff2") format("woff2"); font-display: swap; }

:root {
  --ink: #2A211B;
  --ink-2: #57524B;              /* secondary text on glass, ≥ 4.5:1 */
  --ink-3: #7A746C;              /* tertiary, only for large or decorative bits */
  --cream: #F7F3EB;
  --pill-dark: #272521;
  --quiet: #777169;              /* the homepage dot */

  --f-display: "kepler-3-variable-display", "kepler-std-display", "Newsreader", Georgia, serif;
  --f-body: "forma-djr-text", "forma-djr-micro", "Hanken Grotesk", system-ui, sans-serif;
  --f-forma: "forma-djr-banner", "forma-djr-text", "Hanken Grotesk", system-ui, sans-serif;
  --f-hand: "TSC Hand", "Hanken Grotesk", system-ui, sans-serif;
  --f-note: "Cormorant Garamond", Georgia, serif;
  --f-hub: "Hubballi", "Hanken Grotesk", system-ui, sans-serif;

  --r-panel: 24px;
  --r-inner: 16px;
  --r-tile: 14px;
  --r-pill: 999px;
  --gutter: 20px;
  --page-max: 1180px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* matte frosted glass — same recipe as the CONTACT card */
  --glass: linear-gradient(165deg, rgb(255 255 255 / 0.30) 0%, rgb(255 255 255 / 0.15) 30%, rgb(255 252 247 / 0.12) 62%, rgb(255 255 255 / 0.20) 100%);
  --glass-blur: blur(14px) saturate(1.2) brightness(1.05);
  --glass-shadow: inset 0 1px 0 rgb(255 255 255 / 0.78), inset 0 -1px 0 rgb(255 255 255 / 0.22), inset 0 0 18px rgb(255 255 255 / 0.16),
                  0 18px 40px rgb(30 24 18 / 0.13), 0 2px 6px rgb(30 24 18 / 0.07);
  --glass-inner: rgb(255 255 255 / 0.22);
  --glass-inner-shadow: inset 0 1px 0 rgb(255 255 255 / 0.6), inset 0 0 0 0.5px rgb(255 255 255 / 0.45);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; background: #A9A59E; }
body {
  margin: 0; min-height: 100dvh; color: var(--ink);
  font-family: var(--f-body); font-weight: 300; font-size: 15px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
/* the room: grey wall above, the warm light of the niche, the paler floor below — fixed behind everything */
body::before, body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; }
body::before {
  background:
    radial-gradient(62% 40% at 44% 40%, rgb(255 246 220 / 0.78), rgb(255 246 220 / 0) 72%),
    radial-gradient(120% 60% at 50% 110%, rgb(236 232 224 / 0.9), rgb(236 232 224 / 0) 70%),
    linear-gradient(180deg, #A19E97 0%, #ACA8A0 24%, #BEB9B0 52%, #CFCAC1 78%, #D8D4CB 100%);
}
body::after {   /* grain, like the frosted pane */
  opacity: 0.16; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
img, video { display: block; max-width: 100%; }
[hidden] { display: none !important; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
a, button, label { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 1.5px solid rgb(42 33 27 / 0.7); outline-offset: 3px; }
.ph-light { line-height: 1; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -48px; z-index: 40; padding: 10px 16px; border-radius: var(--r-pill); background: var(--pill-dark); color: var(--cream); font-size: 14px; text-decoration: none; }
.skip:focus { top: 10px; }

.wrap { width: 100%; max-width: var(--page-max); margin: 0 auto;
        padding: 0 max(var(--gutter), env(safe-area-inset-right)) 0 max(var(--gutter), env(safe-area-inset-left)); }

/* ---------------------------------------------------------------- glass */
.glass {
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
}
.panel { position: relative; border-radius: var(--r-panel); }
.panel::after {   /* bright rim, strongest top-left where the light is */
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(150deg, rgb(255 255 255 / 0.95), rgb(255 255 255 / 0.18) 32%, rgb(255 255 255 / 0.06) 62%, rgb(255 255 255 / 0.5));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

/* ---------------------------------------------------------------- top: dot, tag, icon pills (no bar) */
.top { position: sticky; top: 0; z-index: 30; pointer-events: none; }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; padding-bottom: 14px; }
.top a, .top button { pointer-events: auto; }
.top-left, .top-right { display: flex; align-items: center; gap: 8px; }
.home-dot { width: 26px; height: 22px; border-radius: var(--r-pill); background: var(--quiet); box-shadow: 0 2px 4.7px rgb(0 0 0 / 0.18); flex: none; }
.tag { display: inline-flex; align-items: center; height: 30px; padding: 0 16px; border-radius: var(--r-pill);
       font-family: var(--f-forma); font-size: 11px; letter-spacing: 0.1em; white-space: nowrap; text-decoration: none; }
.icon-pill { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; min-width: 40px; padding: 0 12px;
             border: 0; border-radius: var(--r-pill); cursor: pointer; text-decoration: none; transition: transform 300ms var(--ease); }
.icon-pill i { font-size: 19px; }
.icon-pill:active { transform: scale(0.96); }
.cart-count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill); display: inline-grid; place-items: center;
              font-size: 10.5px; font-weight: 400; letter-spacing: 0; background: var(--pill-dark); color: var(--cream); font-variant-numeric: tabular-nums; }
.cart-count[data-empty] { display: none; }
.menu-panel { position: absolute; right: max(var(--gutter), env(safe-area-inset-right)); top: 62px; min-width: 210px; padding: 8px; border-radius: 20px;
              display: grid; gap: 2px; pointer-events: auto; }
.menu-panel a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; text-decoration: none;
                font-family: var(--f-forma); font-size: 13px; letter-spacing: 0.08em; }
.menu-panel a i { font-size: 19px; color: var(--ink-2); }
.menu-panel a:hover, .menu-panel a[aria-current="page"] { background: var(--glass-inner); }

/* ---------------------------------------------------------------- head */
.head { position: relative; padding: 26px 0 22px 22px; display: grid; gap: 10px; }
.head .rule { position: absolute; left: 7px; top: 30px; bottom: 76px; width: 1px; background: var(--ink); opacity: 0.35; transform: scaleX(0.5); transform-origin: left; }
.title { margin: 0; font-family: var(--f-display); font-weight: 300; font-size: 34px; line-height: 1.05; letter-spacing: 0.005em; text-wrap: balance; }
.hand { margin: 0; font-family: var(--f-hand); font-size: 16px; line-height: 1.35; color: var(--ink); opacity: 0.88; max-width: 30ch; }
.filters { display: flex; gap: 8px; overflow-x: auto; margin: 10px 0 0 -22px; padding: 4px 0 6px 22px; scrollbar-width: none; }
.filters::-webkit-scrollbar { display: none; }
.chip { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px 0 11px; border: 0; border-radius: var(--r-pill);
        cursor: pointer; white-space: nowrap; font-family: var(--f-forma); font-size: 12px; letter-spacing: 0.08em; transition: background-color 300ms var(--ease), box-shadow 300ms var(--ease); }
.chip i { font-size: 17px; }
a.chip { text-decoration: none; }
.chip .n { font-size: 10.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.chip[aria-pressed="true"] { background: var(--cream); box-shadow: 0 2px 4.7px rgb(0 0 0 / 0.18); -webkit-backdrop-filter: none; backdrop-filter: none; }   /* = the "Digital objects" pill on the homepage */

/* ---------------------------------------------------------------- the object */
.objects-grid { display: grid; gap: 14px; }
.object { padding: 8px; }
.media { position: relative; overflow: hidden; border-radius: var(--r-inner); background: #CFCAC1; aspect-ratio: 4 / 5; }
.object .media, .clip .media { aspect-ratio: 1; background: #3B3B3B; }   /* the clips are square: Blender's header on top, the icon bar at the bottom */
.media > img, .media > video { width: 100%; height: 100%; object-fit: cover; }
.media-toggle { position: absolute; right: 10px; bottom: 10px; width: 40px; height: 40px; display: grid; place-items: center;
                border: 0; border-radius: var(--r-pill); cursor: pointer; color: var(--cream);
                background: rgb(39 37 33 / 0.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.media-toggle i { font-size: 17px; }
.body { padding: 16px 12px 12px; display: grid; gap: 14px; }
.meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.no { font-family: var(--f-forma); font-size: 11px; letter-spacing: 0.12em; color: var(--ink-2); }
.kind { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px 0 9px; border-radius: var(--r-pill);
        background: var(--glass-inner); box-shadow: var(--glass-inner-shadow); font-family: var(--f-forma); font-size: 11px; letter-spacing: 0.08em; }
.kind i { font-size: 15px; }
.name { margin: 0; font-family: var(--f-display); font-weight: 300; font-size: 36px; line-height: 1; text-wrap: balance; }
.line { margin: 0; color: var(--ink-2); font-size: 14.5px; }

/* tools: icons with a word under each */
.tools { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 0; padding: 0; list-style: none; }   /* 8 tools: 2 rows of 4, one row on wide screens */
.tools li { display: grid; justify-items: center; gap: 5px; padding: 10px 2px 8px; border-radius: var(--r-tile);
            background: var(--glass-inner); box-shadow: var(--glass-inner-shadow); }
.tools i { font-size: 22px; }
.tools span { font-size: 9.5px; letter-spacing: 0.04em; color: var(--ink-2); white-space: nowrap; }

.specs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.specs li { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px 0 9px; border-radius: var(--r-pill);
            font-size: 12px; color: var(--ink-2); box-shadow: inset 0 0 0 0.5px rgb(42 33 27 / 0.25); }
.specs i { font-size: 15px; color: var(--ink); }

/* two plans side by side */
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.plan { display: grid; align-content: start; gap: 10px; padding: 14px 12px 12px; border-radius: 18px; background: var(--glass-inner); box-shadow: var(--glass-inner-shadow); }
.plan-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.plan-name { font-family: var(--f-forma); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
/* prices in the plain body sans, smaller and regular weight: a light display serif reads "luxury";
   a small, easy-to-read number reads as less money (font size and price perception, Coulter & Coulter 2005) */
.plan-price { font-family: var(--f-body); font-weight: 400; font-size: 21px; line-height: 1; letter-spacing: -0.01em; font-variant-numeric: lining-nums tabular-nums; }
.plan-tools { display: flex; flex-wrap: wrap; gap: 4px; min-height: 26px; }
.plan-tools i { width: 26px; height: 26px; display: grid; place-items: center; font-size: 16px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 0.5px rgb(42 33 27 / 0.28); }
.plan-tools .more { font-style: normal; font-size: 11px; width: auto; padding: 0 8px; color: var(--ink-2); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border: 0; border-radius: var(--r-pill);
       cursor: pointer; white-space: nowrap; text-decoration: none; font-family: var(--f-forma); font-size: 12.5px; letter-spacing: 0.06em;
       transition: background-color 300ms var(--ease), transform 200ms var(--ease); }
.btn i { font-size: 18px; }
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--pill-dark); color: var(--cream); }
.btn-primary:hover { background: #34312C; }
.btn-ghost { background: rgb(255 255 255 / 0.35); box-shadow: inset 0 0 0 0.5px rgb(42 33 27 / 0.35); color: var(--ink); }
.btn-ghost:hover { background: rgb(255 255 255 / 0.55); }
.btn[aria-busy="true"] { opacity: 0.7; cursor: progress; }
.plan .btn { width: 100%; }
.status-line:empty { margin-top: -14px; }   /* no gap until there is something to say */
.guide-dl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--ink-2); }
.guide-dl > span { display: inline-flex; align-items: center; gap: 7px; margin-right: auto; }
.guide-dl i { font-size: 17px; color: var(--ink); }
.status-line { margin: 0; min-height: 1.4em; font-family: var(--f-note); font-style: italic; font-size: 14px; color: var(--ink-2); text-align: center; }

/* ---------------------------------------------------------------- how it works */
.section-label { display: flex; align-items: center; gap: 8px; margin: 0 0 12px 4px; font-family: var(--f-forma); font-weight: 300; font-size: 11px;
                 letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
.section-label i { font-size: 16px; color: var(--ink); }
.how { padding: 26px 0 0; }
.clips { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
         margin: 0 calc(var(--gutter) * -1); padding: 4px var(--gutter) 18px; scroll-padding-left: var(--gutter); scrollbar-width: none; }
.clips::-webkit-scrollbar { display: none; }
.clip { margin: 0; padding: 6px; scroll-snap-align: start; display: grid; gap: 4px; }
.clip .media { border-radius: 18px; }
.clip figcaption { display: grid; grid-template-columns: auto 1fr; gap: 0 10px; align-items: center; padding: 8px 8px 6px; }
.clip figcaption i { grid-row: span 2; width: 34px; height: 34px; display: grid; place-items: center; font-size: 18px; border-radius: var(--r-pill);
                     background: var(--glass-inner); box-shadow: var(--glass-inner-shadow); }
.clip b { font-weight: 400; font-size: 14px; line-height: 1.3; }
.clip span { font-size: 12px; line-height: 1.4; color: var(--ink-2); }

/* ---------------------------------------------------------------- the font, notes */
.shelf, .notes { padding: 26px 0 0; }
.row { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; padding: 8px 14px 8px 8px; }
.specimen { aspect-ratio: 1; border-radius: var(--r-inner); display: grid; place-items: center; background: var(--cream);
            box-shadow: inset 0 0 0 0.5px rgb(42 33 27 / 0.15); font-family: var(--f-hand); font-size: 40px; line-height: 1; color: var(--ink); }
.row .name { font-size: 24px; }
.row-text { display: grid; gap: 8px; }
.row .specs li { height: 24px; font-size: 11px; }
.soon { box-shadow: none !important; background: var(--pill-dark); color: var(--cream) !important; }
.soon i { color: var(--cream) !important; }

.note-link { display: grid; grid-template-columns: 1fr auto; gap: 8px 14px; align-items: center; padding: 16px 16px 14px 18px; text-decoration: none; }
.note-link .t { font-family: var(--f-display); font-weight: 300; font-size: 21px; line-height: 1.15; text-wrap: balance; }
.note-link .go { width: 38px; height: 38px; display: grid; place-items: center; border-radius: var(--r-pill); background: var(--pill-dark); color: var(--cream);
                 font-size: 17px; transition: transform 400ms var(--ease); }
.note-link:hover .go { transform: translate(2px, -2px); }
.note-link .specs { grid-column: 1 / -1; }

/* ---------------------------------------------------------------- footer (as on the homepage) */
.foot { margin-top: 56px; padding: 0 0 max(28px, env(safe-area-inset-bottom)); }
.foot .wrap { display: grid; gap: 10px; }
.foot-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.foot-id { display: grid; gap: 3px; font-family: var(--f-body); font-size: 11px; line-height: 1.3; }
.foot-id span:last-child { color: var(--ink-2); }
.foot-icons { display: flex; gap: 8px; }
.foot-icons a { width: 38px; height: 38px; display: grid; place-items: center; border-radius: var(--r-pill); font-size: 18px; text-decoration: none; }
.foot-note { margin: 0; font-family: var(--f-note); font-style: italic; font-size: 15px; line-height: 1.2; color: var(--ink-2); text-align: right; }
.foot-legal { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-family: var(--f-hub); font-size: 11px; line-height: 1.3; }
.foot-legal nav { display: flex; gap: 22px; }
.foot-legal a { text-decoration: underline; text-decoration-thickness: 0.5px; text-underline-offset: 0.3em; }
.foot-tm { margin: 2px 0 0; font-family: var(--f-hub); font-size: 10.5px; line-height: 1.4; color: var(--ink-2); }   /* trademark notice */

/* ---------------------------------------------------------------- wide screens */
@media (min-width: 768px) {
  :root { --gutter: 40px; }
  .title { font-size: 44px; }
}
@media (min-width: 900px) {
  .objects-grid { grid-template-columns: 7fr 5fr; gap: 28px; align-items: start; }
  .name { font-size: 44px; }
  .tools { grid-template-columns: repeat(8, 1fr); }
  .clips { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 0; padding: 4px 0 0; overflow: visible; }
  .how { padding-top: 34px; }
  .shelf, .notes { padding-top: 0; }
  .side { display: grid; gap: 26px; }
}

/* ---------------------------------------------------------------- motion: fade in through the frost, like the homepage message */
@media (prefers-reduced-motion: no-preference) {
  .rise { opacity: 0; filter: blur(6px); transform: translateY(8px); animation: rise 1100ms var(--ease) forwards; animation-delay: calc(var(--i, 0) * 110ms); }
  @keyframes rise { to { opacity: 1; filter: none; transform: none; } }
  .reveal { opacity: 0; filter: blur(6px); transform: translateY(10px); transition: opacity 1000ms var(--ease), filter 1100ms var(--ease), transform 1000ms var(--ease); }
  .reveal.in { opacity: 1; filter: none; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}