/* ============================================================
   Vish product page: mast, the sticky 3D story, then the shop.
   Nexus V22 / Kavalsia Inc. / Siavash Sadighi, 2026-10-01.
   Extends style.css tokens only. Borderless: surfaces part by fill
   and space. The canvas lives inside the story's sticky stage
   (vish-story.js), so everything below it sits on opaque ink.
   ============================================================ */

:root{
  --leather-edge: #170b04;
  --leather: #251408;
  --leather-pool: #321d0e;
  --leather-foot: #1d1007;
  --leather-tile: url("data:image/webp;base64,UklGRqQXAABXRUJQVlA4IJgXAACQ7QCdASpAAeABPmEuk0ckIqahI7N6yNAMCWlp4r3HEo9FAQgviXZGAGiPS1yh0gxoPBEyNOCtcARvyAfdnoO92M2/rTz/9qbM38p4wf4Ltmf//nf/BcfhR+/clmiFv2Xre3p/ofJjnkPJn8A+DQgplNA6rOtaDmhoi/WnTIW0/P53GXuZSODEfEsgHgJ35DXKahYrSwBf/ul4XcAwbU8QW/C3Q5Bj0EB3QlB1oSynEKDE7kINiA60hHmSTTqog8ZEQJ/keGnMXGS1YaUabH2OhLqDNGDrGzustgfPaKwwvqe1y3VY3piiYfHpwBJa4gNl32QBk0A1c018PVAnPGnSgHV8m3mt5HUhzjpHpxb52Jyyf0D9RyAjCdk7FKcFTGiyTUOmenwt1q02Qme9YnqkCNK4AsQgUkdvnswCSZ8OERJNTlHLGUBk+hM396hEgneWmnGEcG05VulfKeRb9LE59dhLUP55RxbdmT5L6P51qQQ2PUZpYxUrYxntcOXrFLnLIRwBus7O2am15u/rms4cjgA9halPpE28grBiTJTB1ot5kC/N2Jr8/H3hZj8xH8gspWUpUVMtm3K+lLeAGJVkJxGXPXcSaJRKPm/mtGckWNIWqSpSf9wpZk3MfS8I1XLUmMlt6LJ2Q7RaXCmIqqr4Ew8lkvLrkNhJuehngOjuANMSkgehG0UBWi0qSgrqt1rXkv6NLCz/5Uy/vee3jcm7chIp1RXUZ6ZhrEfypc6vrlMRPTqH76G3jNFCK1klowSoFzKxQ9u8d0WzTdWITduLAiHmhnh06/7/ppLRg6QlVnYcFIwReZthn/6Krr5fFMWEGdXuyz/YsSGQb9A129JUk+PphvbkK16zX8AgT7Dhj3L3XVAYP49nBMB3fY4b3Mo0W39HV6B0gAzvHEWQw0kgi0o/PzSwmmJmQHnvXc5h8rnpRePc7Kz5eDtChKU6V6c0HyRhr0GHpmpB3ahD0rmTKswQNOVwC29gXLEKu5ydASZy1/1bYJvb5VO8jqEOFtVK7ZPO+rO948ZY/gr+l6vWgwlSpG8fqxEYZ7qhZjpO2NOGELWKwvCqQvf5yaCe6WM9MzDAP6ythYbQh7CQ3GIUeVjXpsrNUc9U5nLlQW07QSkkyXO1UF36fTWm+5lwnlPesbekYZZv2PQlB/5PHGcVwbHkfeCxTHuvHu+dB/Z/D8ZBin28Z7wbuST4B4pTcsB8LjRYCYjQlYmKhvRnfUWiUqcco0lBftHOTB7RUSaKsK7HWRzBCM4UGKyKuZd/6ekf0H58kukxJWOe7qOXrdVPRV4S6eqUjnhr+fE8Rk6fr8wBv8VS3NIaQ3+kAOgrtkXvQtg/VW8QvwzyCglaaNg8rqEsGRiLlpL7OTRVYBw9hSrkmCMgLSyuctvW+gPmoKd5vLOdLVIEhq+BchQNytPh6hGmoelyzi0R8NB9ATs+fE5eahxZCgbV7uyMeqszDZLekIXd9Tu+NRVhVSsE/TAw6gdcfPUr8fTO+vz6b2dvIS4zycx+RZ+1alP5hdAHKe9XQMcqdlVlXiu1etcPTV14rOyWN90xzcpnOqI3o/BOTNtxwAHyk1QAa/2M7PkQcRG92ED00i/LxQc7lMBc47hERYru2IkPeZHBsQ9UpRLrzV5MV4tmvWkfpNIDTB/o1M1VuT0Z9/d7kOwiS82MCIk5gN5KfhmAc+NylUkCzFVx12dSc5Du7VCbz/JeY+kWU+9lIvPVSO64frIOGlmcbJ6LOs2EQWZM6tM9RiJj7ZoHVNeP9ykYCncbOteXMP35/yGpgMkMPkQSgkRkPMxqrbo4ZNl5FgC1j7yWWOJ066w3aru29pFY+zhzTG+oh21DBd9rx5Y0VOga8KtX+ABBC2OkpdZEzrFQ87R26TVzKN4pb+mpG8beky3hHqf2LJaNQPya8+nfc4Y23gb0aHbM9Fw00RSlWTanpbVnpkZd+8b/asslX8BEYpE6rBNEQO93mHQzrIdO5Yvu2MMGnglbFXs8e2/SrOfCkMt1wJ23w65tP8iZDY8jhoChOA5BRXYuWHjdPxew00jhndQ+idh5igQtaiw1hUlJ0odWiV02xay5dUt/AQL50sGzYsItqbL1BiZ0eR4JrLxp0nT3yjOVVZRDGKbkNFYvKE0yaH1GSwl9mX9KTBZWPTDc3iAZoDqMrM03WOjlBtdHmFe3vz0pgs2nn2FaXVgH4DzcOoTAcl3mVw3n1QCoOufLHu6w6Qjd4SsAY+duTusMJ8ti2lJ0UHI58kJwsjxHgiuegQmb3jRai2TJmXM2JPc7+pkOxeMSb/nZkVCKoJwHD2wY1mgSc5/HsRwHvJ0LRxQV+gDztbCdx+YqMQHM69gqyqifCCvWjo3dbB+El0aGlHSlw1vdmWDOFYGGJZdFOd0TBjaoiwRzkaWI5ltFJr1gO9BmFmY5idV584i35CQUPpanrUtdGeFNo62J35oXHskS9X+WOG4IEnUjWwvt6pZEm1GOgcLBIHZk3JaChlhX6uoDktQXQLYcMSi7bOeK63AVjXOoGQr2+ngVWzgAAPgeh7QySvPPcsmgSj4UYfjS3ukmSQGkBb5vsKqdQFGyLTMEb9vMYBMz9qqzcKzrWz6eU0+1zRcpq0P2OCr4H2UyVZ0fJOP20ZPp37yMPu5VlouEzodYQozZX3jBKMtT5L03bfB2M7tZ104qRb7hlv+GOAWw60OnQ33SuZvONR5wttGjI7X0Rt1YBxOwHxNma3yrJlxS3f4O3RlptIiNW1BE3cIKvtMG57eR37msuhKv5KxI6A4uAVd7SWp3lQSS/5ARDXytTKWIDpVIDl+FWbzsH3weFUIlYuk3p6uRvo+/S/f8DfmWDVZpfsqwiacf5QObxFEOcTlYb+2ndwFTgIJksleclA/R8981OiN+YmjdAQxECFYG1ucmt2KQuGK0e4mdsk0ffhVOWyTCe5bpocNtU6VJl7jOg2hCzxXp0IxaKvtn8MhGrtYuRx2Yrg5juy/F7v26Snx90LP1fCuU6dZUKAltK6/QV7g6RRQBBfDxnsxq8e1cUG0vVrUZGjIWQ9n/CG7zD7bQfPRlUb/pBMYEpMa4+6NQoWYkzXxO7umQrE4zKXEoDH8vnbjezZI8bOxI1TGzvxNTjxeMfTGb1WnenmEiLgvuZnyahIYgy4JQLRLvmeRjAQhXDPxHbcc7WDHcofusMb1cf4dXcX2nwLRqeCxJwXSdIwrFoWZaP5RlyOLdcpUmlhOj/wYoz4MfChFWQWqpMhCHAROy2mXyV5D5u5Vg8js25SalxrjGDk9Q/CTlAdpd97GPuFIUzNAfM1ceMEgbVNoQnMFxX/JwyBxtW0nP/M3yuv5ObHmtDoz0nP1E9lYif9QasPInI5rYyPe96L4E7Mort5Ob2MX/16O2jRo/MQTfCl7mDrMca2rzXBfG1ktfiEBfyaVWMLj/PRxvJI4iGPgUr2uBRNOep8f/8pvv08VzrEB7PQ2CfUpp6jr2XVz3ZlIhSiVRO98qML95a68bno5UCR6EdXQmqNkkJ/CvyuXMJ/TFJ4NQBZqkWEFmGJ76u4pj7ylfMZCc6CIttVml8j8KPnXKDW0+uuJG7eSqODmQCh7OmVipZZ94sZ9Yg8UE5vPCX8lQt6YtFlMSnWRnSEpv+hwaSHz5Switwlba92oIru+YLsQhjDqm2NHmlSodc4afG0bQACpI+EBZdKvjeH7PeFckDs4/mv+B0FycotWx5ZVOaKXkDTqL10MCpvKufOoEU89spfa8XdaLJL9APKHBLbHQPykgOMl+cYBMZJJ63ufoft50Es8oryJnsHLsKoKmtdTGZNVJV5i2KVV+adFcxjKdVGbRKn+w/xU2wByVjMtErdnyXEOSA5PbjBX/cNCp5Hwhi5JSHt/qrl5FJqVuor5V/uVMmHrPmlGVhSNgCbw2BWsAf/CorR5y5q88tu+opIJ1PhqeVN1a19H6E2djgmWeCjLG+/QrR1bZkSKdS2fZwbrdwVFCedJu31qjnO53ixz9yUNRlLj9D6kY8rogP+HwBfDPJCXPBDDIKSVvWJEh+iBO7QIcgSNWv8XNNDncjY5HvamFpfZjRMojBvLVU1seEefkQcTNf+D46xqQoizVLFupGsr817kIUbR8mkFi5i5FjtQoxo91B3MnRsKpbrveS8s2SWd290UtU1ZdM2AarxFL5I7Q1ZIPjc/1lHk0QQHo8GnQdD84OgFz4TtLWY5RaikPnlwv5VH9xG2E7RHODs+WyhDaz4tRq8yCXAJNjqweck0yK4/qqRNPTPQNrP0/fYHPcnbcQRS6JcHS3MtPweigogBltnrZGzP/kEfrlEqsNL8k/ZIN8MoA0NP+Fz+GhC1eDVchj3j5JYsAaIDM8gOY6z6T6H0pnvlLWhRTZOQidVI1jTGIWqD3xlA9Wyl0yuu78B68D6xMp/YrbaoDsxRLbbuqxFpiHyKyw4MSgVqP29KQ261pOH1p9/4S9TUH+4Mb4i5adLDUl715xKglTtsVyfnStC2VR0svBlUjnTLDrfWqArE66KoYinDy0PhdX9SZHhgVjxp5yDnuWGTmiSZTKOW2NGGk6ucGEbW3CMc9Esgn1+thBWiQDpsF+/AF8Mvx5EEbqRjOq0MArxcjc8L6pEBOi/UgDoZw261BajoT7zaqMs5lTZG+sv4iR7nDqOXFt+nA5/6EXYWIlOQ1dFMf/uBcVBv1QyYI0FHEQfEblbRUToit3eMT0H4fkuiAVIMIJZvASygmUh4j+GwDMTi2k2BtEKK88eHBINXGIPkYHClL/9Gz9AiMSy5iUFBCxzoDvuaw3AX8qCYfIzWmjgfxRWftGA1f3OkWfYBIVr1alkYjERKWKghnq+ig5CwdR4wcNbH9+Oe7u7Pc3a5IGcTF4mSLWlVCw0Y0tM43zUXsQekbuu3SrONjKTkQ/RNQRnyzVB3Nl/iQ+M4lpsOBz5vuqZjJ61xkmP4glsCByertr9rw78b5M7pnKZmesS6u7CjG/hEclVwwf4DTqBChzZRRO/hIkYxJhpgIbgzMZa/Iv8qDwV0HWWUq5S127z0nXBKOjcaz7tpTB7liqCTTsxJ2O039vGiAxXygxEVM8D4sjnmMue1MUuuoepbYWbM4+YsWRcMqbWPsg432KhHPQlTqNvTF+pmQpTPM0LIf0vru0Ya+NyYrVuc0XvEGGeHnR1RYjn+/YX41FtqCqrO+qLoUDPobfy5uZclIb307ZyHiV/ghWsWtzU2KcDA69EZ1lPZo+fHpWs52pF97+3BoagLNUwKqFV9M/tm1FsD5uEJzCCWqh+zcDyY4Z3ew7VUT3YWS2tWlcayE0VMHRTX70R+xc5oJZI0EZ47ZCOgI9iYKKqanZNl/WGx7jAGmjpt4y4sS/SMCJfQYPY6jsMycfg5yTi3lGiILmRbopwsfc/AQyeeCdzHZu+XMtNSHkrQ/xcoYX1H4LSCYVZpypw1BZJEnEgaoudAlPDVtkKwneu8TrSxWUQ6IC2nHAq82VnuZwWVmtL5oU5/X4M8evEJZLxQUV+GVXOZlvVKZohLepwuGb6sezyS3Q7M7YXaWpU2zsoDm9BG2/66kn5PxGhLmVLQZVuAlieX3ZNnTujMEU3daV2oF/pFMpUNE8ZxJ4phf6ir85KchIA4UQW9fQQSUVp61KOB/vckXvfnzegNW0kjiKhhNxgO6qQqRe3CHz3h+CCPFuZGTrDXGXjnWXUgYH2+HBdubweQ0DErifaZ2cIALn0cT8ipXXvgHCrxSh8Jrlq8w+bSapXQ2Wzc3f2WnH7y3QwBdFkKU5QIvX8J9oJCErndRsFuLtNS+wq9kov3kttygcjGbliSEq7KB2HZZ06tNy27jHZT+NVjo+ev70e6E8mQOt7AXlQR0mLKikrTqPbK6ErK8Id+GnjMFR1FN4m+SiINSNsXsdTb2QIsn3tzXcbzzhesL46Gc4l/kAGxY6pcsaU8z2hbrVVQZ+G3ibODrqFcdJIxtTfjtyiJ66IU0Tv6u1AB6KvlAo+eNLvi5ybP/Px720tuqynkDAaTgMGFwzWWet1sOECdognUlIRBOqXKZ5jlJCy+ITZkB5CLtr4Hm+0yxVkNN8ZwbpwFv8c1XUdRzvgT4sDSsmcyG6lWqtVG+EhaPNNEQqgOErtdD25XffW6uQzCOQEQa5+P6KyRCvwz231LQraDCOVDmv1M5OubZd1O/Kn47ah4DXibqUukBrkUE/vuBRzjFL37LQ/B7vtc5bACZsxE/r37pDfRlbMPm3l6SqcR4OkN9zn+C3nICJlgkDGOUir9MzlSg/HD8b8daxTjvnfbMJ6zXuITyts7LZ6fJERs3utJ9znzotJMQhg0sWnDByQIcJ13Hxdx6YLb+Qn1Zvo6V58mYp0EZ1gI+1nV+/JhDcqpA+d9BkmlskldYfYBFP/Itjq9RhKi0TAKGo4lCMeTJuLmKMVsggXPANg/kFMreTleVMh6L9tzqY/3aRYVlGjpmOMFirJa/p3bOI3+LPhl8ebBga5BCwEhW12zKuZeaMStMtS9itxMhwIv8p/nTxo0+3kWpqV6pLwd0rMF3gvR3hDEO+KOGs0jlYry/eLeD+iZsaWJ8A9FkfV6N7LUphNVXARpqktzweeHi2+jlOuktbYUYZSXudTBonspaQ6j3B3U+vtGDQPJvb5T/2E9nyFTiDJ+KXN4vR5WnOoE9EQR881LiX2S3gLBrFuX29Fl0K1F9M9vO571jqI8jvJQsLfSv8bH/czP9oHuKzyLHCK2JU8dGb9R1HdGHkGDeGdFuIf/ZaLIZxWHdIX5olaySKXVCXkpJWTYt7KdhIUSwE/rxVqizpOiIboGpoqjNb0nVIkilNcOmrkQeOb0SulJs4ZJ1jKcHavLyEZfamhdddPg4WuQ8WbmF3E2PXi5qosuFyf43gNCFl41zpO8w1HMStDDmDOl6c+M/lrnp4r5phtCHSw9J/G3PIKJlPxCT1QfU0U3s0SpVAq0EaLiYcJV1qeaqVANDZ0JeTxqOLkCbLVMcRaLCUJhZST5FjqeVr2WxY90vSKFyMWviWEayeJKuIGxJY8gUJ83NBenYKy/hopokOUlxgr5RyQNMGHjZb0A+s96YS9Fg0clHnrZVKJwKK2Diqgtjf9yUDGbHAvf00Ai8qGFgvidmnxutyoZW1oIroeMC90nbLrkU+io/2fzb1IANGJkAQKqgjbs6XTpaLIBepQ0TnKnW/G+FJz7+CQa3Z4PmAX3ThvAZTY4JA9D2F6cAefATeM8MA5hdo98/yfO5gwqR9jj8Sy8Clun+J6vw9MQwk3kRvcTcCcdGUcRntbpd/tKSLjSLvGJTlII+3AklJmtbPUluwQ28pvCwkT0qCbQFE5lFl+n6qaBp/ODrcbZ/EWXETB7ZVto4n/JVUAsPgsu6UmqVSbCbCyLBJUZCjPgXGJfpphhsWobf9uZjvn44lsHxTgL7t9zUP9ffL8eQDxxrpJwkxiBAP7X6NB7Abo/1UxFOkDgMNZKNlnhef7C35RMCsoiw1XikOngS0WxV46ja0J9n54mgMeC+HnfNpcUGQnlmRCQDRWr/LRT7BMi9OkzSYM8uQdwvdmpovQCISOB6fLVOmxyXFlsHZ23Yqh/m9SjCptNIQ/uH4BK73bkrILHptRHKYQyKYV5XJAqAROznto6SdWDZwsxIseUkUcPrFbtl+oBQ5Oj++/9Crd6tRv27LwgF5KXtjcm82nSovPORYB2PGGpjd+vOaKOg5OzhtMvhpIZ2PByAntv8rtTrzauI0z45WknB0Nn62a/ydJBtyuRbiBOm6LS/VbxGsTg9KO0f7O1GvXWBPU0Y96h2jKHouZZ8jZldialWWJTJQ6H/eprdciR5TCTNRIP/Oqn7oAoPkLwKR3xNlp0Ot5KMd8U1n0it8ciu9p94PsKVgC744/9FVyLjXp7nbhVgGLoaJCHFQ+VmXHT62v5g0buXTGgEs4ezxrOpqOueNU0wa5uaVXqDiWVuygzAj7RGsj8O/KfV+25zZ5lnc70sVAH6Vel0roKLst45LC+6w/3diO3p521dnR6mQAAA");
  --leather-mottle: url("data:image/webp;base64,UklGRmgAAABXRUJQVlA4IFwAAABwBQCdASowACAAPjEWiUMiISEVXAUAIAMEtIAATCvb19sFXqcRKgHMm23TUB8kcsAmHyp0AP0N1/Arrac3y50Rr1ntg3tiKF56olhJW5qbDO3qp0woGm7HiQAAAA==");
  /* fill ladder, each step mixed from the identity tokens */
  --fill-1: color-mix(in oklab, var(--ink) 95%, var(--gold));
  --fill-2: color-mix(in oklab, var(--ink) 90%, var(--gold));
  --fill-3: color-mix(in oklab, var(--ink) 83%, var(--gold));
  --fill-4: color-mix(in oklab, var(--ink) 75%, var(--gold));

  /* spacing ladder */
  --s1: .5rem;
  --s2: 1rem;
  --s3: 1.5rem;
  --s4: 2.5rem;
  --s5: clamp(3rem, 6vw, 5rem);
  --s6: clamp(5rem, 11vw, 9.5rem);

  /* one split for every two-column band, so the second column shares one edge */
  --split: minmax(0, 1fr) minmax(0, 1fr);
  --split-gap: clamp(2.5rem, 6vw, 6rem);

  --mast-h: 88px;
  --note-h: 28px;
  --bar-h: 76px;

  /* the entrance curve: fast out of the gate, a long settle */
  --ease-expo: cubic-bezier(.16, 1, .3, 1);
}

