/* THE BUTTON FAMILY · 7 Oct 2026, her pick "soft square" (lab/button-family, option A).
   Her words: "the same visual language everywhere: films, websites, that little light box. The pill does not have to be a pill ...
   check every single button or light box so they all look the same. They're all in the same family." And "Tell us your idea ...
   even more glassy". Before: twelve corner values (3 px to round), five Close buttons, three glass recipes.
   One family now, on the phone (lab/phone-journey) and the laptop (lab/journey-v2), loaded last on both:
   - the films' own corner, 12 px, on every button, card and box (9 px on the small ones, 34 px and under)
   - Tell us your idea: the clearer gold glass (a bright top edge, a gold rim, light from below), kept dark enough under the letters
   - glass only over a picture (Ariana's tell 5); inside a lightbox or a panel the buttons are solid with a light rim
   To undo it all: remove the family.css link from both pages (and --lqR/--lqKR go back to round by themselves). */
:root{
  --fam-r:12px; --fam-r-sm:9px;
  --fam-blur:blur(18px) saturate(1.7);
  --fam-gold-bg:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,0) 44%),linear-gradient(160deg,rgba(255,217,140,.22),rgba(20,10,30,.48));
  --fam-gold-sh:inset 0 0 0 1px rgba(255,217,140,.8),inset 0 1px 0 rgba(255,250,235,.62),inset 0 -10px 18px rgba(255,217,140,.14),0 8px 22px rgba(6,4,16,.34);
  --fam-glass-bg:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 50%),rgba(14,9,26,.4);
  --fam-glass-sh:inset 0 0 0 1px rgba(255,236,200,.44),inset 0 1px 0 rgba(255,250,235,.34),0 6px 18px rgba(6,4,16,.3);
  --fam-solid-bg:rgba(255,236,200,.06);
  --fam-solid-sh:inset 0 0 0 1px rgba(255,236,200,.42);
}

/* ---------- 1 · the main action, Tell us your idea: menu (phone), nav (laptop), the big line at the end of Films and Websites */
html body .m-cta,html body #navBook,html body .golink.big{border-radius:var(--fam-r);background:var(--fam-gold-bg);
  -webkit-backdrop-filter:var(--fam-blur);backdrop-filter:var(--fam-blur);box-shadow:var(--fam-gold-sh)}
