/* The look, shared by every page on realitygameboard.com (iris-relaunch, Nov 10 2026).
   Tokens come from tokens-28.css, copied byte for byte from tbp2-app/docs/mockups-28 (pass 2, approved Nov 4).
   This file holds the fonts and the few shared pieces: the masthead, the button, a plate, a caption, a readout,
   the number inside a headline, her handwritten underline, the two motifs. No hex here; colour is tokens only. */

@font-face{font-family:"Bodoni Moda";font-weight:900;font-style:normal;font-display:swap;src:url(fonts/BodoniModa-Black.woff2) format("woff2")}
@font-face{font-family:"Bodoni Moda";font-weight:900;font-style:italic;font-display:swap;src:url(fonts/BodoniModa-BlackItalic.woff2) format("woff2")}
@font-face{font-family:"Work Sans";font-weight:400;font-display:swap;src:url(fonts/WorkSans-Regular.woff2) format("woff2")}
@font-face{font-family:"Work Sans";font-weight:500;font-display:swap;src:url(fonts/WorkSans-Medium.woff2) format("woff2")}
@font-face{font-family:"Work Sans";font-weight:600;font-display:swap;src:url(fonts/WorkSans-SemiBold.woff2) format("woff2")}
@font-face{font-family:"Xanh Mono";font-weight:400;font-display:swap;src:url(fonts/XanhMono-Regular.woff2) format("woff2")}
@font-face{font-family:"DelfinaHand";font-weight:400;font-display:swap;src:url(fonts/DelfinaHand.woff2) format("woff2")}

*,*:before,*:after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;color-scheme:only light}
body{margin:0;background:var(--ground);color:var(--text);font:var(--body-2);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,p,ul,ol,figure,blockquote{margin:0;padding:0}
ul,ol{list-style:none}
img{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}

/* A number inside a Bodoni headline is Work Sans Semibold (her answer, Nov 4). */
.num{font-family:var(--font-body);font-weight:600;font-size:.9em;letter-spacing:-.02em}

/* The readout layer: Xanh Mono, small and quiet, sentence case. */
.ro{font:var(--readout);letter-spacing:.03em;color:var(--text-muted)}

/* The masthead: her name, and her signature as the mark. */
.mast{display:flex;justify-content:space-between;align-items:center;padding:20px var(--phone-pad) 16px}
.mast .wm{font:var(--display-xs);letter-spacing:var(--tracking-display);text-decoration:none}
.mast .sig{width:var(--signature-small);height:auto}

/* Red means do. Every button, and only buttons. On an Iris field: Birch with Ink type. */
.btn{display:block;width:100%;background:var(--action);color:var(--on-action);font:600 16px/1 var(--font-body);text-align:center;text-decoration:none;padding:19px 16px;border:0;border-radius:var(--radius);cursor:pointer;-webkit-tap-highlight-color:transparent}
.btn:hover{filter:brightness(.93)}
.btn.on-iris{background:var(--action-on-iris);color:var(--ink)}

/* Lavender in place of a white box. */
.plate{background:var(--plate);padding:32px 24px 28px}

/* Under a photograph: place and month, in mono. */
.cap{display:flex;justify-content:space-between;gap:12px;font:var(--readout);color:var(--text-muted);padding:10px var(--phone-pad) 0;letter-spacing:.03em}

/* Her handwritten underline under the hero's key phrase: a drawn stroke under each word, so the phrase can wrap. */
.hul{white-space:nowrap;display:inline-block;position:relative}
.hul:after{content:"";position:absolute;left:-7px;right:-7px;bottom:-9px;height:14px;background:var(--iris);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 14' preserveAspectRatio='none'><path d='M3 8 C 60 3, 130 11, 210 7 S 350 3, 417 9' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round'/></svg>") left top/100% 100% no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 14' preserveAspectRatio='none'><path d='M3 8 C 60 3, 130 11, 210 7 S 350 3, 417 9' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round'/></svg>") left top/100% 100% no-repeat}

/* The motifs. Her sigil as a section marker (36 to 48 px), the mandala trace once at ornament size.
   Never more than one on a screen. */
.beat{display:flex;justify-content:center;padding:64px 0 56px}
.sigil{display:block;width:36px;height:48px;background:var(--ink);
  -webkit-mask:url(sigil-marker.svg) center/contain no-repeat;mask:url(sigil-marker.svg) center/contain no-repeat}
.orn{display:flex;justify-content:center;padding:88px 0 96px;color:var(--ink)}
.orn svg{display:block}