/* law 18: focus has no border effect (no outline, ring or halo); it shows as a
   colour shift. style.css stays as is for the other pages */
:focus{ outline: none; }
:focus-visible{ outline: none; box-shadow: none; color: var(--gold-soft); }

/* law 18 follow-up: class colour rules beat the global :focus-visible, so these get their own colour/bg shift */
.mast-word:focus-visible{ color: var(--gold); }
.glyph-btn:focus-visible{ color: var(--gold); }
.faq-list summary:focus-visible{ color: var(--gold-soft); }
.rail:focus-visible{ background: rgba(201, 173, 125, .06); }

.display{ text-wrap: balance; }
/* body copy leading 1.55; style.css keeps 1.7 for the other pages */
body{ line-height: 1.55; }
.deck{ text-wrap: pretty; line-height: 1.55; }
/* paragraphs: a step smaller, small-copy leading (Law 7: 1.3 to 1.45) */
.deck.small{ font-size: calc(var(--deck-size) * .76); line-height: 1.45; }
.gold{ color: var(--gold-soft); }

/* ---------- mast: gold announcement bar, then Shop / Dalmend / cart ---------- */
.mast{
  position: fixed;
  z-index: 8;
  inset: 0 0 auto;
  height: var(--mast-h);
  display: grid;
  grid-template-rows: var(--note-h) 1fr;
  background: linear-gradient(to bottom, color-mix(in oklab, var(--ink) 92%, transparent), transparent);
  transition: background-color .4s var(--ease);
}
html.in-shop .mast{ background-color: var(--ink); }
.mast-note{
  position: relative;
  overflow: hidden;
  background: var(--gold);
  color: var(--ink);
}
.mast-note-track{ display: grid; height: 100%; }
/* three notes share one cell and hand over one at a time, each as a whole line */
.mast-note-track span{
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: var(--pad);
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}
.mast-note-track b{ font-weight: 600; margin-inline: .35em; }
.mast-note-track span + span{ opacity: 0; visibility: hidden; }
@media (prefers-reduced-motion: no-preference){
  .mast-note-track span,
  .mast-note-track span + span{
    visibility: visible;
    animation: noteCycle 15s var(--ease) infinite backwards;
  }
  .mast-note-track span:nth-child(2){ animation-delay: 5s; }
  .mast-note-track span:nth-child(3){ animation-delay: 10s; }
}
@keyframes noteCycle{
  0%{ opacity: 0; transform: translateY(70%); }
  3%, 30%{ opacity: 1; transform: none; }
  34%, 100%{ opacity: 0; transform: translateY(-70%); }
}
/* the first note holds still for the first beat, then joins the cycle */
@media (prefers-reduced-motion: no-preference){
  .mast-note-track span:first-child{ animation-name: noteCycleFirst; }
}
@keyframes noteCycleFirst{
  0%, 30%{ opacity: 1; transform: none; }
  34%, 96%{ opacity: 0; transform: translateY(-70%); }
  97%{ opacity: 0; transform: translateY(70%); }
  100%{ opacity: 1; transform: none; }
}
.mast-row{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
}
.mast-link{
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cream);
  transition: color .3s var(--ease);
}
.mast-word{
  font-family: var(--f-display);
  font-size: 1.45rem;
  font-weight: 500;
  letter-spacing: .3em;
  margin-right: -.3em; /* the tracking after the last letter would push the word off centre */
  text-transform: uppercase;
  color: var(--gold-soft);
  line-height: 1;
}
.mast-cart{
  justify-self: end;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-right: -12px;
  color: var(--cream);
  transition: color .3s var(--ease), transform .3s var(--ease);
}
.mast-link:hover, .mast-link:focus-visible,
.mast-cart:hover, .mast-cart:focus-visible{ color: var(--gold); }
.mast-cart:hover{ transform: translateY(-1px); }