html body .golink.big,html body .endb.ed .golink.big{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 24px;
  font:700 17px/1 var(--font-ui);font-style:normal;letter-spacing:0;color:#FFF3DC;text-decoration:none;text-shadow:0 1px 2px rgba(20,10,4,.55)}
html body .golink.big span,html body .endb.ed .golink.big span{font:inherit;color:#FFD98C}   /* 7 Oct, her: "Tell us your idea looks gigantic here": the end line was 46 px (.endb.ed), now the menu button's size */
@media (hover:hover){
  html body #navBook:hover,html body .golink.big:hover{background:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,0) 44%),linear-gradient(160deg,rgba(255,217,140,.32),rgba(20,10,30,.44));
    box-shadow:inset 0 0 0 1px #FFD98C,inset 0 1px 0 rgba(255,250,235,.75),inset 0 -10px 18px rgba(255,217,140,.2),0 10px 26px rgba(6,4,16,.4)} }
html body #navBook:focus-visible,html body .m-cta:focus-visible,html body .golink.big:focus-visible{outline:2px solid #FFF3DC;outline-offset:3px}

/* ---------- 2 · glass over a picture: Skip, Back to the sky, See the work, the ring arrows, the play badge, Come and experience */
html body .pskip,html body #workBack.pball,html body .golink.seework,html body .hr .hr-nav button,html body .sm-skip.sm-word,
html body .glass-pane.with-ring .gp-go-btn{border:0;border-radius:var(--fam-r);background:var(--fam-glass-bg);
  -webkit-backdrop-filter:var(--fam-blur);backdrop-filter:var(--fam-blur);box-shadow:var(--fam-glass-sh)}
html body .pl{border-radius:var(--fam-r-sm);background:var(--fam-glass-bg);box-shadow:var(--fam-glass-sh)}
html body .hr .hr-nav button:focus-visible,html body .hr .c-face:focus-visible,html body .hr .c-next:focus-visible{border-radius:var(--fam-r)}

/* ---------- 3 · EN | ES: the same corner (lang-liquid.js reads --lqR and --lqKR for the glass and the gold knob) */
html body .lq{--lqR:10px;--lqKR:7px;border-radius:10px}
html body nav .lq,html body .wp-nav .lq{--lqR:8px;--lqKR:6px;border-radius:8px}   /* the laptop's smaller toggle (24 px) */
html body .lq.lq.lq.lq>a:focus-visible{border-radius:var(--fam-r-sm)}

/* ---------- 4 · solid buttons inside a lightbox, a card or a panel: Watch it whole, Read more, Back, Read all, More, Visit the site */
html body .player .tlink,html body .q .more,html body .wk .acts button,html body .wk .acts a{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:0 16px;border:0;border-radius:var(--fam-r);background:var(--fam-solid-bg);box-shadow:var(--fam-solid-sh);
  font:700 11.5px/1 var(--font-ui);font-style:normal;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:#FFF3DC}
html body .q .more,html body .wk .acts button,html body .wk .acts a{color:#FFD98C}
html body .pinfo summary{display:inline-flex;width:fit-content;justify-content:center;padding:0 16px;margin:2px 0 8px;border-radius:var(--fam-r);background:var(--fam-solid-bg);box-shadow:var(--fam-solid-sh);
  font:700 11.5px/1 var(--font-ui);letter-spacing:.16em;text-transform:uppercase;list-style:none}
html body .pinfo summary::-webkit-details-marker{display:none}   /* About this film: the same solid button */
html body .player .tlink.plBack{background:var(--fam-glass-bg);-webkit-backdrop-filter:var(--fam-blur);backdrop-filter:var(--fam-blur);box-shadow:var(--fam-glass-sh)}   /* over the film */
html body .player .plMore{margin:2px 0 8px}
/* the film kinds (phone Films): soft square chips, the one you are on in gold */
html body .chips{gap:8px}
html body .chips button{min-height:44px;padding:0 14px;border-radius:var(--fam-r);background:var(--fam-solid-bg);box-shadow:var(--fam-solid-sh);text-decoration:none}
html body .chips button[aria-pressed="true"]{color:#FFD98C;background:rgba(255,217,140,.12);box-shadow:inset 0 0 0 1px rgba(255,217,140,.8)}

/* ---------- 5 · Close: one shape everywhere (phone film + review, contact, laptop case + reviews lightboxes) */
html body .x{border-radius:var(--fam-r);background:var(--fam-solid-bg);box-shadow:var(--fam-solid-sh)}
html body .sm-contact .ct-x{border-radius:var(--fam-r)}
html body .sm-contact .ct-x:focus-visible{border-radius:var(--fam-r)}
html body .wc-frost .wc-x,html body .sm-rv .rv-frost .rv-x{padding:0 16px;min-height:44px;border-radius:var(--fam-r);background:rgba(10,8,24,.5);box-shadow:var(--fam-solid-sh)}
html body .wc-frost .wc-x::after,html body .sm-rv .rv-frost .rv-x::after{display:none}

/* ---------- 6 · the laptop's action words (Visit site, All work, Discover how, Book, Close, Watch again, the arrows, Send):
   from the drawn line (her 25 Sep pick) to the soft square. One block: delete it to bring the lines back. */
html body .sm-word:not(.sm-skip){min-height:40px;padding:0 14px;gap:8px;font-size:11px;letter-spacing:.16em;border-radius:var(--fam-r);background:rgba(10,8,24,.38);   /* 7 Oct, her: "a little bit too big ... smaller letters ... don't make it so obvious, massive": 48 -> 40 px, 13 -> 11 px, padding 18 -> 14 */
  
  box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 55%,transparent),inset 0 1px 0 rgba(255,250,235,.14)}
html body .sm-word:not(.sm-skip)::before,html body .sm-word:not(.sm-skip)::after{display:none}
html body .web-page .sm-word:not(.sm-skip){background:color-mix(in srgb,currentColor 8%,transparent)}
html body .web-page.back-pill .wp-case .wp-back{min-height:40px;padding:0 14px;font-size:11px;letter-spacing:.16em;border-radius:var(--fam-r);background:color-mix(in srgb,var(--wbg,#0B1A22) 88%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 55%,transparent)}
html body .sm-word:not(.sm-skip):focus-visible{outline-offset:3px}
@media (hover:hover){ html body .sm-word:not(.sm-skip):hover{box-shadow:inset 0 0 0 1px currentColor,inset 0 1px 0 rgba(255,250,235,.2)} }
html body .ct-send .sm-word,html body #wpBook.sm-word,html body .sm-rv .rv-book.sm-word{color:#FFF3DC;background:var(--fam-gold-bg);-webkit-backdrop-filter:var(--fam-blur);backdrop-filter:var(--fam-blur);box-shadow:var(--fam-gold-sh);text-shadow:0 1px 2px rgba(20,10,4,.55)}   /* Send and Tell us your idea = the main action, gold glass */
/* the phone never styled the contact's Send (plain text): the same gold soft square */
html body .ct-send .sm-word{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;border:0;border-radius:var(--fam-r);cursor:pointer;
  font:700 13px/1 var(--font-ui);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;text-shadow:0 1px 2px rgba(20,10,4,.55)}
html body .sm-rv:where(:not([data-layout="strip"])) .rv-book{border-radius:var(--fam-r)}
html body .sm-rv .rv-more{padding:0 14px;margin:0;border-radius:var(--fam-r);background:var(--fam-solid-bg);box-shadow:var(--fam-solid-sh);text-decoration:none}

/* ---------- 7 · cards and boxes: the films' 12 px */
html body .hr .hr-card,html body .wcard,html body .steps li,html body .q,html body .poster,html body .wk .poster,html body .wgo,
html body .nextw .wcard .wgo,html body .pfoot .site-standards li,html body .feed .fc,html body .wk .m,html body .wc-screen,html body .sm-rv .rv-card{border-radius:var(--fam-r)}
html body .sheet{border-radius:var(--fam-r) var(--fam-r) 0 0}
html body .feed .big{border-radius:var(--fam-r) 0 0 var(--fam-r)}
html body .feed .cap{border-radius:0 var(--fam-r) var(--fam-r) 0}
html body .feed .vbar button{border-radius:var(--fam-r)}
html body #wRingHost .hr .hr-card .c-more i,html body #ringHost .hr .hr-card .c-more i{border-radius:8px}
html body .sm-rv .rv-kick,html body .ws-chips li{border-radius:var(--fam-r-sm)}
@media (orientation:portrait){ html body .player.site:not(.rot) .pbox{border-radius:var(--fam-r)} }

/* ---------- 8 · Next inside an open ring card (7 Oct, her: "an option in each card to go into the next one ... a little arrow in the corner"):
   a solid soft square in the card's lower right corner, on both rings (Films: Next / Back to the first; Websites: Next: Wireframe ...) */
html body .hr .c-next{display:flex;width:fit-content;align-items:center;gap:8px;min-height:44px;margin:12px 0 -4px auto;padding:0 16px;border:0;border-radius:var(--fam-r);
  background:var(--fam-solid-bg);box-shadow:inset 0 0 0 1px rgba(255,217,140,.6);font:700 11.5px/1 var(--font-ui);font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:#FFD98C}
html body .hr .c-next span{font-size:15px;letter-spacing:0}

/* ---------- 9 · the press (family.js makes it sink and spring back); the rim lights up while the finger or the mouse is down */
html body :is(.m-cta,#navBook,.golink.big,.ct-send .sm-word,#wpBook.sm-word,.sm-rv .rv-book.sm-word):active{box-shadow:inset 0 0 0 1px #FFE7B8,inset 0 1px 0 rgba(255,250,235,.8),inset 0 -12px 20px rgba(255,217,140,.26),0 4px 14px rgba(6,4,16,.3)}
html body :is(.pskip,#workBack.pball,.golink.seework,.hr .hr-nav button,.sm-skip.sm-word,.gp-go-btn,.pl):active{box-shadow:inset 0 0 0 1px rgba(255,236,200,.85),inset 0 1px 0 rgba(255,250,235,.5),0 3px 10px rgba(6,4,16,.3)}
html body :is(.player .tlink,.q .more,.wk .acts button,.wk .acts a,.pinfo summary,.chips button,.x,.hr .c-next,.sm-rv .rv-more,.wc-frost .wc-x,.sm-rv .rv-frost .rv-x):active{background:rgba(255,236,200,.14);box-shadow:inset 0 0 0 1px rgba(255,236,200,.8)}
html body .sm-word:not(.sm-skip):active{box-shadow:inset 0 0 0 1px currentColor}

html body .web-page .wp-book.sm-word{min-height:44px;padding:0 18px;font-size:12px}   /* 7 Oct: the work page's Tell us your idea, in step with the smaller boxes */

/* ---------- 10 · Films = Websites (7 Oct, her: "everything has to be the same ... the boxes on films are showing one style that is not
   being displayed on websites ... the same visual language"). From the side-by-side audit (campaign FILMS-VS-WEBSITES-2026-10-07.md) */
/* the Close, one shape on the laptop too (the film stream's Close and its lightbox's) */
html body .feed .x2.sm-word,html body .feed .xl.sm-word,html body .wc-frost .wc-x,html body .sm-rv .rv-frost .rv-x{min-height:44px;padding:0 16px;border-radius:var(--fam-r);
  background:rgba(10,8,24,.5);box-shadow:var(--fam-solid-sh);font:700 11.5px/1 var(--font-ui);letter-spacing:.16em}
/* the reviews' Tell us your idea (Films) = the work page's (Websites) */
html body .sm-rv[data-layout="strip"] .rv-book.sm-word{min-height:44px;padding:0 18px;font-size:12px;letter-spacing:.16em}
/* the ring cards: one fill on both rings (the Websites ring was teal) */
html body .hr.guided .hr-card{background:rgba(14,9,26,.46)} html body .hr.guided .hr-card.open{background:rgba(14,9,26,.68)}
/* phone: the Websites ring's cards sized like the Films ring's */
html body #wRingHost .hr .c-face{padding:14px 16px 13px} html body #wRingHost .hr .c-n{font-size:11px;letter-spacing:.26em}
html body #wRingHost .hr .c-more{margin-top:10px} html body #wRingHost .hr .c-body{padding:0 16px 16px} html body #wRingHost .hr .c-body p{font-size:16px}
/* phone: About this film in cream like Read more; Watch it whole 44 px tall */
html body .pinfo summary{color:#FFF3DC} html body .player.site:not(.rot) #plBig{min-height:44px}
/* phone: the Films room's kickers gold, like the Websites ones */
html body #wwK,html body #rKindH{color:var(--gold)}
/* phone: the film kinds in the buttons' own letters (they were italic serif) */
html body .chips button{font:700 11.5px/1 var(--font-ui);letter-spacing:.16em;text-transform:uppercase;color:#FFF3DC}
html body .chips button[aria-pressed="true"]{color:#FFD98C}
/* laptop: See more in the reviews, one gold, no old drawn underline under the box */
html body .sm-rv .rv-more{color:#FFD98C} html body .sm-rv[data-layout="strip"] .rv-more::before,html body .sm-rv[data-layout="strip"] .rv-more::after{display:none}
/* corners still outside the family */
html body .ws-chips li{border-radius:var(--fam-r)} html body .wp-foot .site-standards li{border-radius:var(--fam-r)} html body .pay-marks .pm-usdt span{border-radius:var(--fam-r-sm)}
html body .feed .sm-word:focus-visible,html body .wc-frost .wc-x:focus-visible,html body .sm-rv .rv-book:focus-visible{border-radius:var(--fam-r)}

/* ---------- 11 · ONE BUTTON (16 Oct 2026, her ask after the phone's new Tap to enter: "make sure that all buttons are following this ...
   all buttons are using the same font and the same style"). One letter for every button: the UI font at 700, sentence case, no spaced
   capitals (the main action 14 to 17 px, the others 13 px); on the dark pages cream words with a gold arrow. One look: the soft square, the
   cream rim and its bright top edge over a night tint. The blur stays only where a picture sits behind (Ariana's tell 5: "glass only where
   something real sits behind it"); in a panel or a lightbox the SAME look without the blur, so the two read as one. The main action keeps
   its gold glass. The laptop's light work page keeps its own ink colour (only the letter changes there). Undo: delete this block. */
:root{--fam-solid-bg:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 50%),rgba(14,9,26,.4);--fam-solid-sh:var(--fam-glass-sh)}
/* the letter, everywhere */
html body :is(.player .tlink,.q .more,.wk .acts button,.wk .acts a,.pinfo summary,.chips button,.hr .c-next,.sm-rv .rv-more,.room-back,.sm-contact .ct-copy,
  .sm-word:not(.sm-skip),.feed .x2.sm-word,.feed .xl.sm-word,.wc-frost .wc-x,.sm-rv .rv-frost .rv-x,.web-page.back-pill .wp-case .wp-back,.glass-pane .gp-go-btn){
  font-family:var(--font-ui);font-weight:700;font-style:normal;font-size:13px;line-height:1;letter-spacing:0;text-transform:none}
html body :is(.ct-send .sm-word,#wpBook.sm-word,.sm-rv .rv-book.sm-word,.web-page .wp-book.sm-word,.sm-rv[data-layout="strip"] .rv-book.sm-word){
  font-family:var(--font-ui);font-weight:700;font-style:normal;font-size:14px;letter-spacing:0;text-transform:none}
html body :is(.pskip span,#workBack.pball span){font:700 13px/1 var(--font-ui);letter-spacing:0;text-transform:none}   /* the phone's Skip and Back to the animation */
html body .golink.seework{font:700 14px/1 var(--font-ui);letter-spacing:0;color:#FFF3DC;text-shadow:0 1px 2px rgba(20,10,4,.55)}   /* See the work: was the italic serif inside the glass */
/* the words cream, the arrow gold (the dark pages; the light work page keeps its ink) */
html body :is(.player .tlink,.q .more,.wk .acts button,.wk .acts a,.pinfo summary,.chips button,.hr .c-next,.sm-rv .rv-more,.room-back,.sm-contact .ct-copy){color:#FFF3DC}
html body :is(.hr .c-next span,.room-back span){color:#FFD98C}
html body .chips button[aria-pressed="true"]{color:#FFD98C}
/* the phone's ← Two worlds: from plain capitals to a button (over the room's picture: glass) */
html body .room-back{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border:0;border-radius:var(--fam-r);
  background:var(--fam-glass-bg);-webkit-backdrop-filter:var(--fam-blur);backdrop-filter:var(--fam-blur);box-shadow:var(--fam-glass-sh)}
/* the contact's Copy (next to the address): from an underlined word to the same small button */
html body .sm-contact .ct-copy{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:0;border-radius:var(--fam-r);text-decoration:none;
  background:var(--fam-solid-bg);box-shadow:var(--fam-solid-sh)}
/* the phone rings' + / × box: the box rotated with the + (a diamond when open, unlike every other Close). Now the box stays a soft square
   and only the cross turns: the + is drawn inside it (two bars, currentColor), the glyph hidden */
html body :is(#ringHost,#wRingHost) .hr .hr-card .c-more i{position:relative;-webkit-text-fill-color:transparent;transform:none}
html body :is(#ringHost,#wRingHost) .hr .hr-card .c-more i::before,html body :is(#ringHost,#wRingHost) .hr .hr-card .c-more i::after{content:"";position:absolute;left:50%;top:50%;
  width:11px;height:1.6px;border-radius:1px;background:currentColor;translate:-50% -50%;transition:rotate .35s cubic-bezier(.22,1,.36,1)}
html body :is(#ringHost,#wRingHost) .hr .hr-card .c-more i::after{rotate:90deg}
html body :is(#ringHost,#wRingHost) .hr .hr-card.open .c-more i::before{rotate:45deg}
html body :is(#ringHost,#wRingHost) .hr .hr-card.open .c-more i::after{rotate:135deg}
/* the laptop's stragglers (16 Oct swipe): the work page's header Tell us your idea was a round pill at 500; the film stream's Close a glass
   circle in the browser's own letter; the ring cards' FIND OUT HOW in spaced capitals (the phone already said Find out how); the old Pavonia
   view's VISIT SITE / BACK TO THE PROJECTS (hidden today, the same letter if it ever comes back) */
html body .web-page .wp-nav .wp-nl.wp-cta{border-radius:var(--fam-r);font-weight:700;letter-spacing:0;text-transform:none;background:var(--fam-gold-bg);box-shadow:var(--fam-gold-sh)}
html body .feed .x2{border-radius:var(--fam-r);background:var(--fam-glass-bg);-webkit-backdrop-filter:var(--fam-blur);backdrop-filter:var(--fam-blur);box-shadow:var(--fam-glass-sh)}
html body .hr .c-more{font-family:var(--font-ui);font-weight:700;font-size:13px;letter-spacing:0;text-transform:none}
html body :is(.ww-visit,.ww-back){font-family:var(--font-ui);font-weight:700;font-size:13px;letter-spacing:0;text-transform:none}