/* ---------- the story: one sticky stage, the beats scroll over it ---------- */
.story{ position: relative; background: var(--ink); }
.stage{
  position: sticky;
  top: 0;
  z-index: 0;
  height: 100svh;
  overflow: hidden;
  background: var(--ink);
}
/* the photograph is the no-WebGL stand-in, never a first frame (see below) */
.stage-poster{
  position: absolute;
  top: 0;
  left: 0;
  width: 52%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 62%;
  -webkit-mask-image: linear-gradient(to right, #000 62%, transparent);
          mask-image: linear-gradient(to right, #000 62%, transparent);
}
#scene{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
}
/* a photograph never matches the render's pose, light or framing, so it
   only stands in when there is no WebGL; the live figure fades in from ink */
.stage-poster{ opacity: 0; }
#scene{ transition: opacity 1.1s var(--ease); }
.stage.is-live #scene{ opacity: 1; }
html.no-webgl .stage-poster{ opacity: 1; }


.beats{
  position: relative;
  z-index: 2;
  margin-top: -100svh;
}
.beat{
  display: grid;
  grid-template-columns: var(--split);
  gap: var(--split-gap);
  align-items: center;
  min-height: 115svh;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
}
.beat-copy{
  grid-column: 2;
  display: grid;
  gap: var(--s3);
  max-width: 31rem;
  padding-block: var(--s5);
}
/* the beats alternate with the camera: odd beats keep her on the left and
   the copy on the right, even beats swap, and the copy drifts in from its
   own outer edge (--dx) */
.beat-copy{ --dx: 3.5rem; }
.beat:nth-child(even) .beat-copy{ grid-column: 1; justify-self: start; --dx: -3.5rem; }
.beat-title{ font-size: clamp(2.2rem, 4.4vw, 3.6rem); max-width: 12em; }
.beat-title em{ font-style: italic; color: var(--gold-soft); }
.beat-copy .deck.small{ max-width: 42ch; }
/* the anchor headline: the setup line, then the payoff in gold italic under
   a candle glow, both at the chapter title rank so it reads with the other
   beats; the break is forced, the payoff never outsizes the line it answers */
.beat-title-2l{ max-width: none; line-height: 1.05; }
.beat-title-2l em{
  letter-spacing: -.015em;
  text-shadow: 0 0 .5em color-mix(in oklab, var(--gold) 32%, transparent);
}
/* the anchor band spans both columns so the line can carry its size; she
   stands clear of it on the right */
.beat-anchor .beat-copy,
.beat-anchor:nth-child(even) .beat-copy{ grid-column: 1 / -1; justify-self: start; }
/* a warm pool of light comes up behind the copy while the beat holds; it is
   part of the copy, so it passes with it */
.beat-anchor .beat-copy{ position: relative; isolation: isolate; }
.beat-anchor .beat-copy::before{
  content: "";
  position: absolute;
  z-index: -1;
  inset: -35% -30% -35% -25%;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--gold) 16%, transparent), transparent);
  pointer-events: none;
}
@keyframes ruleDraw{ from{ transform: scaleX(0); } }
@media (prefers-reduced-motion: no-preference){
  .beat-title-2l em{ animation: candleGlow 5.5s var(--ease) infinite; }
}
@keyframes candleGlow{
  50%{ text-shadow: 0 0 .65em color-mix(in oklab, var(--gold) 46%, transparent); }
}
/* the forced break survives vish-fx.js line masks: nowrap + a newline before the
   payoff. Unsplit (no JS, reduced motion) the newline opens the em; while vish-fx.js
   measures, it closes the last setup word instead (set inline: an inline-block
   word would keep its newline to itself), because a newline inside the em
   stretches its box back onto the setup row and WebKit then masks "She" with "room.".
   Once the rows are masked each row is already one line, so no newline is left */
.beat-title-2l{ white-space: nowrap; }
.beat-title-2l:not(.fx-lines) em:first-of-type::before{ content: "\A"; white-space: pre; }
.beat-title-2l.fx-lines > .fx-w:has(+ em){ display: inline; }
.beat-title-2l.fx-lines > .fx-w:has(+ em)::after{ content: "\A"; white-space: pre; }
.beat-copy:has(.beat-title-2l){ max-width: 46rem; }
/* desktop: the same chapter rank vish-scroll.css gives beats 2-4, held over
   its own step-down for the anchor line */
@media (min-width: 861px){
  .beat-anchor .beat-title.beat-title-2l{ font-size: clamp(1.9rem, 3.4vw, 3.1rem); }
}

/* hero beat */
.beat-hero{
  min-height: 100svh;
  padding-top: var(--mast-h);
}
.hero-copy{ gap: var(--s2); }
.hero-name{
  font-size: clamp(3.8rem, 8.4vw, 6rem);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: .95;
  margin-right: -.06em;
}
.hero-kind{
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  line-height: 1.2;
  color: var(--gold-soft);
  margin-top: calc(var(--s1) * -1);
}
.hero-line{
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1.12;
  letter-spacing: -.015em;
  color: var(--cream);
  max-width: 17em;
  text-wrap: balance;
  margin-top: var(--s2);
}
.hero-proof{
  display: flex;
  align-items: center;
  gap: .7rem;
  font-size: .85rem;
  color: var(--cream-soft);
}
.stars{ display: inline-flex; gap: 3px; }
.stars svg{ width: 13px; height: 13px; fill: var(--gold); }
.hero-actions{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s3);
  margin-top: var(--s2);
}
.hero-trust{ font-size: .8rem; color: var(--cream-soft); }

/* the load intro: the room lights, she settles, and only then does the page
   arrive. vish-story.js lands html.is-lit when the settle ends; until then the
   header and bar and the hero copy are hidden and unreachable
   (opacity, visibility, pointer-events, so nothing shifts and nothing takes
   focus). They arrive in order: header 0, headline 100ms, copy and CTA from
   240ms in 80ms steps. With no class at all the same reveal
   runs on its own at 4s (pure CSS fallback, a WebGL failure still shows the
   page). Reduced motion skips all of it: the markup is the final state. */
@media (prefers-reduced-motion: no-preference){
  html:not(.is-lit) :is(.mast, .hero-copy > *){
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    animation: introLate .8s var(--ease) 4s forwards;
  }
  html:not(.is-lit) .hero-copy > *{
    transform: translateY(14px);
    animation-name: introLateRise;
    animation-duration: .9s;
  }
  /* behind the preloader the fallback clock waits: a different name (same
     keyframes) so the 4s restarts at the lift; if the page script dies the
     cover's 7.5s safety net plus the 4s still shows the copy */
  html.pl-hold:not(.is-lit) .mast{ animation-name: introLateHold; animation-delay: 11.5s; }
  html.pl-hold:not(.is-lit) .hero-copy > *{ animation-name: introLateRiseHold; animation-delay: 11.5s; }
  /* the missing to-keyframe is each element's own resting style */
  html.is-lit .mast{
    animation: introIn .8s var(--ease) var(--intro-d, 0ms) backwards;
  }
  html.is-lit .hero-copy > *{
    animation: introRise .9s var(--ease) var(--intro-d) backwards;
  }
  /* already shown by the fallback: no second reveal, so nothing blinks */
  html.is-lit.intro-shown :is(.mast, .hero-copy > *){ animation: none; }
  .hero-copy > *{ --intro-d: calc(240ms + (var(--i) - 1) * 80ms); }
  .hero-copy > :first-child{ --intro-d: 100ms; }
}
.hero-copy > :nth-child(2){ --i: 1; }
.hero-copy > :nth-child(3){ --i: 2; }
.hero-copy > :nth-child(4){ --i: 3; }
.hero-copy > :nth-child(5){ --i: 4; }
.hero-copy > :nth-child(6){ --i: 5; }
@keyframes introIn{ from{ opacity: 0; visibility: hidden; } }
@keyframes introRise{ from{ opacity: 0; visibility: hidden; transform: translateY(14px); } }
@keyframes introLate{ to{ opacity: var(--shown, 1); visibility: visible; pointer-events: auto; } }
@keyframes introLateRise{ to{ opacity: 1; visibility: visible; pointer-events: auto; transform: none; } }
@keyframes introLateHold{ to{ opacity: var(--shown, 1); visibility: visible; pointer-events: auto; } }
@keyframes introLateRiseHold{ to{ opacity: 1; visibility: visible; pointer-events: auto; transform: none; } }

/* ---------- preloader: a quiet cover until the scene is warm ----------
   The page's own ground, the masthead wordmark and one thin line that
   draws the load. Shown only while html.pl-hold (set by the inline head
   script); html.pl-lift fades it. If the script dies, the 7.5s net
   below clears it. */
.preload{ display: none; }
html.pl-hold .preload, html.pl-lift .preload{
  display: grid;
  position: fixed;
  inset: 0;
  z-index: 50;
  place-items: center;
  align-content: center;
  gap: 22px;
  overflow: hidden;
  /* the same tooled wall the scene lights: relief tile + mottle blended
     over a dark lit base, so the leather is there on the very first paint */
  background-color: var(--leather);
  background-image:
    var(--leather-tile),
    var(--leather-tile),
    var(--leather-mottle),
    linear-gradient(to right, var(--leather-edge) 0, transparent 36%, transparent 64%, var(--leather-edge) 100%),
    linear-gradient(to top, color-mix(in oklab, var(--leather-edge) 70%, transparent) 0, transparent 30%),
    radial-gradient(ellipse 62% 58% at 56% 22%, var(--leather-pool) 0, transparent 100%);
  background-size: 20vh 28.8vh, 20vh 28.8vh, cover, auto, auto, auto;
  background-position: calc(50% - .9vh) calc(50% - 1.9vh), calc(50% - .9vh) calc(50% - 1.9vh), center, center, center, center;
  background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  /* hard-light, not overlay: overlay keys off the dark base and flattened the trellis */
  background-blend-mode: hard-light, hard-light, overlay, normal, normal, normal;
  transition: opacity .68s var(--ease) .12s, visibility 0s linear .8s;
}
@media (max-width: 860px){
  html.pl-hold .preload, html.pl-lift .preload{
    background-image:
      var(--leather-tile),
      var(--leather-tile),
      var(--leather-mottle),
      linear-gradient(to right, var(--leather-edge) 0, transparent 36%, transparent 64%, var(--leather-edge) 100%),
      radial-gradient(ellipse 80% 40% at 60% 20%, var(--leather-pool) 0, transparent 100%);
    background-size: min(32.4vw, 14.8vh) calc(min(32.4vw, 14.8vh) * 1.44), min(32.4vw, 14.8vh) calc(min(32.4vw, 14.8vh) * 1.44), cover, auto, auto;
    background-position: calc(50% + .5vh) -.9vh, calc(50% + .5vh) -.9vh, center, center, center;
    background-blend-mode: hard-light, hard-light, overlay, normal, normal;
  }
  /* the ink foot sits above the tile, so the trellis stops at the wall's edge */
  html.pl-hold .preload::before, html.pl-lift .preload::before{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 55%, var(--ink) 66%);
    pointer-events: none;
  }
}
html.pl-hold{ overflow: hidden; scrollbar-gutter: stable; animation: plFree 0s 7.5s forwards; }
html.pl-hold .preload{ animation: plGone .5s var(--ease) 7.5s forwards; }
html.pl-lift .preload{ opacity: 0; visibility: hidden; pointer-events: none; }
@keyframes plGone{ to{ opacity: 0; visibility: hidden; pointer-events: none; } }
@keyframes plFree{ to{ overflow: visible; } }

/* the candle's glow: warms with real progress, breathes slowly, blooms on exit */
.preload-light{
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: calc(.3 + var(--pl, 0) * .7);
  transition: opacity 1s var(--ease), transform .35s var(--ease);
}
.preload-light::before{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 46% 40% at 50% 50%, color-mix(in oklab, var(--gold) 70%, transparent) 0, transparent 100%);
  animation: plBreathe 4.8s ease-in-out infinite alternate;
  will-change: opacity, transform;
}
@keyframes plBreathe{
  from{ opacity: .82; transform: scale(1); }
  to{ opacity: 1; transform: scale(1.04); }
}
html.pl-lift .preload-light{ opacity: 1; transform: scale(1.2); }

.preload-mark{
  position: relative;
  display: grid;
  transition: transform .4s var(--ease), opacity .4s var(--ease);
}
html.pl-lift .preload-mark{ transform: translateY(-6px); opacity: 0; }
.preload-word, .preload-gild{
  grid-area: 1 / 1;
  font-family: var(--f-display);
  font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2.3rem);
  font-weight: 500;
  letter-spacing: .32em;
  margin-right: -.32em;
  text-transform: uppercase;
  line-height: 1;
  opacity: 0;
  transition: opacity .6s var(--ease);
}
/* blind deboss: darker than the hide, lip catching light below, shade above */
.preload-word{
  color: color-mix(in oklab, var(--leather-edge) 80%, #000);
  text-shadow: 0 1px 0 color-mix(in oklab, var(--gold-soft) 16%, transparent), 0 -1px 0 rgba(0,0,0,.55);
}
/* gilding fills in as the load completes */
.preload-gild{ color: var(--gold-soft); }
/* the word waits for its own face, so it never swaps in a fallback */
html.pl-font .preload-word{ opacity: 1; }
html.pl-font .preload-gild{ opacity: calc(var(--pl, 0) * .92); }
/* borderless-keep: tooled fillet, a groove that fills with gilt as the load draws */
.preload-line{
  display: block;
  width: 72px;
  height: 1px;
  background: color-mix(in oklab, #000 55%, transparent);
  box-shadow: 0 1px 0 color-mix(in oklab, var(--gold-soft) 12%, transparent);
  position: relative;
  overflow: hidden;
}
.preload-line::after{
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gold-soft);
  transform: scaleX(var(--pl, 0));
  transform-origin: left center;
  transition: transform .5s var(--ease);
}
@media (prefers-reduced-motion: reduce){
  html.pl-hold .preload, html.pl-lift .preload{ transition: opacity .2s linear, visibility 0s linear .2s; }
  .preload-word, .preload-gild, .preload-line::after, .preload-light, .preload-mark{ transition: none; }
  .preload-light::before{ animation: none; }
  html.pl-lift .preload-light, html.pl-lift .preload-mark{ transform: none; }
}
/* each beat's copy arrives and leaves with its own stretch of the scroll */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .beat:not(.beat-hero) .beat-copy{
      animation: beatPass linear both;
      animation-timeline: view();
      animation-range: cover 8% cover 92%;
    }
    .beat-hero .beat-copy{
      animation: beatLeave linear both;
      animation-timeline: view();
      animation-range: exit 10% exit 80%;
    }
  }
  /* phone: the copy is pinned under her (sticky, below), so its pass runs
     on the beat's timeline and it leaves before the beat lifts it into her */
  @media (prefers-reduced-motion: no-preference) and (max-width: 860px){
    .beat:not(.beat-hero) .beat-copy{
      animation-name: beatPassPhone;
      animation-timeline: --beat;
      animation-range: cover 0% cover 56%;
    }
  }
}
@keyframes beatPassPhone{
  0%{ opacity: 0; transform: translateY(2rem); filter: blur(6px); }
  25%, 88%{ opacity: 1; transform: none; filter: none; }
  100%{ opacity: 0; filter: blur(6px); }
}
@keyframes beatPass{
  0%{ opacity: 0; transform: translate(var(--dx), 2rem); filter: blur(8px); }
  30%, 70%{ opacity: 1; transform: none; filter: none; }
  100%{ opacity: 0; transform: translate(calc(var(--dx) * -.4), -2.5rem); filter: blur(8px); }
}
@keyframes beatLeave{
  to{ opacity: 0; transform: translateY(-3rem); filter: blur(6px); }
}

/* ============================================================
   below the story: every band enters. Visible by default; only
   html.js-armed (set by vish-story.js before initReveals) hides
   anything, and reduced motion shows it all at once.
   ============================================================ */
.band{ padding-block: var(--s6); }
.wrap{
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* words and blocks: the house reveal, on the expo curve, staggered by --d */
html.js-armed .reveal{
  transition-duration: 1.1s;
  transition-timing-function: var(--ease-expo);
  transition-delay: calc(var(--d, 0) * 90ms);
}
html.js-armed .reveal-heading .word{
  transition-duration: 1s, .8s;
  transition-timing-function: var(--ease-expo);
}

/* photographs: a clip wipe opens the frame while the picture settles
   from 1.12 to rest inside it. --wipe sets the direction per band. */
.plate{
  --wipe: inset(100% 0 0 0);
  position: relative;
  overflow: hidden;
  background: var(--fill-1);
  border-radius: 3px;
}
.plate img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
html.js-armed .plate.reveal{
  opacity: 1;
  transform: none;
  filter: none;
  clip-path: var(--wipe);
  transition: clip-path 1.3s var(--ease-expo) calc(var(--d, 0) * 120ms);
  will-change: clip-path;
}
html.js-armed .plate.reveal img{
  transform: scale(1.12);
  transition: transform 1.6s var(--ease-expo) calc(var(--d, 0) * 120ms);
}
html.js-armed .plate.reveal.is-in{ clip-path: inset(0 0 0 0); }
html.js-armed .plate.reveal.is-in img{ transform: scale(1); }
html.js-armed .plate.reveal.is-in:hover img{ transform: scale(1.035); transition-delay: 0s; }
.plate:not(.reveal):hover img{ transform: scale(1.035); }
.plate:not(.reveal) img{ transition: transform 1.4s var(--ease); }

@media (prefers-reduced-motion: reduce){
  html.js-armed .plate.reveal,
  html.js-armed .plate.reveal img{ clip-path: none !important; transform: none !important; transition: none !important; }
  html.js-armed .reveal{ transition: none !important; }
}

/* bare glyph controls: the hit area is padding, the glyph sits on the page */
.glyph-btn{
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  color: var(--cream);
  cursor: pointer;
  transition: color .3s var(--ease), transform .4s var(--ease-expo), opacity .3s var(--ease);
}
.glyph-btn:hover{ color: var(--gold); }
.glyph-btn:disabled{ opacity: .28; cursor: default; }

/* ---------- the work: one slow running band ---------- */
.ticker{ background: var(--fill-1); padding-block: 1.4rem; }
.ticker-run{
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.ticker-track{
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem 0;
  padding-inline: var(--pad);
}
.ticker-track li{
  display: flex;
  align-items: center;
  gap: 2.6rem;
  padding-right: 2.6rem;
  white-space: nowrap;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cream-soft);
}
/* a drawn diamond between facts */
.ticker-track li::after{
  content: "";
  width: 5px;
  height: 5px;
  flex: none;
  background: var(--gold);
  transform: rotate(45deg);
}
.ticker-track.is-looping,
.quotes-track.is-looping{
  flex-wrap: nowrap;
  justify-content: flex-start;
  width: max-content;
  padding-inline: 0;
  animation: runBand var(--run, 60s) linear infinite;
}
.ticker-run:hover .ticker-track,
.quotes:hover .quotes-track{ animation-play-state: paused; }
@keyframes runBand{ to{ transform: translateX(calc(-1 * var(--shift, 50%))); } }

/* ---------- the gallery: a rail of rooms ---------- */
.situ{ padding-bottom: var(--s5); }
.situ-head{
  display: grid;
  justify-items: center;
  gap: var(--s2);
  text-align: center;
  margin-bottom: var(--s5);
}
.situ-head .display{ margin-inline: auto; }
.rail{
  --edge: max(var(--pad), calc((100% - var(--maxw)) / 2 + var(--pad)));
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(15rem, 23vw, 21rem);
  align-items: start;
  gap: var(--s2);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--edge);
  padding-inline: var(--edge);
  padding-bottom: var(--s4);
  scrollbar-width: none;
  cursor: grab;
}
.rail::-webkit-scrollbar{ display: none; height: 0; }
.rail.is-drag{ scroll-snap-type: none; cursor: grabbing; user-select: none; }
.rail .plate{ aspect-ratio: 9 / 16; scroll-snap-align: start; }
.rail .plate:nth-child(even){ margin-top: var(--s4); }
/* mixed frames: a squarer plate for close detail, a wide one for the plinth */
.rail .plate.plate--sq{ aspect-ratio: 4 / 5; }
.rail .plate.plate--wide{ aspect-ratio: 1 / 1; }
@media (min-width: 861px){
  .rail{ align-items: center; }
  .rail .plate.plate--wide{ aspect-ratio: auto; grid-column: span 2; align-self: stretch; }
  .rail .plate--wide img{ position: absolute; inset: 0; }
}
.rail img{ -webkit-user-drag: none; }
.rail-foot{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  margin-top: var(--s2);
}
/* borderless-keep: a drawn progress line, it measures the rail, it frames nothing */
.rail-meter{
  position: relative;
  flex: 1;
  max-width: 18rem;
  height: 1px;
  background: color-mix(in oklab, var(--cream) 16%, transparent);
}
.rail-meter span{
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform-origin: left;
  transform: scaleX(var(--p, .3));
  transition: transform .5s var(--ease-expo);
}
.rail-ctrl{ display: flex; gap: var(--s1); margin-right: -10px; }
#railPrev:not(:disabled):hover{ transform: translateX(-3px); }
#railNext:not(:disabled):hover{ transform: translateX(3px); }

/* ---------- the case: centred, the facts in a row beneath ----------
   bar: a maison savoir-faire page; the statement is lit, a wick draws down
   into it, and the four pillars are counted and drawn in one by one */
.kept{ position: relative; isolation: isolate; overflow: clip; background: var(--fill-1); }
/* a candle pool over the statement, it comes up as the band arrives */
.kept::before{
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 0;
  width: min(70rem, 140vw);
  aspect-ratio: 1.6;
  translate: -50% -32%;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--gold) 15%, transparent), color-mix(in oklab, var(--gold) 5%, transparent) 55%, transparent);
  pointer-events: none;
}
.kept-inner{
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--s3);
  text-align: center;
  counter-reset: fact;
}
/* borderless-keep: a drawn wick that descends into the statement, not a rim */
.kept-inner::before{
  content: "";
  width: 1px;
  height: clamp(2.5rem, 6vw, 4.5rem);
  margin-bottom: var(--s1);
  background: linear-gradient(to bottom, transparent, var(--gold));
  transform-origin: top center;
}
/* the payoff word in gold italic under the candle glow; the mask is padded so the glow is never trimmed */
#kept-title .fx-line{ padding: .12em .4em .3em; margin: -.12em -.4em -.3em; }
#kept-title .fx-w:nth-child(2){
  font-style: italic;
  color: var(--gold-soft);
  text-shadow: 0 0 .5em color-mix(in oklab, var(--gold) 32%, transparent);
}
/* borderless-keep: a drawn gold rule closes the statement, opening from its centre */
.kept-inner > .deck::after{
  content: "";
  display: block;
  width: min(14rem, 50%);
  height: 1px;
  margin: var(--s4) auto 0;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
}
.kept-inner .display{ margin-inline: auto; }
.kept-inner > .deck{ max-width: 56ch; font-size: max(11.5px, calc(var(--deck-size) * .66)); }
.facts{
  width: 100%;
  margin-top: var(--s5);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s4) clamp(1.5rem, 3vw, 3rem);
}
/* each fact: a counted numeral, a drawn stroke, then the words; a pool of
   candle light rises behind it on hover while it lifts */
.fact{
  counter-increment: fact;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: .7rem;
  padding: var(--s3) var(--s2);
  border-radius: 3px;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--gold) 12%, transparent), transparent) 50% 30% / 0% 0% no-repeat;
}
html.js-armed .fact.reveal{
  transition: opacity .9s var(--ease), transform .9s var(--ease-expo), filter .9s var(--ease), background-size .9s var(--ease-expo);
  transition-delay: calc(var(--d, 0) * 90ms);
}
.fact:hover{ background-size: 100% 100%; }
html.js-armed .fact.reveal.is-in:hover{ transform: translateY(-4px); transition-delay: 0s; }
.fact::before{
  order: -2;
  content: counter(fact, upper-roman) / "";
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  line-height: 1;
  letter-spacing: .08em;
  color: color-mix(in oklab, var(--gold) 70%, transparent);
}
/* borderless-keep: a short drawn gold stroke that opens each fact */
.fact::after{
  order: -1;
  content: "";
  width: 2rem;
  height: 1px;
  margin-bottom: .4rem;
  background: var(--gold);
  transform-origin: center;
}
html.js-armed .fact.reveal::after{
  transform: scaleX(0);
  transition: transform 1.2s var(--ease-expo);
  transition-delay: calc(var(--d, 0) * 90ms + 300ms);
}
html.js-armed .fact.reveal.is-in::after{ transform: none; }
.fact:hover dt{ text-shadow: 0 0 .5em color-mix(in oklab, var(--gold) 36%, transparent); }
.fact dt{ transition: text-shadow .6s var(--ease); }
/* scroll-linked: the wick draws down, the closing rule opens, the pool brightens */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .kept-inner::before{ animation: wickDraw linear both; animation-timeline: view(); animation-range: entry 20% cover 35%; }
    .kept-inner > .deck::after{ animation: ruleDraw linear both; animation-timeline: view(); animation-range: entry 60% cover 45%; }
    .kept::before{ animation: poolRise linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
  }
}
@keyframes wickDraw{ from{ transform: scaleY(0); } }
@keyframes poolRise{ from{ opacity: 0; scale: .7; } }
@media (prefers-reduced-motion: no-preference){
  #kept-title .fx-w:nth-child(2){ animation: candleGlow 5.5s var(--ease) infinite; }
}
@media (prefers-reduced-motion: reduce){
  html.js-armed .fact.reveal::after{ transform: none; transition: none; }
}
.fact dt{
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 2vw, 1.7rem);
  line-height: 1.1;
  color: var(--gold-soft);
}
.fact dd{ font-size: .8rem; color: color-mix(in oklab, var(--cream-soft) 82%, #000); line-height: 1.45; max-width: 26ch; text-wrap: balance; }

/* ---------- acquire: the centred product block (matches the live Vish page) ---------- */
.buy{ scroll-margin-top: var(--mast-h); background: #020202; padding-block: 0; }
.buy .product{
  --pb-gold: #c9ad7d;
  width: 100%;
  max-width: 650px;
  margin-inline: auto;
  padding: 60px 20px;
  background: #020202;
  text-align: center;
  font-family: "Montserrat", var(--f-body);
}
.buy .product-head{ display: flex; align-items: center; justify-content: center; margin-bottom: 50px; }
.rule-eyebrow{
  display: inline-flex;
  align-items: center;
  font-family: "Montserrat", var(--f-body);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 4px;
  text-transform: uppercase;
  white-space: nowrap;
  color: #777;
}
.buy .product-head .rule-eyebrow{ flex: 1; justify-content: center; }
.rule-eyebrow::before,
.rule-eyebrow::after{
  content: "";
  flex: 1;
  height: 1px;
  background: #222;
  margin-inline: 20px;
}
.buy .product-name{
  font-family: var(--f-display);
  font-size: 48px;
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: 1px;
  color: var(--pb-gold);
  margin: 0 0 10px;
}
.buy .product-size{
  font-family: var(--f-display);
  font-size: 18px;
  font-weight: 300;
  letter-spacing: 2px;
  color: #ccc;
  margin: 0 0 10px;
  text-transform: capitalize;
}
.buy .product-price{
  font-family: var(--f-display);
  font-size: 38px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--pb-gold);
  margin: 0 0 15px;
}
.buy .product-price s{ opacity: .5; margin-right: 9px; }
.buy .product-copy{
  font-family: var(--f-display);
  font-size: 18px;
  font-weight: 300;
  line-height: 27px;
  color: #777;
  padding: 0 30px;
  margin: 0 0 20px;
}
.buy .tiers{ border: 0; padding: 0; margin: 0; min-width: 0; width: 100%; display: block; }
.buy .tiers-title{
  display: block;
  width: 100%;
  padding: 0;
  font-family: "Montserrat", var(--f-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-align: center;
  color: var(--pb-gold);
  margin-bottom: 8px;
}
.buy .tiers-note{
  font-family: "Inter", var(--f-body);
  font-size: 13px;
  font-weight: 300;
  color: #888;
  margin: 0 0 25px;
  text-align: center;
}
.buy .tier-table{
  display: flex;
  flex-direction: column;
  border-block: 1px solid rgba(201, 173, 125, .25);
  background: rgba(0, 0, 0, .2);
  margin-bottom: 25px;
  text-align: left;
}
.buy .tier-head{
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 16px 25px;
  font-family: "Montserrat", var(--f-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--pb-gold);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.buy .tier-head span{ opacity: .8; }
.buy .tier{
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  min-height: 0;
  padding: 24px 25px;
  background: transparent;
  border-radius: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  cursor: pointer;
  transition: background .3s var(--ease);
}
.buy .tier:last-child{ border-bottom: 0; }
.buy .tier:hover{ background: rgba(201, 173, 125, .05); }
.buy .tier:has(input:checked){ background: rgba(201, 173, 125, .13); box-shadow: inset 0 0 36px rgba(201, 173, 125, .14); }
.buy .tier:has(input:checked) .tier-radio{ box-shadow: 0 0 12px 3px rgba(201, 173, 125, .38); }
.buy .tier:has(input:focus-visible){ background: rgba(201, 173, 125, .09); }
.buy .tier:has(input:checked:focus-visible){ background: rgba(201, 173, 125, .17); }
.buy .tier input{ position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.buy .tier-radio{
  position: relative;
  flex: none;
  width: 20px;
  height: 20px;
  margin-right: 18px;
  border: 1px solid rgba(201, 173, 125, .25);
  border-radius: 50%;
  transition: border-color .3s var(--ease);
}
.buy .tier:has(input:checked) .tier-radio{ border-color: var(--pb-gold); }
.buy .tier:has(input:checked) .tier-radio::after{
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--pb-gold);
}
.buy .tier-name{
  flex: 1;
  min-width: 0;
  font-family: var(--f-display);
  font-size: 21px;
  font-weight: 700;
  color: #f5f5f5;
  white-space: nowrap;
}
.buy .tier:has(input:checked) .tier-name{ color: #f5f5f5; }
.buy .tier-price{
  flex: none;
  font-family: var(--f-display);
  font-size: 24px;
  font-weight: 500;
  color: var(--pb-gold);
  white-space: nowrap;
}
.buy .tier-price small{
  font-family: "Montserrat", var(--f-body);
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0;
  color: #888;
  margin-left: 6px;
}
.buy .buy-total{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin: 0 0 25px;
  padding: 18px 25px;
  border: 1px solid rgba(201, 173, 125, .25);
  background: rgba(201, 173, 125, .04);
  border-radius: 0;
}
.buy .buy-total-label{
  font-family: "Montserrat", var(--f-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #999;
}
.buy .buy-total output{
  font-family: var(--f-display);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--pb-gold);
}
.buy .cta-block{
  display: block;
  width: 100%;
  min-height: 0;
  padding: 24px;
  border: 0;
  border-radius: 0;
  background: var(--pb-gold);
  color: #020202;
  font-family: "Montserrat", var(--f-body);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-align: center;
  box-shadow: 0 4px 15px rgba(201, 173, 125, .15);
}
.buy .cta-block:hover,
.buy .cta-block:focus-visible{ background: #d6bd90; color: #020202; }
.buy .buy-gift{
  font-family: "Inter", var(--f-body);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .4px;
  color: #b6b1ab;
  margin: 18px auto 4px;
}

/* ---------- acquire: two columns on desktop, stacked on phone ---------- */
.buy-grid{ display: block; }
.buy-media{ margin: 0; padding: 0; background: #020202; text-align: center; }
.buy-media img{ display: block; width: 100%; max-width: 560px; height: auto; margin-inline: auto; background: #020202; }
.buy-media figcaption{
  font-family: var(--f-display);
  font-size: 18px; font-weight: 300; line-height: 1.5;
  color: #8a8680;
  max-width: 34ch; margin: 8px auto 0; padding-inline: 20px;
  text-wrap: balance;
}
@media (min-width: 1024px){
  .buy-grid{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(32px, 4vw, 72px);
    align-items: center;
    max-width: 1280px;
    margin-inline: auto;
    padding: 80px clamp(24px, 4vw, 56px);
  }
  .buy-media img{ max-width: none; }
  .buy-media figcaption{ margin-top: 14px; }
  .buy-grid .product{ max-width: 600px; margin-inline: 0; padding: 0; }
}

/* ---------- adored: the UGC wall, flat (no tilt, no blur layer, no gradient text) ---------- */
.ugc{ background: #020202; padding-block: clamp(56px, 8vw, 110px); overflow: hidden; }
.ugc-wall{
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  max-width: 1280px;
  margin-inline: auto;
}
.ugc-text{ order: -1; text-align: center; padding-inline: 24px; }
.ugc-text h2{
  font-family: var(--f-display);
  font-size: clamp(44px, 6vw, 84px);
  font-weight: 600; font-style: italic;
  line-height: 1;
  letter-spacing: -.02em;
  color: #c9ad7d;
  margin: 0 0 18px;
}
.ugc-text p{
  font-family: var(--f-display);
  font-size: clamp(17px, 1.5vw, 21px); font-weight: 300; line-height: 1.5;
  color: #8a8680;
  max-width: 26ch; margin: 0 auto;
  text-wrap: balance;
}
.ugc-col{ display: flex; overflow: hidden; }
.ugc-b{ display: none; }
.ugc-track{
  display: flex; flex: none; gap: 12px; margin: 0; padding: 0 6px; list-style: none;
}
.ugc-track li{ flex: none; width: 132px; aspect-ratio: 4 / 5; border-radius: 6px; overflow: hidden; background: #111; }
.ugc-track img{ display: block; width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: no-preference){
  .ugc-track{ animation: ugc-x 40s linear infinite; }
}
@keyframes ugc-x{ to{ transform: translateX(-100%); } }
@keyframes ugc-y{ to{ transform: translateY(-100%); } }
@keyframes ugc-yr{ from{ transform: translateY(-100%); } to{ transform: translateY(0); } }
@media (min-width: 1024px){
  .ugc-wall{
    grid-template-columns: minmax(0, 1fr) minmax(280px, 1.1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(24px, 3vw, 56px);
    height: min(78vh, 720px);
    padding-inline: 24px;
  }
  .ugc-text{ order: 0; }
  .ugc-b{ display: flex; }
  .ugc-col{
    flex-direction: column; height: 100%;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
            mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  }
  .ugc-track{ flex-direction: column; padding: 0 0 12px; }
  .ugc-track li{ width: clamp(132px, 11vw, 184px); margin-inline: auto; }
  .ugc-col{ align-items: center; }
  @media (prefers-reduced-motion: no-preference){
    .ugc-a .ugc-track{ animation: ugc-y 60s linear infinite; }
    .ugc-b .ugc-track{ animation: ugc-yr 60s linear infinite; }
  }
}

/* ---------- trust strip ---------- */
.trust{
  padding: 18px 24px;
  border-block: 1px solid #1c1b19;
  background: rgba(201, 173, 125, .02);
}
.trust-inner{ display: contents; }
.trust-track{
  list-style: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px 0;
  margin: 0;
  padding: 0;
}
.trust-track[aria-hidden]{ display: none; }
.trust-track li{
  position: relative;
  padding: 4px 26px;
  font-family: "Inter", var(--f-body);
  font-size: 11.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #a39e98;
}
.trust-track li + li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 4px;
  height: 4px;
  margin-top: -2px;
  border-radius: 50%;
  background: #c9ad7d;
}

/* trust strip on tablet and phone: a marquee like dalmend.com/vish, 26 s a lap; reduced motion scrolls in place */
@media (max-width: 760px){
  .trust{ padding: 15px 0; overflow: hidden; }
  .trust-track{ flex-wrap: nowrap; flex: none; gap: 0; }
  .trust-track li{ flex: none; white-space: nowrap; font-size: 9px; letter-spacing: .6px; padding: 4px 24px 4px 42px; }
  .trust-track li::before,
  .trust-track li + li::before{ content: ""; position: absolute; left: 24px; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: #c9ad7d; }
}
@media (max-width: 760px) and (prefers-reduced-motion: no-preference){
  .trust-inner{ display: flex; width: max-content; animation: trust-lap 26s linear infinite; }
  .trust-track[aria-hidden]{ display: flex; }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce){
  .trust{ overflow-x: auto; scrollbar-width: none; }
  .trust::-webkit-scrollbar{ display: none; }
  .trust-inner{ display: flex; width: max-content; }
}
@keyframes trust-lap{ to{ transform: translateX(-50%); } }

/* ---------- ritual: image right, the card overlaps it ---------- */
.cascade-section{ display: flex; justify-content: center; padding: 44px 24px; margin-bottom: 48px; background: #000; }
.cascade-section .cascade{ position: relative; display: flex; align-items: center; width: 100%; max-width: 1100px; }
.cascade-section .cascade-media{
  flex: 1;
  min-width: 0;
  margin: 0 0 0 385px;
  aspect-ratio: 701 / 540;
  border-radius: 0;
  background: #000;
}
.cascade-section .cascade-media::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to left, transparent, rgba(0, 0, 0, .9)),
    radial-gradient(circle, transparent 40%, #000);
}
.cascade-section .cascade-card{
  position: absolute;
  left: -17px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 510px;
  padding: 40px;
  background: rgba(10, 10, 10, .85);
  border: 1px solid rgba(255, 255, 255, .05);
}
.cascade-section .cascade-title{
  font-family: var(--f-display);
  font-size: 35.2px;
  font-weight: 400;
  line-height: 1.2;
  margin: 0 0 18px;
  color: var(--gold-soft);
}
.cascade-section .cascade-desc{
  font-family: var(--f-display);
  font-size: 20px;
  font-weight: 300;
  line-height: 31px;
  color: #9a948e;
  margin: 0 0 12px;
}
.cascade-section .cascade-desc:last-child{ margin-bottom: 0; }
.cascade-section .cascade-desc .gold{ color: #b39564; font-weight: 400; }

/* ---------- plates: image left 50/50, eyebrow, italic caption ---------- */
.eyebrow{
  font-family: "Inter", var(--f-body);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #827d77;
  margin: 0 0 18px;
}
.plate-sec{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  background: #000;
}
.plate-sec .plate-media{ margin: 0; aspect-ratio: 720 / 1279; border-radius: 0; }
.plate-sec .plate-copy{ padding: 54px 7vw; min-width: 0; }
.plate-sec .plate-title{
  font-family: var(--f-display);
  font-size: 50px;
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: .4px;
  color: #fdfdfd;
  margin: 0 0 25px;
}
.plate-sec .plate-text{
  font-family: var(--f-display);
  font-size: 21px;
  font-weight: 300;
  line-height: 1.62;
  color: #9a948e;
  max-width: 460px;
  margin: 22px 0 27px;
}
.plate-sec .plate-cap{
  font-family: var(--f-display);
  font-size: 15px;
  font-style: italic;
  letter-spacing: .3px;
  color: #827d77;
  margin: 16px 0 0;
}

/* ---------- buy block, trust, ritual, plates: tablet and phone ---------- */
@media (max-width: 860px){
  .cascade-section .cascade{ flex-direction: column; }
  .cascade-section .cascade-media{ margin: 0; width: 100%; flex: none; aspect-ratio: 390 / 300; }
  .cascade-section .cascade-card{ position: relative; left: auto; top: auto; transform: none; width: calc(100% - 32px); margin: -60px 16px 0; padding: 30px 24px; text-align: center; }
  .cascade-section .cascade-title{ font-size: 24px; line-height: 31px; }
  .cascade-section .cascade-desc{ font-size: 15px; line-height: 1.55; }
  .cascade-section{ margin-bottom: 28px; padding-inline: 0; }
  .plate-sec{ grid-template-columns: minmax(0, 1fr); }
  .plate-sec .plate-media{ aspect-ratio: 390 / 693; }
  .plate-sec .plate-copy{ padding: 42px 28px; }
  .plate-sec .plate-title{ font-size: 34px; margin-bottom: 17px; }
  .plate-sec .plate-text{ font-size: 19px; margin: 22px 0; }
  .plate-sec .plate-copy{ text-align: center; }
  .plate-sec .plate-text, .plate-sec .plate-cap{ margin-inline: auto; }
}
@media (max-width: 560px){
  .buy .product{ padding: 30px 15px; }
  .rule-eyebrow::before, .rule-eyebrow::after{ margin-inline: 12px; }
  .buy .product-name{ font-size: 36px; line-height: 43px; }
  .buy .product-size{ font-size: 16px; }
  .buy .product-price{ font-size: 32px; line-height: 51px; }
  .buy .product-copy{ padding: 0 15px; }
  .buy .tier-head{ padding: 12px 15px; font-size: 9px; }
  .buy .tier{ padding: 18px 15px; }
  .buy .tier-name{ font-size: 16px; }
  .buy .tier-radio{ width: 16px; height: 16px; margin-right: 12px; }
  .buy .tier-price{ font-size: 18px; }
  .buy .tier-price small{ font-size: 12px; margin-left: 4px; }
  .buy .buy-total{ padding: 15px; margin-bottom: 20px; }
  .buy .buy-total-label{ font-size: 10px; }
  .buy .buy-total output{ font-size: 26px; }
  .buy .cta-block{ padding: 20px; font-size: 12px; }
}
@media (max-width: 360px){
  .buy .tier-name{ font-size: 14px; white-space: nowrap; }
  .buy .tier-price{ font-size: 15px; white-space: nowrap; }
  .buy .tier-price small{ font-size: 10px; margin-left: 3px; }
  .buy .tier-radio{ margin-right: 10px; }
}


/* ---------- ownership: the pause beat ---------- */
.statement{ background: #000; padding: 56px 24px 34px; text-align: center; }
.statement-inner{ max-width: 780px; margin-inline: auto; }
.statement-rule{ display: flex; justify-content: center; }
.statement-rule .rule-eyebrow{ gap: 18px; font-size: 11px; letter-spacing: 5px; color: var(--gold); }
.statement-rule .rule-eyebrow::before,
.statement-rule .rule-eyebrow::after{ flex: none; width: 50px; margin: 0; background: rgba(201, 173, 125, .25); }
.statement-line{
  margin: 20px auto 0;
  font-family: var(--f-display);
  font-size: 60px;
  font-weight: 300;
  line-height: 1.14;
  letter-spacing: .3px;
  color: #fff;
  text-wrap: balance;
}
.statement-line em{
  display: block;
  font-style: italic;
  font-weight: 300;
  color: var(--gold-soft);
}

/* ---------- arrival: image left, ruled list ---------- */
.arrival-sec{
  display: grid;
  grid-template-columns: minmax(0, 51fr) minmax(0, 49fr);
  align-items: stretch;
  background: linear-gradient(#000, #0a0908);
}
.arrival-media{ margin: 0; border-radius: 0; min-height: 100%; }
.arrival-media img{ width: 100%; height: 100%; object-fit: cover; }
.arrival-copy{ align-self: center; padding: 58px 7vw; min-width: 0; }
.arrival-copy .eyebrow{ margin: 0; }
.arrival-title{
  font-family: var(--f-display);
  font-size: 51.84px;
  font-weight: 300;
  line-height: 1.06;
  color: #fdfdfd;
  margin: 0 0 26px;
}
.arrival-text{
  font-family: var(--f-display);
  font-size: 21px;
  font-weight: 300;
  line-height: 1.62;
  color: #9a948e;
  max-width: 450px;
  margin: 22px 0;
}
.ruled-list{ list-style: none; margin: 30px 0 21px; padding: 0; max-width: 450px; }
.ruled-list li{
  position: relative;
  margin: 0 0 7.8px 17px;
  padding: 13px 0 13px 22px;
  font-family: "Inter", var(--f-body);
  font-size: 13px;
  letter-spacing: .4px;
  color: #b6b1ab;
  border-top: 1px solid #1c1b19;
}
.ruled-list li:last-child{ border-bottom: 1px solid #1c1b19; }
.ruled-list li::before{
  content: "";
  position: absolute;
  left: 0; top: 22px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  transform: translateY(-3px);
}

/* ---------- adored ---------- */
.adored{ background: #000; padding-block: 56px; }
.adored-head{ max-width: 320px; margin: 0 auto; padding: 14px 20px; text-align: center; }
.adored-title{
  font-family: var(--f-display);
  font-size: 50px;
  font-weight: 600;
  font-style: italic;
  line-height: 57px;
  letter-spacing: 2.25px;
  margin: 0 0 14px;
  color: var(--gold-soft);
}
.adored-sub{
  font-family: -apple-system, "Inter", var(--f-body);
  font-size: 15px;
  line-height: 1.35;
  letter-spacing: .3px;
  color: #a39c90;
  max-width: 284px;
  margin: 8px auto 0;
}
.review-grid{
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  max-width: 1100px;
  margin: 36px auto 0;
  padding: 0 24px;
}
.review{
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 16px;
  min-width: 0;
  background: radial-gradient(120% 100% at 50% 0, #191613, #0b0a09);
  border: 1px solid #211e18;
  border-radius: 6px;
  box-shadow: 0 20px 44px rgba(0, 0, 0, .55);
}
.review-stars{ font-size: 10px; letter-spacing: 1px; color: #c9ad7d; line-height: 1; }
.review-quote{
  font-family: Georgia, var(--f-display), serif;
  font-style: italic;
  font-size: 15.5px;
  line-height: 1.4;
  color: #ece4d8;
  quotes: "\201C" "\201D";
}
.review-who{ font-family: "Inter", var(--f-body); font-size: 12px; letter-spacing: .5px; color: #9a9489; margin-top: auto; }

/* ---------- faq: one centred column ---------- */
.faq-sec{ background: #000; padding: 56px 24px; }
.faq-inner{ max-width: 820px; margin-inline: auto; }
.faq-head{ text-align: center; margin-bottom: 26px; }
.rule-eyebrow-row{ display: flex; justify-content: center; }
.faq-head .rule-eyebrow,
.close-rule .rule-eyebrow{ gap: 18px; font-size: 11px; letter-spacing: 5px; color: var(--gold); }
.faq-head .rule-eyebrow::before, .faq-head .rule-eyebrow::after,
.close-rule .rule-eyebrow::before, .close-rule .rule-eyebrow::after{ flex: none; width: 50px; margin: 0; background: rgba(201, 173, 125, .25); }
.faq-title{
  font-family: var(--f-display);
  font-size: 52px;
  font-weight: 300;
  line-height: 1.1;
  color: #fdfdfd;
  margin: 22px 0 0;
}
.faq-list{ display: block; }
.faq-list details{ padding: 6px 0; border-top: 1px solid #1c1b19; interpolate-size: allow-keywords; }
.faq-list details:last-child{ border-bottom: 1px solid #1c1b19; }
.faq-list summary{
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 24px 4px;
  cursor: pointer;
  font-family: var(--f-display);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.25;
  color: #fdfdfd;
}
.faq-list summary::-webkit-details-marker{ display: none; }
.faq-q{ min-width: 0; }
.pm{
  flex: none;
  font-family: "Inter", var(--f-body);
  font-size: 22px;
  font-weight: 300;
  line-height: 1;
  color: var(--gold);
  transition: transform .4s var(--ease);
}
.faq-list details[open] .pm{ transform: rotate(45deg); }
.faq-list details p{
  font-family: "Inter", var(--f-body);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.75;
  color: #9a948e;
  max-width: 660px;
  padding: 0 4px 26px;
}
.faq-list details::details-content{
  block-size: 0;
  overflow: hidden;
  transition: block-size .45s var(--ease), content-visibility .45s allow-discrete;
}
.faq-list details[open]::details-content{ block-size: auto; }

/* ---------- close: the signature piece ---------- */
.band.close{ padding: 0; background: #000; }
.close-inner{
  padding: 72px 24px 52px;
  text-align: center;
  background: radial-gradient(ellipse at 50% 40%, rgba(201, 173, 125, .08), transparent 70%);
}
.close-rule{ display: flex; justify-content: center; margin-bottom: 22px; }
.close-rule .rule-eyebrow{ font-size: 10px; letter-spacing: 3px; }
.close-title{
  font-family: var(--f-display);
  font-size: 62px;
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: .5px;
  color: var(--gold);
  margin: 0 0 31px;
}
.close-deck{
  font-family: var(--f-display);
  font-size: 19px;
  font-weight: 300;
  line-height: 1.5;
  color: #9a948e;
  max-width: 440px;
  margin: 14px auto 24px;
}
.close-trust{
  display: inline-block;
  max-width: 100%;
  padding: 10px 22px;
  font-family: "Inter", var(--f-body);
  font-size: 11px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid rgba(201, 173, 125, .22);
  border-radius: 40px;
}
.hint{ font-family: "Inter", var(--f-body); font-size: 11px; letter-spacing: 1px; color: #827d77; max-width: 320px; margin: 20px auto 0; }
.hint-link{
  display: inline-block;
  margin-top: 30px;
  padding-block: .6rem;
  font-family: "Inter", var(--f-body);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #d4b98c;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .5em;
  transition: color .3s var(--ease), text-underline-offset .3s var(--ease);
}
.hint-link:hover,
.hint-link:focus-visible{ color: var(--gold-soft); text-underline-offset: .7em; }
.legal{ max-width: 760px; margin: 0 auto; padding: 14px 16px; background: #020202; border-top: 1px solid rgba(201, 173, 125, .12); }
.fine{ max-width: 660px; margin: 0 auto; font-family: "Inter", var(--f-body); font-size: 9px; line-height: 1.45; letter-spacing: .2px; color: #6f6a64; }

/* ---------- footer: four columns ---------- */
.foot{ background: #0a0a0a; padding: 80px 0 0; font-family: "Montserrat", var(--f-body); }
.foot .foot-grid{
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
  align-items: start;
  max-width: 1200px;
  padding-inline: 25px;
}
.foot-col{ margin-bottom: 40px; min-width: 0; }
.foot-title{
  font-family: var(--f-display);
  font-size: 20px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: 1px;
  color: #fdfdfd;
  margin: 0;
}
.foot-title::after{ content: ""; display: block; width: 30px; height: 1px; background: var(--gold); margin: 15px 0 25px; }
.foot-col ul{ list-style: none; display: block; margin: 0; padding: 0; }
.foot-col li{ margin-bottom: 12px; }
.foot-col ul a{ font-size: 14px; font-weight: 300; color: #999; transition: color .3s var(--ease); }
.foot-col ul a:hover,
.foot-col ul a:focus-visible{ color: var(--gold); }
.foot-story p{ font-size: 14px; font-weight: 300; line-height: 1.8; color: #888; max-width: none; margin: 0 0 20px; }
.foot-story p + p{ margin-top: 0; }
.foot-more{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-display);
  font-style: italic;
  font-size: 16px;
  line-height: 25.6px;
  color: var(--gold);
}
.foot-more svg{ transition: transform .4s var(--ease-expo); }
.foot-more:hover svg,
.foot-more:focus-visible svg{ transform: translateX(4px); }
.foot .foot-base{
  max-width: none;
  margin: 40px 0 0;
  padding: 30px 15px;
  border-top: 1px solid rgba(255, 255, 255, .05);
  text-align: center;
  font-size: 11px;
  font-weight: 400;
  line-height: 17.6px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #666;
}
.foot-base strong{ font-weight: 500; color: var(--gold); }

/* ---------- bottom buy bar, full width ---------- */
.buybar{
  position: fixed;
  z-index: 6;
  inset: auto 0 0;
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--fill-1);
  transform: translateY(100%);
  visibility: hidden;
  transition: transform .6s var(--ease-expo), visibility 0s linear .6s;
}
.buybar.is-on{
  transform: none;
  visibility: visible;
  transition: transform .6s var(--ease-expo), visibility 0s;
}
.buybar .buybar-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 0;
  max-width: none;
  padding: 16px clamp(16px, 9vw, 130px);
}
.buybar-name{
  display: flex;
  align-items: baseline;
  gap: .5rem;
  min-width: 0;
  white-space: nowrap;
  font-family: var(--f-display);
  font-size: 24px;
  line-height: 1;
  color: #fdfdfd;
}
.buybar-now,
.buybar-name s,
.buybar-size{ font-family: "Inter", var(--f-body); font-size: 13px; letter-spacing: 1px; color: #827d77; }
.buybar-now{ font-weight: 600; color: var(--gold); }
.buybar-name s{ opacity: .5; }
.buybar-size{ opacity: .78; }
.buybar-act{ display: flex; align-items: center; gap: var(--s2); }
.buybar .buybar-cta{
  display: inline-flex;
  align-items: center;
  min-height: 0;
  width: auto;
  padding: 16px 40px;
  font-family: "Montserrat", var(--f-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  white-space: nowrap;
  color: #020202;
  background: var(--gold);
}
.buybar-top{ margin-right: -10px; }
.buybar-top:hover{ transform: translateY(-3px); }

/* ---------- own..footer + bar: tablet and phone ---------- */
@media (max-width: 860px){
  .statement-line{ font-size: clamp(28px, 7.2vw, 52px); line-height: 1.18; }
  .arrival-sec{ grid-template-columns: minmax(0, 1fr); }
  .arrival-media{ aspect-ratio: 390 / 487; min-height: 0; }
  .arrival-copy{ padding: 42px 28px; }
  .arrival-title{ font-size: 34px; margin-bottom: 17px; }
  .arrival-text{ font-size: 19px; }
  .ruled-list{ margin: 30px 0 19px; max-width: 360px; }
  .ruled-list li{ margin: 0 0 6.8px 14.7px; padding-left: 18px; }
  .review-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq-sec{ padding-block: 40px; }
  .faq-title{ font-size: 30px; line-height: 1.1; margin-bottom: 0; }
  .faq-head{ margin-bottom: 26px; }
  .faq-list summary{ font-size: 19.5px; }
  .close-inner{ padding: 40px 24px 34px; }
  .close-title{ font-size: 35.1px; line-height: 1.05; margin-bottom: 17.5px; }
  .close-deck{ font-size: 13.5px; line-height: 1.5; max-width: 300px; margin: 12px auto 18px; }
  .close-trust{ max-width: 340px; padding: 9px 12px; font-size: 7.5px; letter-spacing: .3px; }
  .hint{ font-size: 10px; line-height: 1.6; letter-spacing: .2px; max-width: 280px; margin-top: 16px; }
  .foot{ padding-top: 60px; }
  .foot .foot-grid{ grid-template-columns: minmax(0, 1fr); gap: 50px 30px; padding-inline: 30px; text-align: center; }
  .foot-title::after{ margin-inline: auto; }
  .foot-more{ min-height: 44px; }
  .foot-col ul a{ display: inline-flex; align-items: center; min-height: 44px; }
  .foot-col li{ margin-bottom: 0; }
  .buybar-name{ font-size: 18px; gap: .4rem; }
  .buybar-now, .buybar-name s, .buybar-size{ font-size: 10.5px; letter-spacing: .3px; }
  .buybar-size{ display: none; }
  .buybar .buybar-row{ padding: 16px; }
  .buybar-act{ gap: .25rem; }
  .buybar .buybar-cta{ padding: 11px 18px; font-size: 10px; letter-spacing: 1.2px; }
}
@media (max-width: 560px){
  .statement{ padding: 40px 22px 34px; }
  .statement-line{ font-size: 28.08px; line-height: 33px; }
  .statement-line em{ display: inline; }
  .adored-head{ margin: 18px auto 0; }
  .adored-title{ font-size: 29.64px; line-height: 34px; letter-spacing: .59px; font-weight: 600; margin: 12px 0 14px; }
  .adored-sub{ font-size: 13.5px; line-height: 1.6; max-width: 255px; }
  .review-grid{ gap: 8px; padding-inline: 14px; }
  .review{ padding: 12px 11px; }
  .review-quote{ font-size: 13px; line-height: 1.4; }
  .review-who{ font-size: 10px; }
  .faq-sec{ padding-inline: 24px; }
  .faq-list details p{ font-size: 15px; line-height: 1.75; }
}
@media (max-width: 360px){
  .buybar-name s{ display: none; }
  .close-title{ font-size: 31px; }
  .faq-list summary{ font-size: 18px; }
  .buybar .buybar-cta{ padding: 11px 14px; }
}

/* footer: 2x2 between phone and desktop so four columns do not cramp */
@media (min-width: 861px) and (max-width: 1024px){
  .foot .foot-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 48px; padding-inline: 40px; }
}

/* ---------- widths ---------- */
@media (max-width: 1024px){
  .facts{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px){
  :root{ --mast-h: 80px; }
  .mast-word{ font-size: 1.25rem; }
  /* phone: she owns the upper half, the copy reads in the lower half over ink */
  .stage-poster{
    width: 100%;
    height: 64%;
    object-position: 50% 58%;
    -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent);
            mask-image: linear-gradient(to bottom, #000 70%, transparent);
  }
  .stage::after{
    content: "";
    position: absolute;
    z-index: 1;
    inset: auto 0 0;
    height: 52%;
    background: linear-gradient(to bottom, transparent, color-mix(in oklab, var(--ink) 88%, transparent) 38%, var(--ink));
    pointer-events: none;
  }
  .beat{
    grid-template-columns: minmax(0, 1fr);
    align-items: end;
    min-height: 105svh;
  }
  .beat-copy,
  .beat:nth-child(even) .beat-copy{ grid-column: 1; padding-block: var(--s4) var(--s5); }
  /* the copy holds at the foot of the screen while its beat passes, under the figure */
  .beat:not(.beat-hero){ view-timeline: --beat; }
  .beat:not(.beat-hero) .beat-copy{ position: sticky; bottom: 0; }
  /* the back view stands tallest: its copy sits lower to clear the hip fade */
  .beat[data-beat="4"] .beat-copy{ padding-bottom: var(--s2); }
  .beat-hero{ min-height: 100svh; }
  /* the phone hero lies over her: a soft ink halo keeps the type on the wax */
  .hero-copy :is(.hero-name, .hero-kind, .hero-line){
    text-shadow: 0 2px 28px color-mix(in oklab, var(--ink) 70%, transparent), 0 0 3px color-mix(in oklab, var(--ink) 45%, transparent);
  }
}
@media (max-width: 560px){
  :root{ --bar-h: 68px; }
  .mast-note-track span{ font-size: .6875rem; letter-spacing: .05em; padding-inline: .75rem; }
  .facts{ gap: var(--s2) var(--s1); }
  .fact{ padding-inline: .25rem; }
  .fact dt{ font-size: 1.3rem; }
  .rail{ grid-auto-columns: 72vw; }
}
/* phone: the hero copy reads at the foot of the first screen, over her */
@media (max-width: 600px){
  .beat-hero{
    display: block;
    min-height: 0;
    padding-top: 0;
  }
  .hero-copy{
    min-height: 100svh;
    align-content: end;
    gap: var(--s3);
    padding: var(--s5) clamp(1.75rem, 8vw, 2.5rem) calc(var(--s5) + var(--s2));
    max-width: none;
  }
  .hero-copy .hero-line{ line-height: 1.25; letter-spacing: .005em; margin-top: 0; }
  .hero-copy .hero-kind{ letter-spacing: .04em; }
  .hero-copy .deck.small{ line-height: 1.5; letter-spacing: .01em; }
  /* phone: the setup line balances over two rows, the payoff holds the third */
  .beat-title-2l{ white-space: normal; text-wrap: balance; }
  .beat-copy:has(.beat-title-2l){ max-width: none; }
  /* chapter body under the headline: a reading size (the shared .76 step put it
     at 12px), an open leading, and a measure near 50 characters on the column */
  .beat:not(.beat-hero) .beat-copy .deck.small{
    font-size: .875rem;
    line-height: 1.55;
    letter-spacing: .005em;
    max-width: 38ch;
  }
}
@media (max-width: 360px){
  .facts{ grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
}

@media (prefers-reduced-motion: reduce){
  .plate img, .buy .tier, .buybar{ transition: none; }
  .pm{ transition: none; }
}

/* ---------- phone gutter: ONE fixed side gutter for every band, mast, footer and the buy bar (2026-10-11) ---------- */
@media (max-width: 860px){
  :root{ --gut: clamp(1.25rem, 5.6vw, 1.5rem); --pad: var(--gut); }

  /* mast: wordmark keeps a 44px hit area from padding, cart glyph optically on the gutter */
  .mast-word{ display: inline-flex; align-items: center; min-height: 44px; }
  .mast-cart{ margin-right: -12px; }

  /* hero copy sat inside the beat's own padding twice (about 52px): it now sits on the gutter */
  .hero-copy{ padding-inline: 0; }

  /* marquee: readable caps with tracking */
  .trust-track li{ font-size: 11px; letter-spacing: .12em; }

  /* buy block */
  .buy .product{ padding-inline: var(--gut); }
  .buy .product-copy{ padding-inline: 0; }
  .buy .tier-head{ padding-inline: var(--gut); font-size: 11px; letter-spacing: .1em; }
  .buy .tier{ padding-inline: var(--gut); }
  .buy .buy-total{ padding-inline: var(--gut); }
  .buy .buy-total-label{ font-size: 11px; letter-spacing: .1em; }
  .trust-track li{ font-size: 12px; }
  .buy .tier-price small{ font-size: 12px; }

  /* ritual card, plates, arrival, statement */
  .cascade-section .cascade-card{ width: calc(100% - 2 * var(--gut)); margin: -60px var(--gut) 0; padding-inline: var(--gut); }
  .plate-sec .plate-copy{ padding-inline: var(--gut); }
  .arrival-copy{ padding-inline: var(--gut); }
  .statement{ padding-inline: var(--gut); }

  /* reviews, FAQ */
  .review-grid{ padding-inline: var(--gut); gap: 10px; }
  .review-stars{ font-size: 12px; }
  .review-who{ font-size: 12px; }
  .faq-sec{ padding-inline: var(--gut); }

  /* close band: the trust line is a calm centred line, not a pill (law 1), 12px floor */
  .close-inner{ padding-inline: var(--gut); }
  .close-trust{
    display: block;
    max-width: 20rem;
    margin-inline: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none !important; /* vish-scroll.css:317 paints a fill on this line; a plate behind text is off on the phone */
    font-size: 12px;
    line-height: 1.7;
    letter-spacing: .08em;
  }
  .close-trust span:not(.sep){ display: block; }
  .close-trust .sep{ display: none; }
  .hint{ font-size: 12px; line-height: 1.6; letter-spacing: .02em; max-width: 20rem; }
  .hint-link{ display: inline-flex; align-items: center; min-height: 44px; padding-block: 0; margin-top: 14px; }
  .legal{ max-width: none; padding: 14px var(--gut) 20px; border-top: 0; }
  .fine{ font-size: 11px; line-height: 1.55; }

  /* footer: two-column link groups, story full width and clamped, left aligned on the gutter */
  .foot{ padding-top: 48px; }
  .foot .foot-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px var(--gut);
    padding-inline: var(--gut);
    text-align: left;
  }
  .foot .foot-story{ grid-column: 1 / -1; }
  .foot .foot-story p + p{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
  .foot-title::after{ margin: 12px 0 14px; }
  .foot-col ul a{ min-height: 44px; }
  .foot-col{ margin-bottom: 0; }
  .foot .foot-base{ padding: 24px var(--gut); border-top: 0; margin-top: 24px; }

  /* sticky buy bar */
  .buybar .buybar-row{ padding: 10px var(--gut); }
  .buybar-now, .buybar-name s{ font-size: 12px; }
  .buybar .buybar-cta{ min-height: 44px; font-size: 12px; letter-spacing: .1em; padding: 0 18px; justify-content: center; }
}
@media (max-width: 360px){
  .buybar .buybar-cta{ padding: 0 14px; }
}