/* page.css (v3) */
/* ============================================================
   page.css — the page itself. Shared by the builder (index.html) and the
   visitor's copy (view.html), so it carries its own fonts, its own reset and
   its own defaults: nothing in here may lean on styles.css.

   Everything reads the theme's custom properties (themes.js → applyTheme).
   `data-layout` on .profile arranges the hero three ways:
     over  — the photo fills the top of the screen, the name sits on it
     below — the photo on top, the name under it on the page
     card  — a color block carries the name; the photo is a card on it
   Editor controls ship in the markup and are hidden here; styles.css shows
   them under `.editable`.
   ============================================================ */

/* ---------- fonts (vendored, OFL — see vendor/fonts/OFL-*.txt) ---------- */

@font-face {
  font-family: 'Instrument Serif';
  src: url('/_lf/fonts/instrument-serif-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('/_lf/fonts/instrument-serif-400-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('/_lf/fonts/bricolage-grotesque-var.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('/_lf/fonts/fraunces-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* The catalog's faces (themes.js TYPES). Latin only; a browser fetches one
   the first time a style on screen asks for it. */
@font-face {
  font-family: 'Anton';
  src: url('/_lf/fonts/anton-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Space Mono';
  src: url('/_lf/fonts/space-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Space Mono';
  src: url('/_lf/fonts/space-mono-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Caveat';
  src: url('/_lf/fonts/caveat-var.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('/_lf/fonts/nunito-var.woff2') format('woff2');
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bodoni Moda';
  src: url('/_lf/fonts/bodoni-moda-var.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bodoni Moda';
  src: url('/_lf/fonts/bodoni-moda-italic-var.woff2') format('woff2');
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('/_lf/fonts/archivo-var.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
/* Arabic letters only, next to every face: a name typed in Arabic is set in
   Cairo, whatever the style. Never fetched for a page with none. */
@font-face {
  font-family: 'LF Arabic';
  src: url('/_lf/fonts/cairo-arabic-var.woff2') format('woff2');
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

/* ---------- defaults + reset, scoped to the page ----------
   :where() keeps these at zero specificity, so any class below wins. */

.profile {
  --t-header-bg: #3b2a24;
  --t-on-header: #ffffff;
  --t-on-header-muted: rgba(255, 255, 255, 0.78);
  --t-accent: #c8643c;
  --t-on-accent: #ffffff;
  --t-accent-ink: #a64d2a;
  --t-bg: #f6f1ea;
  --t-surface: #ffffff;
  --t-text: #1d1b20;
  --t-muted: #6b6560;
  --t-border: #e6dfd6;
  --t-on-photo: #ffffff;
  --t-radius: 20px;
  --t-font-display: 'Instrument Serif', Georgia, serif;
  --t-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --t-display-weight: 400;
  --t-display-vars: normal;
  --t-display-track: -0.01em;
  --t-name-size: 56px;
  --t-title-size: 26px;
  --t-title-weight: 400;
  --t-hero-h: 74svh;
  --t-card-shadow: 0 1px 2px rgba(20, 16, 12, 0.05), 0 8px 24px rgba(20, 16, 12, 0.06);
  --t-glass: none;
  --t-map-filter: grayscale(1) contrast(0.9) brightness(1.05);
}

:where(.profile) :where(h1, h2, p, ul, li, figure, blockquote, figcaption) { margin: 0; padding: 0; }
:where(.profile) :where(ul) { list-style: none; }
:where(.profile) :where(button) {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
:where(.profile) :where(a) { color: inherit; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
:where(.profile) :where(img) { display: block; max-width: none; }
.profile, .profile * { box-sizing: border-box; }

/* ---------- the scroll column ---------- */

.profile {
  position: absolute;
  inset: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  background-color: var(--t-bg);
  /* the page's texture (below): scrolled with the page, under everything */
  background-image: var(--tex, none);
  background-size: var(--tex-size, auto);
  background-position: var(--tex-pos, 0 0);
  background-repeat: var(--tex-repeat, repeat);
  background-attachment: var(--tex-attach, local);
  color: var(--t-text);
  font-family: var(--t-font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.p-header, .p-body { position: relative; z-index: 1; }

/* ---------- a page-wide cover (Aura) ----------
   Pinned, not scrolled: sticky at the top with its own height taken back out
   of the flow keeps the photo still under a moving page. */

.p-page-cover { display: none; }
.profile[data-cover="page"] .p-page-cover {
  display: block;
  position: sticky;
  top: 0;
  height: 100dvh;
  margin-bottom: -100dvh;
  overflow: hidden;
  pointer-events: none;
}
.p-cover-img {
  position: absolute;
  /* A blur fades to nothing at the edges; oversizing by twice the radius
     pushes the fade outside the clip. */
  inset: calc(var(--t-cover-blur, 30px) * -2);
  width: calc(100% + var(--t-cover-blur, 30px) * 4);
  height: calc(100% + var(--t-cover-blur, 30px) * 4);
  object-fit: cover;
  filter: blur(var(--t-cover-blur, 30px)) saturate(var(--t-cover-sat, 1.2));
  opacity: 0;
  transition: opacity 0.6s ease;
}
.p-cover-img[data-on] { opacity: 1; }
.p-page-cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--t-bg) var(--t-cover-veil, 60%), transparent);
}

/* ---------- textures: what the page is printed on (themes.js TEXTURES) ----------
   Gradients wherever a gradient can draw it, so the texture is in the page's
   own ink; grain, stars and hearts are small SVGs. `local` scrolls it with
   the page; Glow stays put behind it. The cards sit on top, so a texture
   shows around them and never under the words. */

.profile { --tex-ink: color-mix(in srgb, var(--t-text) 8%, transparent); }
.profile[data-texture="grain"] {
  --tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .62 -.2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  --tex-size: 180px 180px;
}
.profile[data-texture="grain"][data-dark="1"] {
  --tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 -.17'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
.profile[data-texture="grid"] {
  --tex-ink: color-mix(in srgb, var(--t-text) 7%, transparent);
  --tex: linear-gradient(var(--tex-ink) 1px, transparent 1px), linear-gradient(90deg, var(--tex-ink) 1px, transparent 1px);
  --tex-size: 28px 28px;
}
.profile[data-texture="dots"] {
  --tex-ink: color-mix(in srgb, var(--t-text) 17%, transparent);
  --tex: radial-gradient(circle, var(--tex-ink) 1.3px, transparent 1.7px);
  --tex-size: 18px 18px;
}
.profile[data-texture="mesh"] {
  --tex: radial-gradient(80% 46% at 0% 0%, color-mix(in srgb, var(--t-accent) 30%, transparent), transparent 72%),
    radial-gradient(70% 40% at 100% 40%, color-mix(in srgb, var(--t-header-bg) 26%, transparent), transparent 72%),
    radial-gradient(85% 45% at 15% 100%, color-mix(in srgb, var(--t-accent) 20%, transparent), transparent 72%);
  --tex-size: 100% 100%;
  --tex-repeat: no-repeat;
  --tex-attach: scroll;
}
.profile[data-texture="stripes"] {
  --tex-ink: color-mix(in srgb, var(--t-text) 7%, transparent);
  --tex: repeating-linear-gradient(-45deg, var(--tex-ink) 0 1.3px, transparent 1.3px 10px);
}
/* dots that fade out down the first screen, like a photocopied poster */
.profile[data-texture="halftone"] {
  --tex-ink: color-mix(in srgb, var(--t-text) 20%, transparent);
  --tex: linear-gradient(to bottom, transparent 0, var(--t-bg) 600px), radial-gradient(circle, var(--tex-ink) 2.1px, transparent 2.5px);
  --tex-size: 100% 100%, 10px 10px;
  --tex-repeat: no-repeat, repeat;
}
.profile[data-texture="waves"] {
  --tex-ink: color-mix(in srgb, var(--t-text) 11%, transparent);
  --tex: radial-gradient(circle at 50% 100%, transparent 9px, var(--tex-ink) 9.2px 10.6px, transparent 10.9px),
    radial-gradient(circle at 50% 100%, transparent 9px, var(--tex-ink) 9.2px 10.6px, transparent 10.9px);
  --tex-size: 24px 16px;
  --tex-pos: 0 0, 12px 8px;
}
.profile[data-texture="gingham"] {
  --tex-ink: color-mix(in srgb, var(--t-accent) 12%, transparent);
  --tex: linear-gradient(90deg, var(--tex-ink) 50%, transparent 0), linear-gradient(var(--tex-ink) 50%, transparent 0);
  --tex-size: 26px 26px;
}
.profile[data-texture="stars"] {
  --tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' fill='%23d9ae55' fill-opacity='.5'%3E%3Cpath d='M16 8l1.8 6.2L24 16l-6.2 1.8L16 24l-1.8-6.2L8 16l6.2-1.8z'/%3E%3Cpath d='M46 39l1 3.6 3.6 1-3.6 1-1 3.6-1-3.6-3.6-1 3.6-1z'/%3E%3Ccircle cx='50' cy='14' r='1.3'/%3E%3Ccircle cx='14' cy='50' r='1'/%3E%3C/svg%3E");
  --tex-size: 64px 64px;
}
.profile[data-texture="snow"] {
  --tex-ink: color-mix(in srgb, var(--t-text) 24%, transparent);
  --tex: radial-gradient(circle, var(--tex-ink) 1.7px, transparent 2.1px), radial-gradient(circle, var(--tex-ink) 1px, transparent 1.4px);
  --tex-size: 46px 46px, 29px 29px;
  --tex-pos: 0 0, 13px 17px;
}
.profile[data-texture="confetti"] {
  --tex: radial-gradient(circle, color-mix(in srgb, var(--t-accent) 55%, transparent) 2.2px, transparent 2.6px),
    radial-gradient(circle, color-mix(in srgb, var(--t-deco) 65%, transparent) 1.7px, transparent 2.1px),
    radial-gradient(circle, color-mix(in srgb, var(--t-header-bg) 45%, transparent) 1.4px, transparent 1.8px);
  --tex-size: 58px 58px, 37px 37px, 23px 23px;
  --tex-pos: 0 0, 11px 19px, 7px 3px;
}
.profile[data-texture="hearts"] {
  --tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' fill='%23e07c98' fill-opacity='.32'%3E%3Cpath d='M12 18s-6-3.9-6-7.8a3.3 3.3 0 0 1 6-1.9 3.3 3.3 0 0 1 6 1.9C18 14.1 12 18 12 18z'/%3E%3Cpath d='M36 40s-4-2.6-4-5.2a2.2 2.2 0 0 1 4-1.3 2.2 2.2 0 0 1 4 1.3C40 37.4 36 40 36 40z'/%3E%3C/svg%3E");
  --tex-size: 48px 48px;
}

/* ---------- occasions: ornaments over the top, and a greeting ----------
   Hung across the top of the hero (lanterns, lights, bunting), in their own
   colors, and a line over the name. The owner chose the style, so the words
   are theirs to show. */

.p-header::after { content: none; }
:is(.profile[data-occasion="ramadan"], .profile[data-occasion="eid"], .profile[data-occasion="holiday"],
  .profile[data-occasion="summer"], .profile[data-occasion="opening"], .profile[data-occasion="mothers"]) .p-header::after {
  content: '';
  position: absolute;
  z-index: 2;
  inset-inline: 0;
  top: calc(env(safe-area-inset-top) + var(--bar-offset, 0px));
  height: 110px;
  background: var(--deco) center top / 390px 110px no-repeat;
  pointer-events: none;
}
.profile[data-occasion="ramadan"] {
  --deco: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='390' height='110'%3E%3Cdefs%3E%3Cg id='l'%3E%3Ccircle cx='0' cy='2' r='2.4' fill='none' stroke='%23e3bc62' stroke-width='1.2'/%3E%3Cpath d='M-8 13L-3 5h6l5 8z'/%3E%3Cpath d='M-10 13h20l-2 24h-16z'/%3E%3Cpath d='M-5 17h3v15h-3zM2 17h3v15h-3z' fill='%23fff3cf' fill-opacity='.8'/%3E%3Cpath d='M-8 37h16l-8 8z'/%3E%3Cpath d='M0 45v7' stroke='%23e3bc62' stroke-width='1.4'/%3E%3C/g%3E%3C/defs%3E%3Cg stroke='%23e3bc62' stroke-width='1.1'%3E%3Cpath d='M34 0v22M78 0v44M356 0v30'/%3E%3C/g%3E%3Cg fill='%23e3bc62'%3E%3Cuse href='%23l' transform='translate(34 22)'/%3E%3Cuse href='%23l' transform='translate(78 44) scale(.78)'/%3E%3Cuse href='%23l' transform='translate(356 30) scale(1.1)'/%3E%3Cpath d='M300 28a16 16 0 1 0 15 23 12.5 12.5 0 1 1-15-23z'/%3E%3Cpath d='M322 38l1.2 3.8 3.8 1.2-3.8 1.2-1.2 3.8-1.2-3.8-3.8-1.2 3.8-1.2z'/%3E%3C/g%3E%3C/svg%3E");
}
.profile[data-occasion="eid"] {
  --deco: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='390' height='110'%3E%3Cdefs%3E%3Cpath id='s' d='M0-7l1.8 5.2L7 0l-5.2 1.8L0 7l-1.8-5.2L-7 0l5.2-1.8z'/%3E%3Cpath id='c' d='M0-7a7 7 0 1 0 6 10.5 5.5 5.5 0 1 1-6-10.5z'/%3E%3C/defs%3E%3Cpath d='M0 6Q195 74 390 6' fill='none' stroke='%23c99a3c' stroke-width='1.2'/%3E%3Cg stroke='%23c99a3c' stroke-width='1'%3E%3Cpath d='M40 12v20M95 18v28M150 22v16M240 22v24M295 18v16M350 12v26'/%3E%3C/g%3E%3Cg fill='%23c99a3c'%3E%3Cuse href='%23s' transform='translate(40 39)'/%3E%3Cuse href='%23c' transform='translate(95 53)'/%3E%3Cuse href='%23s' transform='translate(150 45) scale(.8)'/%3E%3Cuse href='%23c' transform='translate(240 53)'/%3E%3Cuse href='%23s' transform='translate(295 41)'/%3E%3Cuse href='%23c' transform='translate(350 45) scale(.85)'/%3E%3C/g%3E%3C/svg%3E");
}
.profile[data-occasion="holiday"] {
  --deco: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='390' height='110'%3E%3Cdefs%3E%3Cg id='b'%3E%3Crect x='-2' y='0' width='4' height='3' fill='%23b89a5a'/%3E%3C/g%3E%3C/defs%3E%3Cpath d='M0 6Q97 34 195 8Q293 34 390 6' fill='none' stroke='%23b89a5a' stroke-width='1.3' stroke-opacity='.8'/%3E%3Cg fill-opacity='.28'%3E%3Ccircle cx='24' cy='19' r='9' fill='%23ff5d5d'/%3E%3Ccircle cx='68' cy='26' r='9' fill='%23ffd35c'/%3E%3Ccircle cx='112' cy='27' r='9' fill='%236fd3c1'/%3E%3Ccircle cx='156' cy='23' r='9' fill='%23ff9f40'/%3E%3Ccircle cx='234' cy='23' r='9' fill='%23ff5d5d'/%3E%3Ccircle cx='278' cy='27' r='9' fill='%23ffd35c'/%3E%3Ccircle cx='322' cy='26' r='9' fill='%236fd3c1'/%3E%3Ccircle cx='366' cy='19' r='9' fill='%23ff9f40'/%3E%3C/g%3E%3Cuse href='%23b' x='24' y='12'/%3E%3Cuse href='%23b' x='68' y='19'/%3E%3Cuse href='%23b' x='112' y='20'/%3E%3Cuse href='%23b' x='156' y='16'/%3E%3Cuse href='%23b' x='234' y='16'/%3E%3Cuse href='%23b' x='278' y='20'/%3E%3Cuse href='%23b' x='322' y='19'/%3E%3Cuse href='%23b' x='366' y='12'/%3E%3Cellipse cx='24' cy='19.5' rx='3.6' ry='5' fill='%23ff5d5d'/%3E%3Cellipse cx='68' cy='26.5' rx='3.6' ry='5' fill='%23ffd35c'/%3E%3Cellipse cx='112' cy='27.5' rx='3.6' ry='5' fill='%236fd3c1'/%3E%3Cellipse cx='156' cy='23.5' rx='3.6' ry='5' fill='%23ff9f40'/%3E%3Cellipse cx='234' cy='23.5' rx='3.6' ry='5' fill='%23ff5d5d'/%3E%3Cellipse cx='278' cy='27.5' rx='3.6' ry='5' fill='%23ffd35c'/%3E%3Cellipse cx='322' cy='26.5' rx='3.6' ry='5' fill='%236fd3c1'/%3E%3Cellipse cx='366' cy='19.5' rx='3.6' ry='5' fill='%23ff9f40'/%3E%3C/svg%3E");
}
.profile[data-occasion="summer"] {
  --deco: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='390' height='110'%3E%3Cg fill='%23ffb238'%3E%3Ccircle cx='350' cy='24' r='19'/%3E%3C/g%3E%3Cg stroke='%23ffb238' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M377 24h8M373.4 37.5l6.9 4M363.5 47.4l4 6.9M350 51v8M336.5 47.4l-4 6.9M326.6 37.5l-6.9 4M323 24h-8M326.6 10.5l-6.9-4M336.5.6l-4-6.9M363.5.6l4-6.9M373.4 10.5l6.9-4'/%3E%3C/g%3E%3C/svg%3E");
}
.profile[data-occasion="opening"] {
  --deco: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='390' height='110'%3E%3Cpath d='M0 4Q195 38 390 4' fill='none' stroke='%23444' stroke-opacity='.5' stroke-width='1.2'/%3E%3Cpath d='M4 4.7L26 8.2 15 28.5z' fill='%23ff5e5b'/%3E%3Cpath d='M34 9.4L56 12.4 45 32.9z' fill='%23ffc93c'/%3E%3Cpath d='M64 13.3L86 15.7 75 36.6z' fill='%232ec4b6'/%3E%3Cpath d='M94 16.4L116 18.2 105 39.4z' fill='%233a86ff'/%3E%3Cpath d='M124 18.8L146 19.9 135 41.4z' fill='%23ff70a6'/%3E%3Cpath d='M154 20.3L176 20.8 165 42.6z' fill='%23ff5e5b'/%3E%3Cpath d='M184 21L206 21 195 43z' fill='%23ffc93c'/%3E%3Cpath d='M214 20.8L236 20.3 225 42.6z' fill='%232ec4b6'/%3E%3Cpath d='M244 19.9L266 18.8 255 41.4z' fill='%233a86ff'/%3E%3Cpath d='M274 18.2L296 16.4 285 39.4z' fill='%23ff70a6'/%3E%3Cpath d='M304 15.7L326 13.3 315 36.6z' fill='%23ff5e5b'/%3E%3Cpath d='M334 12.4L356 9.4 345 32.9z' fill='%23ffc93c'/%3E%3Cpath d='M364 8.2L386 4.7 375 28.5z' fill='%232ec4b6'/%3E%3C/svg%3E");
}
.profile[data-occasion="mothers"] {
  --deco: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='390' height='110'%3E%3Cdefs%3E%3Cg id='f'%3E%3Cg fill='%23e27d9b'%3E%3Ccircle cx='0' cy='-6' r='5'/%3E%3Ccircle cx='5.7' cy='-1.9' r='5'/%3E%3Ccircle cx='3.5' cy='4.9' r='5'/%3E%3Ccircle cx='-3.5' cy='4.9' r='5'/%3E%3Ccircle cx='-5.7' cy='-1.9' r='5'/%3E%3C/g%3E%3Ccircle r='3.4' fill='%23ffd166'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='%2386b88f'%3E%3Cellipse cx='44' cy='34' rx='9' ry='3.4' transform='rotate(-25 44 34)'/%3E%3Cellipse cx='12' cy='44' rx='8' ry='3' transform='rotate(35 12 44)'/%3E%3Cellipse cx='346' cy='32' rx='9' ry='3.4' transform='rotate(25 346 32)'/%3E%3Cellipse cx='378' cy='42' rx='8' ry='3' transform='rotate(-35 378 42)'/%3E%3C/g%3E%3Cuse href='%23f' transform='translate(24 26)'/%3E%3Cuse href='%23f' transform='translate(56 14) scale(.75)'/%3E%3Cuse href='%23f' transform='translate(366 24)'/%3E%3Cuse href='%23f' transform='translate(334 12) scale(.75)'/%3E%3C/svg%3E");
}
/* the greeting: a small line over the name, in the name's own color */
:is(.profile[data-occasion="ramadan"], .profile[data-occasion="eid"], .profile[data-occasion="holiday"],
  .profile[data-occasion="summer"], .profile[data-occasion="opening"], .profile[data-occasion="mothers"]) .p-hero-id::before {
  display: inline-block;
  padding: 5px 11px;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  font-family: var(--t-font-body);
  font-size: 11.5px;
  font-weight: 750;
  line-height: 1.25;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.profile[data-occasion="ramadan"] .p-hero-id::before { content: '✦ Ramadan Kareem · رمضان كريم'; }
.profile[data-occasion="eid"] .p-hero-id::before { content: '✦ Eid Mubarak · عيد مبارك'; }
.profile[data-occasion="holiday"] .p-hero-id::before { content: '✦ Season’s greetings'; }
.profile[data-occasion="summer"] .p-hero-id::before { content: '✦ Hello, summer'; }
.profile[data-occasion="opening"] .p-hero-id::before { content: '✦ Now open'; }
.profile[data-occasion="mothers"] .p-hero-id::before { content: '✦ Happy Mother’s Day'; }

/* ================= the hero ================= */

.p-header {
  display: flex;
  flex-direction: column;
  color: var(--t-on-header);
}

.p-hero-media {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--t-header-bg);
}
.p-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.p-hero-img[data-on] { opacity: 1; }

/* No photo: the page's own colors, and its initials set enormous in the
   style's display face. It reads as a cover, not as a missing picture. */
.p-hero-mono {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(110% 75% at 12% 6%, color-mix(in srgb, var(--t-accent) 70%, transparent) 0%, transparent 62%),
    radial-gradient(95% 70% at 94% 98%, color-mix(in srgb, var(--t-on-header) 20%, transparent) 0%, transparent 60%),
    var(--t-header-bg);
}
.p-hero-mono span {
  font-family: var(--t-font-display);
  font-weight: var(--t-display-weight);
  font-variation-settings: var(--t-display-vars);
  font-style: var(--t-name-style, normal);
  font-size: 210px;
  line-height: 0.8;
  letter-spacing: -0.05em;
  white-space: nowrap;
  color: var(--t-on-header);
  opacity: 0.16;
  transform: translateY(-8%);
}
.p-header[data-hero="photo"] .p-hero-mono span { opacity: 0; }

/* A profile picture off an Instagram screenshot is a few hundred pixels: as a
   cover it would be a blur. It is drawn the way it was drawn there, round, on
   the page's own colors, at the start of the line the name is set on. */
.p-header[data-hero="round"] { --round: 118px; }
.p-header[data-hero="round"] .p-hero-mono span { opacity: 0; }
.p-header[data-hero="round"] .p-hero-img {
  inset: auto 0;
  top: calc(env(safe-area-inset-top) + var(--bar-offset, 0px) + 44px);
  margin-inline: var(--t-round-margin, 22px auto);
  width: var(--round);
  height: var(--round);
  border-radius: 50%;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--t-on-header) 70%, transparent), 0 18px 34px -14px rgba(0, 0, 0, 0.5);
}

/* A photographer's credit, set the way magazines set them: small, sideways,
   along the edge. Google requires it on its photos; it costs nothing here. */
.p-hero-credit {
  position: absolute;
  z-index: 2;
  inset-inline-end: 7px;
  top: 38%;
  max-height: 44%;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: var(--t-font-body);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.66);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

.p-hero-id {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: var(--t-id-align, start);
  gap: 9px;
  padding: 22px 22px 0;
  text-align: var(--t-id-align, start);
}

.p-eyebrow {
  font-family: var(--t-font-body);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.88;
}
.p-eyebrow:empty { display: none; }

.p-name {
  max-width: 100%;
  font-family: var(--t-font-display);
  font-size: calc(var(--t-name-size) * var(--name-k, 1));
  font-weight: var(--t-display-weight);
  font-variation-settings: var(--t-display-vars);
  font-style: var(--t-name-style, normal);
  letter-spacing: var(--t-display-track);
  text-transform: var(--t-name-case, none);
  line-height: var(--name-lh, 0.98);
  overflow-wrap: break-word;
  text-wrap: balance;
}
.p-name[data-fit="l"] { font-size: calc(var(--t-name-size) * var(--name-k, 1) * 0.84); }
.p-name[data-fit="xl"] { font-size: calc(var(--t-name-size) * var(--name-k, 1) * 0.7); }
.p-name[data-fit="xxl"] { font-size: calc(var(--t-name-size) * var(--name-k, 1) * 0.58); }
.p-name:empty::before { content: attr(data-placeholder); opacity: 0.5; }

.p-tagline {
  max-width: 36ch;
  font-family: var(--t-tagline-font, inherit);
  font-size: var(--t-tagline-size, 16.5px);
  font-style: var(--t-tagline-style, normal);
  line-height: 1.38;
  opacity: 0.9;
  overflow-wrap: break-word;
  text-wrap: pretty;
}
.p-tagline:empty::before { content: attr(data-placeholder); opacity: 0.55; }
.profile:not(.editable) .p-tagline:empty { display: none; }

/* ★ 4.7 (1,204) · $$ · ● Open now until 11 PM */
.p-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: var(--t-id-align, start);
  row-gap: 6px;
  margin-top: 3px;
  font-family: var(--t-font-body);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.p-meta > span:not(.p-meta-sep) { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.p-meta small { font-size: inherit; font-weight: 500; opacity: 0.78; }
.p-meta-sep {
  width: 3px;
  height: 3px;
  margin: 0 9px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
}
.p-meta-star { font-size: 15px; color: #ffc53d; }
/* hidden by the owner (state.hide): in the markup, off the page */
.p-header .p-meta > span[data-hidden], .p-company .p-company-meta > span[data-hidden],
.p-header .p-meta[data-empty], .p-company .p-company-meta[data-empty] { display: none; }
.p-open i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #34c759;
  box-shadow: 0 0 0 3px rgba(52, 199, 89, 0.28);
  animation: openBreath 2.6s ease-in-out infinite;
}
.p-open[data-open="soon"] i { background: #ff9f0a; box-shadow: 0 0 0 3px rgba(255, 159, 10, 0.28); }
.p-open[data-open="no"] i { background: #ff5f57; box-shadow: 0 0 0 3px rgba(255, 95, 87, 0.25); animation: none; }
@keyframes openBreath {
  50% { box-shadow: 0 0 0 5px rgba(52, 199, 89, 0.12); }
}

/* An opt-in line under the name: "Taking projects from 15 Oct". */
.p-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 4px;
  padding: 6px 12px;
  padding-inline-start: 10px;
  border-radius: 999px;
  border: 1.5px solid currentColor;
  font-family: var(--t-font-body);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
}
.p-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #34c759;
  box-shadow: 0 0 0 3px rgba(52, 199, 89, 0.25);
}
/* A colored one (profile.js statusPaint): the pill filled, its dot the text's color */
.p-status[data-color] { border-color: var(--status); background: var(--status); color: var(--status-ink); }
.p-status[data-color] i { background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 28%, transparent); }

/* ---------- layout: over ---------- */

.profile[data-layout="over"] .p-header {
  min-height: var(--t-hero-h);
  justify-content: flex-end;
}
.profile[data-layout="over"] .p-header[data-hero="photo"] { color: var(--t-on-photo); }
.profile[data-layout="over"] .p-header[data-hero="mono"] { min-height: min(var(--t-hero-h), 60svh); }
.profile[data-layout="over"] .p-hero-media { position: absolute; inset: 0; }
.profile[data-layout="over"] .p-hero-id { padding: 0 22px 64px; }

/* The scrim: a little dark at the very top for the status bar and the editor
   strip, a lot at the bottom where the name sits. */
.profile[data-layout="over"] .p-header[data-hero="photo"] .p-hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.34) 0%, rgba(0, 0, 0, 0) 22%),
    linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.52) 28%, rgba(0, 0, 0, 0) 60%);
}
/* On a dark page the photo melts into it instead of stopping at a line. */
.profile[data-layout="over"][data-dark="1"] .p-header[data-hero="photo"] .p-hero-media::after {
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.34) 0%, rgba(0, 0, 0, 0) 22%),
    linear-gradient(to top, var(--t-bg) 0%, color-mix(in srgb, var(--t-bg) 72%, transparent) 24%, transparent 62%);
}
/* A page-wide cover: the sharp photo dissolves into its own blur below. */
.profile[data-cover="page"][data-layout="over"] .p-header[data-hero="photo"] .p-hero-media {
  -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
}
.profile[data-cover="page"][data-layout="over"] .p-header[data-hero="photo"] .p-hero-media::after {
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 22%),
    linear-gradient(to top, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 55%);
}
/* round: the colors are the cover; the picture sits above the name */
.profile[data-layout="over"] .p-header[data-hero="round"] { min-height: 0; justify-content: flex-start; }
.profile[data-layout="over"] .p-header[data-hero="round"] .p-hero-id {
  padding-top: calc(env(safe-area-inset-top) + var(--bar-offset, 0px) + var(--round) + 68px);
}
.profile[data-layout="over"] .p-header[data-hero="photo"] .p-name { text-shadow: 0 2px 28px rgba(0, 0, 0, 0.3); }
.profile[data-layout="over"] .p-header[data-hero="photo"] .p-tagline,
.profile[data-layout="over"] .p-header[data-hero="photo"] .p-meta { text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35); }

/* ---------- layout: below ---------- */

.profile[data-layout="below"] .p-header { color: var(--t-text); }
.profile[data-layout="below"] .p-hero-media {
  height: var(--t-hero-h);
  margin: var(--t-hero-top, 0px) var(--t-hero-inset, 0px) 0;
  border-radius: var(--t-hero-radius, 0px);
}
.profile[data-layout="below"] .p-header[data-hero="mono"] .p-hero-media { height: min(var(--t-hero-h), 34svh); }
.profile[data-layout="below"] .p-hero-id { padding: 26px 22px 6px; }
/* round: the picture on the page itself, over the name, no band behind it */
.profile[data-layout="below"] .p-header[data-hero="round"] .p-hero-media {
  height: calc(env(safe-area-inset-top) + var(--bar-offset, 0px) + var(--round) + 44px);
  margin: 0;
  border-radius: 0;
  background: none;
  overflow: visible;
}
.profile[data-layout="below"] .p-header[data-hero="round"] .p-hero-mono { display: none; }
.profile[data-layout="below"] .p-header[data-hero="round"] .p-hero-img {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--t-text) 14%, transparent), 0 18px 34px -16px rgba(0, 0, 0, 0.4);
}
.profile[data-layout="below"] .p-header[data-hero="round"] .p-hero-id { padding-top: 22px; }
.profile[data-layout="below"] .p-eyebrow { color: var(--t-accent-ink); opacity: 1; }
.profile[data-layout="below"] .p-tagline { color: var(--t-muted); opacity: 1; }
.profile[data-layout="below"] .p-meta-star,
.profile[data-layout="card"] .p-meta-star { color: #e9a409; }

/* ---------- layout: card ---------- */

.profile[data-layout="card"] .p-header {
  padding-top: calc(env(safe-area-inset-top) + var(--bar-offset, 0px) + 34px);
  margin-bottom: 62px;
  border-radius: 0 0 34px 34px;
  background: var(--t-header-bg);
}
.profile[data-layout="card"] .p-hero-id { order: 1; padding: 0 22px 26px; }
.profile[data-layout="card"] .p-hero-media {
  order: 2;
  height: var(--t-hero-h);
  margin: 0 20px -62px;
  border-radius: max(10px, var(--t-radius));
  box-shadow: 0 26px 50px -14px rgba(0, 0, 0, 0.4);
  transform: rotate(-1.4deg);
}
.profile[data-layout="card"] .p-header[data-hero="mono"] { margin-bottom: 0; padding-bottom: 10px; }
.profile[data-layout="card"] .p-header[data-hero="mono"] .p-hero-media { display: none; }
/* round: no tilted photo under the block; the picture heads it */
.profile[data-layout="card"] .p-header[data-hero="round"] { margin-bottom: 0; }
.profile[data-layout="card"] .p-header[data-hero="round"] .p-hero-media {
  order: 0;
  height: calc(var(--round) + 22px);
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
  background: none;
}
.profile[data-layout="card"] .p-header[data-hero="round"] .p-hero-mono { display: none; }
.profile[data-layout="card"] .p-header[data-hero="round"] .p-hero-img { top: 0; }

/* ---------- the catalog's layouts ----------
   Six more ways to hang the photo, each drawn for the three kinds of hero:
   a photo, a round picture (off an Instagram screenshot) and none (the
   initials). Where the name sits on the page's own color it reads in the
   page's ink, like Name below. */

.profile:is([data-layout="round"], [data-layout="frame"], [data-layout="arch"], [data-layout="banner"]) .p-header { color: var(--t-text); }
.profile:is([data-layout="round"], [data-layout="frame"], [data-layout="arch"], [data-layout="banner"]) .p-eyebrow { color: var(--t-accent-ink); opacity: 1; }
.profile:is([data-layout="round"], [data-layout="frame"], [data-layout="arch"], [data-layout="banner"]) .p-tagline { color: var(--t-muted); opacity: 1; }
.profile:is([data-layout="round"], [data-layout="frame"], [data-layout="arch"], [data-layout="banner"]) .p-meta-star { color: #e9a409; }
/* a small hero shows its initials whole, not as a watermark */
.profile:is([data-layout="round"], [data-layout="frame"], [data-layout="arch"]) .p-header[data-hero="mono"] .p-hero-mono span {
  font-size: 92px;
  line-height: 1;
  letter-spacing: -0.02em;
  opacity: 0.94;
  transform: none;
}
/* where the photo is small, its credit runs along the bottom, not the side */
.profile:is([data-layout="round"], [data-layout="arch"]) .p-hero-credit {
  inset: auto 18% 12px;
  top: auto;
  max-height: none;
  writing-mode: horizontal-tb;
  transform: none;
  text-align: center;
  font-size: 8px;
}

/* round: the picture in a circle, the name under it, all centered */
.profile[data-layout="round"] .p-header { padding-top: calc(env(safe-area-inset-top) + var(--bar-offset, 0px) + 40px); }
.profile[data-layout="round"] .p-hero-media {
  width: 140px;
  height: 140px;
  margin: 0 auto;
  border-radius: 50%;
  box-shadow: 0 0 0 5px var(--t-bg), 0 0 0 6.5px color-mix(in srgb, var(--t-accent) 55%, transparent), 0 22px 40px -18px rgba(0, 0, 0, 0.5);
}
.profile[data-layout="round"] .p-header[data-hero="round"] .p-hero-img {
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  box-shadow: none;
}
.profile[data-layout="round"] .p-header[data-hero="mono"] .p-hero-mono span { font-size: 62px; }
.profile[data-layout="round"] .p-hero-id { padding: 22px 24px 6px; }

/* poster: the name first, huge, on the hero's color; the photo a strip under it */
.profile[data-layout="poster"] .p-header {
  padding-top: calc(env(safe-area-inset-top) + var(--bar-offset, 0px) + 30px);
  background: var(--t-header-bg);
}
.profile[data-layout="poster"] .p-hero-id { order: 1; padding: 0 20px 24px; --name-k: 1.3; --name-lh: 0.88; }
.profile[data-layout="poster"] .p-hero-media { order: 2; height: var(--t-hero-h); }
.profile[data-layout="poster"] .p-header[data-hero="mono"] .p-hero-media { display: none; }
.profile[data-layout="poster"] .p-header[data-hero="mono"] { padding-bottom: 8px; }
.profile[data-layout="poster"] .p-header[data-hero="round"] .p-hero-media {
  order: 0;
  height: calc(var(--round) + 22px);
  background: none;
  overflow: visible;
}
.profile[data-layout="poster"] .p-header[data-hero="round"] .p-hero-mono { display: none; }
.profile[data-layout="poster"] .p-header[data-hero="round"] .p-hero-img { top: 0; }

/* frame: a polaroid, a little crooked, the credit written on its margin */
.profile[data-layout="frame"] .p-header { padding-top: calc(env(safe-area-inset-top) + var(--bar-offset, 0px) + 34px); }
.profile[data-layout="frame"] .p-hero-media {
  width: 78%;
  height: var(--t-hero-h);
  margin: 0 auto;
  border-radius: 3px;
  background: #fbfaf7;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14), 0 22px 38px -16px rgba(0, 0, 0, 0.45);
  transform: rotate(-2.2deg);
}
.profile[data-layout="frame"][dir="rtl"] .p-hero-media { transform: rotate(2.2deg); }
.profile[data-layout="frame"] :is(.p-hero-img, .p-hero-mono) {
  /* a picture is a replaced element: its insets don't size it, so both are said */
  inset: 11px 11px 46px;
  width: calc(100% - 22px);
  height: calc(100% - 57px);
}
.profile[data-layout="frame"] .p-hero-credit {
  inset: auto 14px 15px;
  max-height: none;
  writing-mode: horizontal-tb;
  transform: none;
  font-size: 9px;
  color: #77716a;
  text-shadow: none;
}
.profile[data-layout="frame"] .p-header[data-hero="round"] .p-hero-media {
  width: auto;
  height: calc(var(--round) + 10px);
  background: none;
  box-shadow: none;
  transform: none;
  overflow: visible;
}
.profile[data-layout="frame"] .p-header[data-hero="round"] .p-hero-mono { display: none; }
.profile[data-layout="frame"] .p-header[data-hero="round"] .p-hero-img { inset: 0 0 auto; width: var(--round); height: var(--round); }
.profile[data-layout="frame"] .p-hero-id { padding: 26px 24px 6px; }

/* slant: the photo cut on a diagonal, the name on a band of the hero's color */
.profile[data-layout="slant"] .p-header { --slant: 70px; color: var(--t-on-header); }
.profile[data-layout="slant"] .p-hero-media {
  height: var(--t-hero-h);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--slant)), 0 100%);
}
.profile[data-layout="slant"] .p-header[data-hero="mono"] .p-hero-media { height: min(var(--t-hero-h), 40svh); }
.profile[data-layout="slant"] .p-header[data-hero="round"] .p-hero-media {
  height: calc(env(safe-area-inset-top) + var(--bar-offset, 0px) + var(--round) + 44px + var(--slant));
}
.profile[data-layout="slant"] .p-hero-id {
  margin-top: calc(var(--slant) * -1 - 1px);
  padding: calc(var(--slant) + 14px) 22px 28px;
  background: var(--t-header-bg);
  clip-path: polygon(0 var(--slant), 100% 0, 100% 100%, 0 100%);
}
.profile[data-layout="slant"][dir="rtl"] .p-hero-media { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--slant))); }
.profile[data-layout="slant"][dir="rtl"] .p-hero-id { clip-path: polygon(0 0, 100% var(--slant), 100% 100%, 0 100%); }

/* banner: a wide strip of photo, the name on a card that overlaps it */
.profile[data-layout="banner"] .p-hero-media { height: var(--t-hero-h); }
.profile[data-layout="banner"] .p-header[data-hero="round"] .p-hero-media {
  height: calc(env(safe-area-inset-top) + var(--bar-offset, 0px) + var(--round) + 118px);
}
.profile[data-layout="banner"] .p-header[data-hero="round"] .p-hero-img { margin-inline: auto; }
.profile[data-layout="banner"] .p-hero-id {
  margin: -58px 14px 0;
  padding: 20px 18px 18px;
  border-radius: max(12px, var(--t-radius));
  background: var(--t-surface);
  border: var(--t-card-bw, 1px) var(--t-card-bs, solid) var(--t-card-border, var(--t-border));
  box-shadow: 0 16px 36px -18px rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: var(--t-glass);
  backdrop-filter: var(--t-glass);
}
.profile[data-layout="banner"][data-blocks="offset"] .p-hero-id { box-shadow: 4px 4px 0 var(--t-text); }

/* arch: the photo in an arched window, a second arch drawn around it */
.profile[data-layout="arch"] .p-header { padding-top: calc(env(safe-area-inset-top) + var(--bar-offset, 0px) + 30px); }
.profile[data-layout="arch"] .p-hero-media {
  width: 76%;
  height: var(--t-hero-h);
  margin: 0 auto;
  border-radius: 999px 999px 0 0;
  box-shadow: 0 0 0 6px var(--t-bg), 0 0 0 7.5px color-mix(in srgb, var(--t-accent) 60%, transparent);
}
.profile[data-layout="arch"] .p-header[data-hero="mono"] .p-hero-media { height: min(var(--t-hero-h), 36svh); }
.profile[data-layout="arch"] .p-header[data-hero="round"] .p-hero-media { height: 270px; }
.profile[data-layout="arch"] .p-header[data-hero="round"] .p-hero-img { top: 84px; }
.profile[data-layout="arch"] .p-hero-id { padding: 26px 24px 6px; }

/* ---------- a team card's company badge (profile.js badgeMarkup) ----------
   The company's logo pinned to the person's photo, like the logo on a work
   ID: every style has it, each where its photo puts it. By default it sits
   astride the photo's bottom edge at the end side and takes no room. */

.p-badge {
  --badge: 58px;
  position: relative;
  z-index: 3;
  flex: none;
  display: grid;
  place-items: center;
  width: var(--badge);
  height: var(--badge);
  align-self: flex-end;
  margin: calc(var(--badge) / -2) 22px -14px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--t-accent);
  color: var(--t-on-accent);
  box-shadow: 0 0 0 4px var(--t-bg), 0 14px 26px -10px rgba(0, 0, 0, 0.5);
  font: var(--t-display-weight, 600) 22px/1 var(--t-font-display, inherit);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 120ms ease;
}
a.p-badge:active { transform: scale(0.94); }
.p-badge img { width: 100%; height: 100%; object-fit: cover; }
/* the photo fills the hero: the logo leads the name, on the photo */
.profile[data-layout="over"] .p-badge {
  align-self: flex-start;
  margin: 0 22px 14px;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9), 0 10px 24px -8px rgba(0, 0, 0, 0.55);
}
.profile[data-layout="below"] .p-badge { margin-inline-end: calc(var(--t-hero-inset, 0px) + 18px); }
/* the tilted photo hangs over the blocks: the logo hangs with it */
.profile[data-layout="card"] .p-badge { order: 2; margin: 13px 38px -71px auto; transform: rotate(-1.4deg); }
.profile[data-layout="poster"] .p-badge { order: 2; }
/* round: on the circle's edge, low on the end side */
.profile[data-layout="round"] .p-badge {
  --badge: 48px;
  align-self: center;
  margin: -44px 0 -4px;
  border-radius: 50%;
  translate: 49px 0;
}
.profile[data-layout="round"][dir="rtl"] .p-badge { translate: -49px 0; }
/* frame and arch: on the corner of a narrower photo */
.profile[data-layout="frame"] .p-badge { margin: -40px 13% -10px auto; transform: rotate(5deg); }
.profile[data-layout="arch"] .p-badge { margin-inline-end: calc(12% - 18px); }
/* slant: the edge is higher at the end side by the slant */
.profile[data-layout="slant"] .p-badge { margin: calc(var(--slant) * -1 - 29px) 22px 41px auto; }
/* banner: above the name card, holding onto its edge */
.profile[data-layout="banner"] .p-badge { margin: -100px 26px 42px auto; }
/* no photo (the initials are the hero): under the name, out of the way */
.profile:is([data-layout="card"], [data-layout="poster"]) .p-header[data-hero="mono"] .p-badge {
  order: 3;
  margin: 0 22px 18px auto;
  transform: none;
}

/* ---------- how the cards are drawn: the parts --t-card-* can't say ---------- */

.profile[data-blocks="offset"] .p-ask { border: 2px solid var(--t-text); box-shadow: 4px 4px 0 var(--t-text); }
.profile[data-blocks="offset"] :is(.p-ask, .p-social):active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--t-text); }
.profile[data-blocks="offset"] .p-fact { border: 1.5px solid var(--t-text); }
.profile[data-blocks="pill"] :is(.p-ask, .p-social) { border-radius: 999px; }
.profile[data-blocks="pill"] .p-social { min-height: 72px; }
.profile[data-blocks="dashed"] :is(.p-row-fill, .p-row-fill + .p-row-from, .p-row-fill + .p-row-whole)::before,
.profile[data-blocks="dashed"] .p-row-fill { border-bottom-style: dashed; }
.profile[data-blocks="dashed"] .p-fact { border-style: dashed; }
/* neon: the name and the accents glow */
.profile[data-blocks="neon"] .p-name {
  text-shadow: 0 0 2px color-mix(in srgb, var(--t-accent) 80%, transparent), 0 0 22px color-mix(in srgb, var(--t-accent) 70%, transparent);
}
.profile[data-blocks="neon"] .p-block-title { color: var(--t-accent-ink); text-shadow: 0 0 16px color-mix(in srgb, var(--t-accent) 55%, transparent); }
.profile[data-blocks="neon"] .p-ask { box-shadow: 0 0 0 1px var(--t-accent), 0 0 26px color-mix(in srgb, var(--t-accent) 65%, transparent); }
.profile[data-blocks="neon"] .p-social-ico { color: var(--t-accent-ink); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--t-accent) 70%, transparent)); }
/* receipt: torn top and bottom, titles centered like a till prints them */
.profile[data-blocks="receipt"]:not(.editable) .p-block {
  padding-block: 26px;
  -webkit-mask:
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% 100% / 14px 51% repeat-x,
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) 50% 0 / 14px 51% repeat-x;
  mask:
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% 100% / 14px 51% repeat-x,
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) 50% 0 / 14px 51% repeat-x;
}
.profile[data-blocks="receipt"] .p-block-head {
  padding-bottom: 12px;
  border-bottom: 1.5px dashed color-mix(in srgb, var(--t-text) 30%, transparent);
}
.profile[data-blocks="receipt"] .p-block-title {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: calc(var(--t-title-size) * 0.82);
}
.profile[data-blocks="receipt"] .p-row-fill,
.profile[data-blocks="receipt"] .p-row-fill + :is(.p-row-from, .p-row-whole)::before { border-bottom-style: dashed; }

/* ---------- the photo: as it is, two inks, black and white, film ---------- */

.profile[data-photo="bw"] .p-hero-img { filter: grayscale(1) contrast(1.08); }
.profile[data-photo="bw"] .p-cover-img { filter: blur(var(--t-cover-blur, 30px)) grayscale(1); }
.profile[data-photo="film"] .p-hero-img { filter: sepia(0.32) saturate(1.3) contrast(1.06) brightness(1.03); }
/* two inks: the photo in black, printed on the accent */
.profile[data-photo="duo"] .p-header[data-hero="photo"] .p-hero-media { background: color-mix(in srgb, var(--t-accent) 72%, #ffffff); }
.profile[data-photo="duo"] .p-header[data-hero="photo"] .p-hero-img {
  filter: grayscale(1) contrast(1.2) brightness(1.06);
  mix-blend-mode: multiply;
}

/* ---------- a page in Arabic (profile.js sets lang and dir) ----------
   The layout mirrors by itself: every edge above is logical. What Arabic
   needs on top: no tracking (it pulls joined letters apart), no slanted
   "italic" (Arabic has none, the browser fakes one), room for its tall
   letters, and a little more weight where a style's face is a hairline. */

.profile:lang(ar) :is(.p-name, .p-block-title, .p-hero-mono span, .p-rsum strong, .p-company-name, .p-person-mono,
  .p-eyebrow, .p-seefor > span, .p-hero-credit, .p-social-label, .p-ask, .p-dock-btn) {
  letter-spacing: 0;
  text-transform: none;
  font-style: normal;
}
.profile:lang(ar) .p-hero-id::before { letter-spacing: 0; text-transform: none; }
.profile:lang(ar) :is(.p-tagline, .p-quote, .p-landmark) { font-style: normal; }
.profile:lang(ar) .p-name { --name-lh: 1.3; font-weight: max(600, var(--t-display-weight)); }
.profile:lang(ar) .p-block-title { line-height: 1.45; font-weight: max(600, var(--t-title-weight)); }
.profile:lang(ar)[data-layout="poster"] .p-hero-id { --name-k: 1.1; }
.profile:lang(ar) .p-quote::before { content: '«'; }
.profile:lang(ar) .p-quote::after { content: '»'; }
.profile[dir="rtl"] .p-stars { background-image: linear-gradient(270deg, var(--star) var(--fill, 100%), var(--star-off) var(--fill, 100%)); }
.profile:lang(ar)[data-occasion="ramadan"] .p-hero-id::before { content: '✦ رمضان كريم'; }
.profile:lang(ar)[data-occasion="eid"] .p-hero-id::before { content: '✦ عيد مبارك'; }
.profile:lang(ar)[data-occasion="holiday"] .p-hero-id::before { content: '✦ أعياد سعيدة'; }
.profile:lang(ar)[data-occasion="summer"] .p-hero-id::before { content: '✦ أهلًا بالصيف'; }
.profile:lang(ar)[data-occasion="opening"] .p-hero-id::before { content: '✦ افتتحنا'; }
.profile:lang(ar)[data-occasion="mothers"] .p-hero-id::before { content: '✦ عيد أم سعيد'; }
/* the summer sun hangs at the start of the line */
.profile[dir="rtl"][data-occasion="summer"] .p-header::after { transform: scaleX(-1); }

/* ================= the body ================= */

.p-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 16px 26px;
}
.profile[data-layout="over"] .p-body { padding-top: 0; }

/* ---------- action tiles ---------- */

.p-actions { position: relative; z-index: 2; }
.profile[data-layout="over"] .p-actions { margin-top: -38px; }

.p-socials { display: flex; gap: 8px; }
.p-socials[data-n="0"] { display: none; }

.p-social {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  min-height: 68px;
  padding: 10px 4px 9px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: max(6px, calc(var(--t-radius) * 0.72));
  background: var(--t-card, var(--t-surface));
  color: var(--t-text);
  border: var(--t-card-bw, 1px) var(--t-card-bs, solid) var(--t-card-border, var(--t-border));
  box-shadow: var(--t-card-shadow);
  -webkit-backdrop-filter: var(--t-glass);
  backdrop-filter: var(--t-glass);
  text-decoration: none;
  transition: transform 0.12s ease;
}
.p-social:active { transform: scale(0.95); }
.p-social-ico { display: flex; color: var(--t-accent-ink); }
.p-social-ico svg { width: 23px; height: 23px; }
.p-social-label {
  max-width: 100%;
  padding: 0 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: -0.005em;
}
.p-social--more { flex: 0 0 50px; }
.p-social--more .p-social-ico { color: var(--t-muted); }
.p-social--more[data-overflow="0"] { display: none; }
.p-social-count {
  position: absolute;
  top: 7px;
  inset-inline-end: 6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--t-accent);
  color: var(--t-on-accent);
  font-size: 11px;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
}

/* ---------- the main button ----------
   The one thing a visitor came to do. Under the hero, full width; the dock
   repeats it once it has scrolled away. With no way to reach the owner it
   is the editor's nudge, and visitors never see it. */
.p-ask {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-height: 56px;
  margin-bottom: 10px;
  padding: 0 18px;
  border-radius: max(14px, calc(var(--t-radius) * 0.9));
  background: var(--t-accent);
  color: var(--t-on-accent);
  font-family: var(--t-font-body);
  font-size: 17px;
  font-weight: 750;
  letter-spacing: -0.01em;
  box-shadow: 0 12px 28px -10px color-mix(in srgb, var(--t-accent) 70%, transparent);
  transition: transform 0.12s ease;
}
.p-ask > span { display: flex; }
.p-ask svg { width: 21px; height: 21px; }
.p-ask:active { transform: scale(0.97); }
.profile:not(.editable) [data-ask-none] { display: none; }

/* ---------- blocks ---------- */

.p-blocks { display: flex; flex-direction: column; gap: 14px; }

.p-block {
  position: relative;
  padding: 20px 18px;
  border-radius: var(--t-radius);
  background: var(--t-card, var(--t-surface));
  border: var(--t-card-bw, 1px) var(--t-card-bs, solid) var(--t-card-border, var(--t-border));
  box-shadow: var(--t-card-shadow);
  -webkit-backdrop-filter: var(--t-glass);
  backdrop-filter: var(--t-glass);
}
/* Flat styles (Editorial) drop the cards for hairlines: a magazine has rules
   between its sections, not boxes around them. */
.profile[data-flat="1"] .p-blocks { gap: 6px; }
.profile[data-flat="1"] .p-block {
  padding: 24px 4px 14px;
  border: none;
  border-top: 1px solid var(--t-border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.profile[data-flat="1"] .p-block-title { font-style: italic; }

.p-block-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  margin-bottom: 15px;
}
.p-block-title {
  flex: 1;
  min-width: 0;
  font-family: var(--t-font-display);
  font-size: var(--t-title-size);
  font-weight: var(--t-title-weight);
  font-variation-settings: var(--t-display-vars);
  letter-spacing: var(--t-display-track);
  line-height: 1.05;
}

.p-block-text {
  margin-top: 14px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--t-muted);
  overflow-wrap: break-word;
}
.profile:not(.editable) .p-block-text:empty { display: none; }
.p-block--contact .p-block-text { margin-top: 0; font-size: 16px; color: var(--t-text); }

/* menu + hours rows */
.p-rows { display: flex; flex-direction: column; gap: 12px; }
.p-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 15.5px;
  line-height: 1.35;
}
.p-row > :first-child { min-width: 0; overflow-wrap: anywhere; }
.p-row-fill {
  flex: 1;
  min-width: 16px;
  border-bottom: 1.5px dotted color-mix(in srgb, var(--t-text) 26%, transparent);
  transform: translateY(-4px);
}
.p-row-end { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.p-block--menu .p-row-end { color: var(--t-accent-ink); }
/* hours: one grid for the whole block, every row on it (subgrid), so the
   from, the dash and the to of every opening sit in the same columns and
   the dashes line up. A day with a break gets a second line under the
   first; the day never breaks ("Mon –" over "Thu"). */
.p-block--hours .p-rows {
  display: grid;
  grid-template-columns: auto minmax(12px, 1fr) auto auto auto;
  column-gap: 6px;
  row-gap: 12px;
}
.p-block--hours .p-row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  row-gap: 2px;
  align-items: baseline;
  color: var(--t-muted);
}
.p-row-day { grid-column: 1; white-space: nowrap; }
.p-block--hours .p-row-fill { grid-column: 2; min-width: 0; }
.p-row-from, .p-row-dash, .p-row-to, .p-row-whole {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.p-row-from { grid-column: 3; justify-self: end; }
.p-row-dash { grid-column: 4; }
.p-row-to { grid-column: 5; justify-self: end; }
.p-row-whole { grid-column: 3 / -1; justify-self: end; text-align: end; white-space: normal; }
/* the dots run on to the first time of the row, across the column gap */
.p-row-fill + :is(.p-row-from, .p-row-whole) {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  justify-self: stretch;
}
.p-row-fill + :is(.p-row-from, .p-row-whole)::before {
  content: '';
  flex: 1;
  min-width: 0;
  margin-inline: -6px 6px;
  border-bottom: 1.5px dotted color-mix(in srgb, var(--t-text) 26%, transparent);
  transform: translateY(-4px);
}
.p-block--hours .p-row.is-today { color: var(--t-text); font-weight: 700; }
.p-block--hours .p-row.is-today :is(.p-row-from, .p-row-dash, .p-row-to, .p-row-whole) { font-weight: 750; }
.p-row.is-today .p-row-day::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-inline-end: 7px;
  vertical-align: 0.12em;
  border-radius: 50%;
  background: var(--t-accent);
}
@media (max-width: 340px) { .p-block--hours .p-row { font-size: 14px; } }

/* photos */
.p-tile {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
  border-radius: max(4px, calc(var(--t-radius) * 0.6));
  background: color-mix(in srgb, var(--t-text) 6%, var(--t-bg));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--t-muted);
}
.p-tile > svg { width: 24px; height: 24px; opacity: 0.5; }
.p-tile-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.45s ease;
}
.p-tile-img[data-on] { opacity: 1; }
.p-credit {
  position: absolute;
  inset-inline-start: 9px;
  bottom: 7px;
  max-width: calc(100% - 18px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.86);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}
/* a credit names a photo that is there: none while it loads, none if it failed */
.p-tile:not(:has(.p-tile-img[data-on])) .p-credit { opacity: 0; }
.p-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.p-shot { position: relative; min-width: 0; }
.p-shot .p-tile { width: 100%; }

/* One big photo at a time, bleeding to the card's edges: a swipe row that
   stops short of the edge reads as a cut-off list. */
.p-carousel { position: relative; }
.p-slides {
  position: relative;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  margin-inline: -18px;
  padding-inline: 18px;
  scroll-padding-inline: 18px;
}
.p-slides::-webkit-scrollbar { display: none; }
.p-slides:focus-visible { outline: 2px solid var(--t-accent); outline-offset: 3px; }
.p-slides > .p-shot { flex: none; width: 88%; scroll-snap-align: center; }
.p-tile--slide { aspect-ratio: 4 / 3; border-radius: max(4px, calc(var(--t-radius) * 0.72)); }
.p-tile--slide > svg { width: 30px; height: 30px; }
.p-dots { display: flex; justify-content: center; gap: 7px; margin-top: 12px; }
.p-dot {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--t-text) 22%, transparent);
  transition: background 0.2s ease, transform 0.2s cubic-bezier(0.3, 1.4, 0.4, 1);
}
.p-dot::after { content: ''; position: absolute; inset: -14px -3px; }
.p-dot.is-on { background: var(--t-accent); transform: scale(1.3); }
.p-block--gallery .p-block-text { margin-top: 12px; }

/* catalog */
.p-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; }
.p-card { position: relative; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.p-card .p-tile { aspect-ratio: 4 / 5; margin-bottom: 7px; }
.p-card-name { font-size: 14.5px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.p-card-price { font-size: 14px; font-weight: 700; color: var(--t-accent-ink); font-variant-numeric: tabular-nums; }

/* every review hidden: nothing for a visitor; the editor shows the note */
.p-block--reviews[data-empty], .p-reviews-none { display: none; }

/* booking slots: a row each, the whole row a tap; the day small over the
   time, one solid "Book" at the thumb */
.p-slots { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.p-slot {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 10px 10px 10px 10px;
  border-radius: max(8px, calc(var(--t-radius) * 0.7));
  background: color-mix(in srgb, var(--t-accent) 9%, var(--t-surface));
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease;
}
.p-slot:active { transform: scale(0.98); }
.p-slot:focus-visible { outline: 2px solid var(--t-accent); outline-offset: 2px; }
.p-slot-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: max(8px, calc(var(--t-radius) * 0.55));
  background: color-mix(in srgb, var(--t-accent) 20%, var(--t-surface));
  color: var(--t-accent-ink);
}
.p-slot-ico svg { width: 21px; height: 21px; }
.p-slot-when { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.p-slot-day { font-size: 13px; font-weight: 600; color: var(--t-muted); overflow-wrap: anywhere; }
/* when it next comes round for a visitor; "Every Thursday" in the editor */
.p-slot-every { display: none; }
.p-slot-time { font-size: 17px; font-weight: 700; line-height: 1.25; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.p-slot-go {
  flex: none;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--t-accent);
  color: var(--t-on-accent);
  font-size: 14px;
  font-weight: 700;
}
@media (prefers-reduced-motion: reduce) { .p-slot { transition: none; } }

/* good-to-know chips */
.p-facts { display: flex; flex-wrap: wrap; gap: 8px; }
.p-fact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--t-border);
  background: color-mix(in srgb, var(--t-accent) 10%, transparent);
  font-size: 13.5px;
  font-weight: 600;
}

/* where I work: the company, with Google's rating and address under it */
.p-company { display: flex; align-items: flex-start; gap: 14px; }
.p-company-mono {
  display: grid;
  place-items: center;
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: max(10px, calc(var(--t-radius) * 0.7));
  background: color-mix(in srgb, var(--t-accent) 14%, transparent);
  color: var(--t-accent-ink, var(--t-accent));
  font-family: var(--t-font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.p-company-mono.has-logo { overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); }
.p-company-mono img { width: 100%; height: 100%; padding: 5px; object-fit: contain; }
.p-company-empty { color: var(--t-muted); font-weight: 500; }
.p-company-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.p-company-name { margin: 0; font-family: var(--t-font-display); font-size: 20px; font-weight: 700; line-height: 1.2; }
.p-company-line { margin: 0; color: var(--t-muted); font-size: 14.5px; line-height: 1.4; }
.p-company-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 2px 0 0; font-size: 13.5px; font-weight: 600; }
.p-company-meta .p-open, .p-company-meta .p-meta-rating { display: inline-flex; align-items: center; gap: 4px; }
.p-company-addr { margin: 0; color: var(--t-muted); font-size: 13.5px; line-height: 1.4; }
.p-company-site { margin-top: 14px; width: 100%; justify-content: center; }
.p-company-site span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* a list with notes: projects, what we do */
.p-items { display: flex; flex-direction: column; }
.p-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 0;
  border-top: 1px solid var(--t-border);
}
.p-item:first-child { padding-top: 0; border-top: none; }
.p-item:last-child { padding-bottom: 0; }
.p-item-name { font-size: 16px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.p-item-note { font-size: 14px; line-height: 1.4; color: var(--t-muted); overflow-wrap: anywhere; }

/* team: each person is a way into the Ask */
.p-team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.p-person {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 0;
  padding: 12px 4px 11px;
  border-radius: max(8px, calc(var(--t-radius) * 0.7));
  background: color-mix(in srgb, var(--t-accent) 8%, transparent);
  border: 1px solid var(--t-border);
  text-align: center;
  cursor: pointer;
  transition: transform 0.12s ease;
}
.profile:not(.editable) .p-person:active { transform: scale(0.96); }
.p-person-mono {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 5px;
  border-radius: 50%;
  background: var(--t-accent);
  color: var(--t-on-accent);
  font-family: var(--t-font-display);
  font-weight: var(--t-display-weight);
  font-variation-settings: var(--t-display-vars);
  font-size: 18px;
  letter-spacing: 0.02em;
}
.p-person-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13.5px;
  font-weight: 700;
}
.p-person-role { font-size: 12.5px; color: var(--t-muted); }
/* a company's real team (team.js): each person is a link to their own card */
.p-team > li:not(.p-person) { display: flex; min-width: 0; }
.p-person--link { flex: 1; color: inherit; text-decoration: none; }
.p-person-mono.has-photo { overflow: hidden; background: var(--t-border); }
.p-person-mono.has-photo img { width: 100%; height: 100%; object-fit: cover; }

/* a photo's own label (a piece of work), in place of the credit */
.p-tile-label {
  position: absolute;
  inset: auto 0 0;
  padding: 18px 8px 7px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.62), transparent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  text-align: start;
  pointer-events: none;
}

/* ---------- reviews ---------- */

.p-rsum {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 9px;
  margin: -4px 0 14px;
  font-size: 13.5px;
  color: var(--t-muted);
}
.p-rsum strong {
  font-family: var(--t-font-display);
  font-size: 34px;
  font-weight: var(--t-title-weight);
  font-variation-settings: var(--t-display-vars);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--t-text);
}
.p-stars {
  --star: #f5b100;
  --star-off: color-mix(in srgb, var(--t-text) 16%, transparent);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 1.5px;
  background: linear-gradient(90deg, var(--star) var(--fill, 100%), var(--star-off) var(--fill, 100%));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.p-stars--sm { font-size: 13px; letter-spacing: 1px; }

.p-reviews {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  margin-inline: -18px;
  padding: 2px 18px 4px;
  scroll-padding-inline: 18px;
}
.p-reviews::-webkit-scrollbar { display: none; }
.p-reviews:focus-visible { outline: 2px solid var(--t-accent); outline-offset: 3px; }
.p-review {
  position: relative;
  flex: none;
  width: 84%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 18px 16px;
  border-radius: max(6px, calc(var(--t-radius) * 0.78));
  background: color-mix(in srgb, var(--t-accent) 7%, var(--t-bg));
  border: 1px solid var(--t-border);
  scroll-snap-align: start;
}
.p-quote {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7;
  overflow: hidden;
  font-family: var(--t-quote-font, inherit);
  font-size: var(--t-quote-size, 17px);
  font-weight: var(--t-quote-weight, 400);
  font-style: var(--t-quote-style, normal);
  line-height: 1.32;
  text-wrap: pretty;
}
.p-quote::before { content: '“'; }
.p-quote::after { content: '”'; }
.p-review-by { display: flex; align-items: center; gap: 10px; margin-top: auto; min-width: 0; }
.p-review-av {
  position: relative;
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: var(--t-accent);
  color: var(--t-on-accent);
  font-size: 14px;
  font-weight: 700;
}
.p-review-av img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.p-review-av img[data-on] { opacity: 1; }
.p-review-who { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: 13.5px; }
.p-review-who strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.p-review-who small { font-size: 12px; color: var(--t-muted); }

/* ---------- map & directions ---------- */

.p-map-link {
  display: block;
  margin-bottom: 14px;
  overflow: hidden;
  border-radius: max(6px, calc(var(--t-radius) * 0.72));
  text-decoration: none;
  /* Safari: keep the rounded clip on a box whose children transform */
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
.p-map {
  position: relative;
  height: 190px;
  overflow: hidden;
  background: color-mix(in srgb, var(--t-text) 7%, var(--t-bg));
}
.p-map-tiles {
  position: absolute;
  width: 768px;
  height: 768px;
  left: calc(50% - var(--px));
  top: calc(50% - var(--py));
  filter: var(--t-map-filter);
}
.p-map-tiles img {
  position: absolute;
  width: 256px;
  height: 256px;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.p-map-tiles img[data-on] { opacity: 1; }
.p-map::before {
  content: '';
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--t-accent) 50%, transparent);
  animation: pinPulse 2.4s ease-out infinite;
}
@keyframes pinPulse {
  0% { transform: scale(0.4); opacity: 0.9; }
  100% { transform: scale(3.4); opacity: 0; }
}
.p-map-pin {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 30px;
  height: 39px;
  margin: -38px 0 0 -15px;
  color: var(--t-accent);
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.3));
}
.p-map-pin svg { display: block; width: 100%; height: 100%; }
.p-map-credit {
  position: absolute;
  z-index: 2;
  inset-inline-end: 6px;
  bottom: 5px;
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.84);
  color: #3a3a3a;
  font-size: 9.5px;
  font-weight: 600;
}
.profile[data-dark="1"] .p-map-credit { background: rgba(0, 0, 0, 0.55); color: rgba(255, 255, 255, 0.82); }

.p-loc { display: flex; align-items: center; gap: 12px; }
.p-loc-text { flex: 1; min-width: 0; }
.p-address { font-size: 15.5px; font-weight: 600; line-height: 1.35; overflow-wrap: break-word; }
.p-address:empty::before { content: attr(data-placeholder); opacity: 0.5; }
.p-loc-area { margin-top: 3px; font-size: 13.5px; color: var(--t-muted); }

/* the location card: no tiles, the landmark people navigate by, three apps */
.p-block--location[data-map="card"] .p-loc { align-items: flex-start; }
.p-block--location[data-map="card"] .p-address { font-size: 17px; }
.p-landmark {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  font-size: 14.5px;
  font-style: italic;
  color: var(--t-muted);
}
.p-landmark::before {
  content: '';
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--t-accent);
}
.p-maplinks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.p-maplink {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 15px;
  border-radius: 999px;
  border: 1.5px solid var(--t-border);
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.12s ease;
}
.p-maplink:active { transform: scale(0.95); }

/* ---------- buttons on the page ---------- */

.p-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 17px;
  border-radius: 999px;
  font-family: var(--t-font-body);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.12s ease;
}
.p-btn svg { width: 18px; height: 18px; }
.p-btn:active { transform: scale(0.96); }
.p-btn--accent { background: var(--t-accent); color: var(--t-on-accent); }

/* ---------- footer ---------- */

.p-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 22px 0 4px;
  text-align: center;
}
.p-made {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 38px;
  padding: 0 15px;
  border-radius: 999px;
  border: 1px solid var(--t-border);
  font-size: 13px;
  font-weight: 600;
  color: var(--t-muted);
  text-decoration: none;
}
.p-made b { font-weight: 800; letter-spacing: -0.03em; color: var(--t-text); }
.p-made i { font-style: normal; color: #e0603a; }
/* the builder's way out: only the stage shows it (styles.css), never a
   visitor's phone or the home's examples */
.p-restart { display: none; }
.p-source { max-width: 30ch; font-size: 11px; line-height: 1.4; color: var(--t-muted); }
a.p-hero-credit { text-decoration: none; pointer-events: auto; }

/* the visitor's footer: made with, not verified, make yours */
.p-made-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 10px;
  margin: 0;
  font-size: 13px;
  color: var(--t-muted);
}
.p-unverified::before, .p-make::before { content: '·'; margin-inline-end: 10px; color: var(--t-muted); }
.p-make {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 750;
  color: var(--t-accent-ink);
  text-decoration: none;
}
.p-seefor {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--t-muted);
}
.p-seefor > span { flex-basis: 100%; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; font-size: 11px; }
.p-seefor a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--t-border);
  color: var(--t-text);
  font-weight: 650;
  text-decoration: none;
}
.p-seefor a[aria-current] { background: var(--t-accent); border-color: var(--t-accent); color: var(--t-on-accent); }

/* ---------- the dock ----------
   Sticky at the foot of the column, so it rides at the thumb. It ships on
   every render; the host turns it on (`data-dock`) and slides it in once the
   action tiles have scrolled away — while they are on screen it would only
   say the same thing twice. */

.p-dock {
  position: sticky;
  bottom: 0;
  z-index: 4;
  display: none;
  gap: 8px;
  padding: 14px 14px calc(env(safe-area-inset-bottom) + 12px);
  background: linear-gradient(to top, color-mix(in srgb, var(--t-bg) 92%, transparent) 50%, transparent);
  pointer-events: none;
}
.profile[data-dock] .p-dock:not([data-n="0"]) { display: flex; }
.profile[data-dock] .p-dock { transition: transform 0.34s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.26s ease; }
.profile[data-dock="hide"] .p-dock { transform: translateY(100%); opacity: 0; }
.profile[data-dock="show"] .p-dock-btn { pointer-events: auto; }
.p-dock-btn {
  flex: 1;
  min-width: 0;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--t-border);
  background: color-mix(in srgb, var(--t-surface) 88%, transparent);
  color: var(--t-text);
  font-family: var(--t-font-body);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  transition: transform 0.12s ease;
}
.p-dock-btn:active { transform: scale(0.97); }
.p-dock-btn > span { display: flex; }
.p-dock-btn svg { width: 20px; height: 20px; }
.p-dock-btn--main { background: var(--t-accent); color: var(--t-on-accent); border-color: transparent; }

/* ---------- editor controls: off unless .editable says otherwise ---------- */

.p-block-grip, .p-block-menu, .p-row-x, .p-add-row, .p-tray,
.p-socials-edit, .p-hero-edit, .p-draft, .p-status-offer, .p-status-add, .p-suggest, .p-locate,
.p-pro, .pro-tag.p-meta-pro { display: none; }   /* class pair: .pro-tag's own display comes later */

/* "Use where I am now": a map with no pin, in the editor, where the browser
   may ask (app.js sets .can-locate on <html>) */
.can-locate .profile.editable .p-locate {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  margin-top: 14px;
  border: 1.5px dashed color-mix(in srgb, var(--t-accent) 55%, var(--t-border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--t-accent) 7%, transparent);
  color: var(--t-accent-ink, var(--t-accent));
  font-family: var(--t-font-body);
  font-size: 15px;
  font-weight: 700;
  transition: transform 0.12s ease;
}
.p-locate svg { width: 19px; height: 19px; }
.p-locate:active { transform: scale(0.97); }

/* a facts block with nothing picked yet is the editor's business only */
.profile:not(.editable) .p-block--facts[data-empty] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .profile *, .profile *::before, .profile *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* a block waiting on Google (live.js) holds its place and shows nothing */
.p-block[data-live] { display: none !important; }

/* ---------- in an app's own browser (inapp.js) ---------- */
.inapp {
  position: fixed;
  z-index: 90;
  inset-inline: 10px;
  top: calc(env(safe-area-inset-top) + 8px);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 6px 8px 14px;
  border-radius: 16px;
  background: rgba(20, 19, 22, 0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #fff;
  font: 500 14px/1.35 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.inapp[hidden] { display: none; }
.inapp-text { flex: 1; min-width: 0; }
.inapp-open {
  flex: none;
  display: grid;
  place-items: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 99px;
  background: #fff;
  color: #141210;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.inapp-open[hidden] { display: none; }
.inapp-x { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; cursor: pointer; color: rgba(255, 255, 255, 0.7); font-size: 16px; }

/* ================= the second shelf of blocks (blocks-more.js) ================= */

/* the editor's own parts: a date, a link, a list typed on one line, a note
   that a visitor can't see this; shown only under .editable */
.p-field, .p-field-inline, .p-field-line, .p-pkg-note, .p-gone-note, .p-ba-picks { display: none; }
.profile.editable .p-field {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 12px; padding: 6px 6px 6px 14px; min-height: 48px;
  border: 1.5px dashed var(--t-border); border-radius: 14px;
  color: var(--t-muted); font-size: 14px; font-weight: 650; flex-wrap: wrap;
}
.profile.editable .p-field input { min-width: 0; max-width: 100%; }
.profile.editable :is(.p-field, .p-field-inline) input {
  min-height: 38px; padding: 0 10px; border: 1px solid var(--t-border); border-radius: 10px;
  background: var(--t-surface); color: var(--t-text); font: 600 16px var(--t-font-body); color-scheme: light dark;
}
.profile.editable .p-field-inline { display: block; margin-top: 8px; }
.profile.editable .p-field-line {
  display: block; margin-top: 12px; padding: 12px 14px; border: 1.5px dashed var(--t-border); border-radius: 12px;
  font: 500 15px/1.35 var(--t-font-body); color: var(--t-text); overflow-wrap: anywhere;
}
.profile.editable [data-placeholder]:empty::before { content: attr(data-placeholder); color: var(--t-muted); opacity: .8; }
.profile.editable .p-gone-note {
  display: block; margin-top: 10px; padding: 7px 12px; border-radius: 10px; font-size: 13px; font-weight: 650;
  background: color-mix(in srgb, #c23c22 12%, transparent); color: color-mix(in srgb, #c23c22 80%, var(--t-text));
}
.profile:not(.editable) .p-block[data-gone] { display: none; }

/* a small pill button on a block: Copy, QR, Add to calendar */
.p-copy {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px;
  border-radius: 999px; border: 1px solid var(--t-border); background: color-mix(in srgb, var(--t-accent) 10%, transparent);
  color: var(--t-accent-ink, var(--t-accent)); font: 700 13px var(--t-font-body); white-space: nowrap; cursor: pointer;
  transition: transform .12s ease, background .2s;
}
.p-copy svg { width: 16px; height: 16px; flex: none; }
.p-copy:active { transform: scale(.95); }
.p-copy.is-done { background: var(--t-accent); color: var(--t-on-accent); border-color: transparent; }
.p-qr { display: block; }
.p-qr[hidden] { display: none; }
.p-qr img { display: block; width: 180px; height: 180px; margin: 12px auto 2px; border-radius: 12px; background: #fff; padding: 6px; }

/* ---------- before & after ---------- */
.p-ba {
  --x: 50%;
  position: relative; overflow: hidden; aspect-ratio: 4 / 3.4;
  border-radius: max(10px, calc(var(--t-radius) * .75));
  background: color-mix(in srgb, var(--t-text) 8%, var(--t-surface));
  touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.p-ba-side { position: absolute; inset: 0; }
.p-ba-before { clip-path: inset(0 calc(100% - var(--x)) 0 0); }
.p-ba-img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s; }
.p-ba-img[data-on] { opacity: 1; }
.p-ba-img.is-washed { filter: grayscale(.85) brightness(.82) contrast(.88) blur(.6px); }
.p-ba-line {
  position: absolute; inset-block: 0; left: var(--x); width: 3px; margin-left: -1.5px;
  background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.12), 0 0 14px rgba(0,0,0,.25); pointer-events: none;
}
.p-ba-knob {
  position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 46px; height: 46px;
  transform: translate(-50%, -50%); border-radius: 50%; background: #fff; color: #1e1d21;
  font: 800 17px/1 var(--t-font-body); letter-spacing: -.02em; box-shadow: 0 4px 16px rgba(0,0,0,.28);
}
.p-ba-range {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize;
  -webkit-appearance: none; appearance: none; touch-action: pan-y;
}
.p-ba-range::-webkit-slider-thumb { -webkit-appearance: none; width: 56px; height: 400px; }
.p-ba-range::-moz-range-thumb { width: 56px; height: 400px; border: 0; }
.p-ba-tag {
  position: absolute; z-index: 2; top: 10px; padding: 5px 11px; border-radius: 999px;
  background: rgba(20, 20, 24, .62); color: #fff; font: 700 12.5px var(--t-font-body); letter-spacing: .02em;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.p-ba-tag--before { left: 10px; }
.p-ba-tag--after { right: 10px; }
.profile:not(.editable) .p-ba-tag { pointer-events: none; }
.profile.editable .p-ba-picks { display: flex; flex-wrap: wrap; gap: 8px; }
@media (prefers-reduced-motion: no-preference) {
  .profile:not(.editable) .p-ba:not(.is-touched) .p-ba-knob { animation: p-ba-hint 2.4s ease-in-out 1s 2; }
}
@keyframes p-ba-hint { 0%, 100% { margin-left: 0; } 30% { margin-left: -10px; } 70% { margin-left: 10px; } }

/* ---------- offer ---------- */
.p-offer {
  position: relative; padding: 18px 18px 16px; border-radius: max(12px, calc(var(--t-radius) * .8));
  background: var(--t-accent); color: var(--t-on-accent); cursor: pointer; overflow: hidden;
  transition: transform .12s ease;
}
.p-offer::before, .p-offer::after {
  content: ''; position: absolute; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%;
  background: var(--t-card, var(--t-surface));
}
.p-offer::before { left: -11px; }
.p-offer::after { right: -11px; }
.profile:not(.editable) .p-offer:active { transform: scale(.98); }
.p-offer-head { margin: 0; font-family: var(--t-font-display); font-weight: var(--t-display-weight, 700); font-variation-settings: var(--t-display-vars); font-size: 27px; line-height: 1.08; letter-spacing: var(--t-display-track); }
.p-offer .p-offer-text { margin-top: 8px; color: inherit; opacity: .86; }
.p-offer-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 16px; padding-top: 14px; border-top: 2px dashed color-mix(in srgb, currentColor 35%, transparent);
}
.p-offer-code { display: inline-flex; align-items: center; gap: 8px; }
.p-offer-code small { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.p-offer-code b { font: 800 17px ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: .06em; }
.profile:not(.editable) .p-offer-code.is-empty { display: none; }
.p-offer .p-copy { background: color-mix(in srgb, var(--t-on-accent) 18%, transparent); color: inherit; border-color: color-mix(in srgb, currentColor 30%, transparent); }
.p-offer-left { font-size: 13.5px; font-weight: 700; opacity: .9; }
.p-offer-left.is-soon { padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--t-on-accent) 20%, transparent); opacity: 1; }

/* ---------- packages ---------- */
.p-pkgs { display: flex; flex-direction: column; gap: 10px; }
.p-pkg {
  position: relative; display: flex; flex-direction: column; gap: 8px; padding: 16px;
  border-radius: max(10px, calc(var(--t-radius) * .7)); border: 1px solid var(--t-border);
  background: color-mix(in srgb, var(--t-accent) 5%, transparent);
}
.p-pkg.is-mid { border: 2px solid var(--t-accent); background: color-mix(in srgb, var(--t-accent) 10%, transparent); }
.p-pkg-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.p-pkg-name { font-size: 17px; font-weight: 750; }
.p-pkg-price { font-family: var(--t-font-display); font-size: 24px; font-weight: var(--t-display-weight, 700); color: var(--t-accent-ink, var(--t-accent)); white-space: nowrap; }
.p-pkg-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 5px; font-size: 14.5px; line-height: 1.35; }
.p-pkg-list li { position: relative; padding-inline-start: 22px; }
.p-pkg-list li::before { content: '✓'; position: absolute; inset-inline-start: 0; color: var(--t-accent-ink, var(--t-accent)); font-weight: 800; }
.profile.editable .p-pkg-list { display: none; }
.profile.editable .p-pkg-note { display: block; font-size: 14.5px; color: var(--t-muted); }
.p-pkg-go {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; align-self: flex-start;
  min-height: 42px; margin-top: 4px; padding: 0 16px; border-radius: 999px; border: 0;
  background: var(--t-accent); color: var(--t-on-accent); font: 700 14px var(--t-font-body); cursor: pointer;
}
.p-pkg-go svg { width: 16px; height: 16px; }
.p-pkg:not(.is-mid) .p-pkg-go { background: transparent; color: var(--t-accent-ink, var(--t-accent)); border: 1.5px solid currentColor; }
.profile .p-pkg > .p-row-x { position: absolute; inset-block-start: 8px; inset-inline-end: 8px; }
.profile.editable .p-pkg-top { padding-inline-end: 34px; }
.profile:dir(rtl) .p-pkg-go svg { transform: scaleX(-1); }
/* the carousel: side by side, snapping, every card as tall as the tallest and
   its button on the same line; the next card peeks in to say there's more */
.p-block--packages[data-layout="carousel"] .p-pkgs {
  flex-direction: row; align-items: stretch; gap: 10px;
  margin-inline: -18px; padding: 2px 18px 6px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: 18px; scrollbar-width: none;
}
.p-block--packages[data-layout="carousel"] .p-pkgs::-webkit-scrollbar { display: none; }
.p-block--packages[data-layout="carousel"] .p-pkg { flex: 0 0 76%; scroll-snap-align: start; }
.p-block--packages[data-layout="carousel"] .p-pkg-go { margin-top: auto; }
.p-block--packages[data-layout="carousel"] .p-pkg-top { flex-direction: column; align-items: flex-start; gap: 2px; }
.profile[data-flat="1"] .p-block--packages[data-layout="carousel"] .p-pkgs { margin-inline: -4px; padding-inline: 4px; }

/* ---------- pay me ---------- */
.p-pays { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.p-pay { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--t-border); }
.p-pay:first-child { border-top: 0; padding-top: 0; }
.p-pay-mono {
  display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px;
  background: color-mix(in srgb, var(--t-accent) 14%, transparent); color: var(--t-accent-ink, var(--t-accent));
  font: 800 14px var(--t-font-body);
}
.p-pay-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.p-pay-name { font-size: 15px; font-weight: 700; }
.p-pay-val { font: 600 14px ui-monospace, 'SF Mono', Menlo, monospace; color: var(--t-muted); overflow-wrap: anywhere; text-align: start; }
.p-pay-btns { display: flex; gap: 6px; flex-basis: 100%; padding-inline-start: 52px; margin-top: -4px; }

.p-pay .p-qr { flex-basis: 100%; }
.p-pay-sub { font-size: 13px; color: var(--t-muted); }
.p-pay-go { text-decoration: none; }
.p-pay .p-qr img { display: block; width: 180px; height: 180px; margin: 4px auto 0; border-radius: 12px; background: #fff; }
.p-pay-line { margin: 12px 0 0; font-size: 13px; color: var(--t-muted); }

/* ---------- events ---------- */
.p-events { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.p-event { position: relative; display: flex; align-items: flex-start; gap: 14px; }
.profile:not(.editable) .p-event[data-past] { display: none; }
.profile.editable .p-event[data-past] { opacity: .6; }
.p-event-date {
  display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none;
  width: 56px; height: 60px; border-radius: 14px; background: var(--t-accent); color: var(--t-on-accent);
}
.p-event-date small { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.p-event-date b { font: var(--t-display-weight, 700) 25px/1 var(--t-font-display); }
.p-event-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.p-event-name { font-size: 16px; font-weight: 750; line-height: 1.3; }
.p-event-when { font-size: 13.5px; font-weight: 650; color: var(--t-accent-ink, var(--t-accent)); }
.p-event-note { font-size: 14px; color: var(--t-muted); line-height: 1.4; }
.p-event-cal { margin-top: 6px; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--t-border); background: transparent; color: var(--t-text); font: 700 13px var(--t-font-body); cursor: pointer; }
.p-event-cal svg { width: 16px; height: 16px; }
.p-event .p-gone-note { position: absolute; inset-inline-end: 34px; top: -4px; margin: 0; padding: 3px 8px; font-size: 11.5px; }

/* ---------- we're hiring ---------- */
.p-jobs { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.p-job { position: relative; display: flex; align-items: center; gap: 12px; padding: 13px 0; border-top: 1px solid var(--t-border); }
.p-job:first-child { border-top: 0; padding-top: 0; }
.p-job-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.p-job-name { font-size: 16px; font-weight: 750; }
.p-job-note { font-size: 13.5px; color: var(--t-muted); }
.p-job-go { flex: none; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 0; background: var(--t-accent); color: var(--t-on-accent); font: 700 14px var(--t-font-body); cursor: pointer; }
.profile.editable .p-job-go { opacity: .45; pointer-events: none; }

/* ---------- numbers ---------- */
.p-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.p-nums[data-two] { grid-template-columns: repeat(2, 1fr); }
.p-num { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 4px 12px; text-align: center; border-radius: max(10px, calc(var(--t-radius) * .7)); background: color-mix(in srgb, var(--t-accent) 9%, transparent); min-width: 0; }
.p-num-v { font: var(--t-display-weight, 700) 30px/1.05 var(--t-font-display); font-variation-settings: var(--t-display-vars); color: var(--t-accent-ink, var(--t-accent)); font-variant-numeric: tabular-nums; white-space: nowrap; }
.p-num-l { font-size: 12.5px; font-weight: 600; color: var(--t-muted); line-height: 1.25; overflow-wrap: anywhere; }
.p-num-s { font-size: 11.5px; color: var(--t-muted); }
.profile .p-num > .p-row-x { position: absolute; top: 4px; inset-inline-end: 4px; margin: 0; width: 24px; height: 24px; }

/* ---------- countdown ---------- */
.p-cd { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.p-cd-unit { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 2px 10px; border-radius: max(10px, calc(var(--t-radius) * .7)); background: var(--t-accent); color: var(--t-on-accent); }
.p-cd-unit b { font: var(--t-display-weight, 700) 30px/1 var(--t-font-display); font-variant-numeric: tabular-nums; }
.p-cd-unit b.is-tick { animation: p-cd-tick .35s ease-out; }
.p-cd-unit small { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
@keyframes p-cd-tick { from { transform: translateY(-3px); opacity: .5; } }
.p-cd-when { margin: 10px 0 0; font-size: 13.5px; font-weight: 650; color: var(--t-muted); text-align: center; }
.p-cd-done { display: none; margin: 0; font: var(--t-display-weight, 700) 24px/1.15 var(--t-font-display); text-align: center; color: var(--t-accent-ink, var(--t-accent)); }
[data-cd-done] > .p-cd { display: none; }
[data-cd-done] > .p-cd-done { display: block; }
.profile.editable .p-cd-done { display: block; margin-top: 12px; font-size: 16px; }
.profile.editable .p-cd-done::before { content: 'When it’s over: '; font: 600 13px var(--t-font-body); color: var(--t-muted); }
.profile:not(.editable) [data-cd-none] { display: none; }

/* ---------- questions ---------- */
.p-faqs { display: flex; flex-direction: column; }
.p-faq { position: relative; border-top: 1px solid var(--t-border); }
.p-faq:first-child { border-top: 0; }
.p-faq-q { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 0; cursor: pointer; }
.p-faq:first-child .p-faq-q { padding-top: 0; }
.p-faq-qt { flex: 1; font-size: 15.5px; font-weight: 700; line-height: 1.35; }
.p-faq-plus { position: relative; flex: none; width: 24px; height: 24px; border-radius: 50%; background: color-mix(in srgb, var(--t-accent) 14%, transparent); }
.p-faq-plus::before, .p-faq-plus::after { content: ''; position: absolute; top: 50%; left: 50%; width: 10px; height: 2px; margin: -1px 0 0 -5px; border-radius: 2px; background: var(--t-accent-ink, var(--t-accent)); transition: transform .25s ease; }
.p-faq-plus::after { transform: rotate(90deg); }
.p-faq.is-open .p-faq-plus::after { transform: rotate(0deg); }
.p-faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s ease; }
.p-faq-a > * { overflow: hidden; }
.p-faq.is-open .p-faq-a { grid-template-rows: 1fr; }
.p-faq-at { display: block; font-size: 14.5px; line-height: 1.5; color: var(--t-muted); transition: padding-bottom .25s ease; }
/* The gap under an answer belongs to the open state: as padding on the clipped row, it showed a slice of a closed answer. */
.p-faq.is-open .p-faq-at, .profile.editable .p-faq-at { padding-bottom: 12px; }
.profile.editable .p-faq-a { grid-template-rows: 1fr; }
.profile.editable .p-faq-plus { display: none; }
.profile .p-faq > .p-row-x { position: absolute; top: 10px; inset-inline-end: 0; margin: 0; }
.profile.editable .p-faq-q { padding-inline-end: 36px; }

/* ---------- experience ---------- */
.p-tl { margin: 0; padding: 0; list-style: none; position: relative; }
.p-tl-step { position: relative; display: flex; flex-direction: column; gap: 2px; padding-inline-start: 26px; padding-bottom: 18px; }
.p-tl-step:last-child { padding-bottom: 0; }
.p-tl-step::before { content: ''; position: absolute; inset-inline-start: 4px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--t-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--t-accent) 20%, transparent); }
.p-tl-step:not(:last-child)::after { content: ''; position: absolute; inset-inline-start: 9px; top: 22px; bottom: 2px; width: 2px; background: var(--t-border); }
.p-tl-time { font-size: 12.5px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; color: var(--t-accent-ink, var(--t-accent)); }
.p-tl-name { font-size: 16px; font-weight: 750; line-height: 1.3; }
.p-tl-note { font-size: 14px; color: var(--t-muted); }
.profile .p-tl-step > .p-row-x { position: absolute; top: 0; inset-inline-end: 0; margin: 0; }

/* ---------- worked with: names set as wordmarks ---------- */
.p-block--clients { container-type: inline-size; }
.p-clients { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@container (min-width: 560px) { .p-clients { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.p-client {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-width: 0;
  min-height: 88px; padding: 12px 8px; text-align: center; border-radius: max(10px, calc(var(--t-radius) * .7));
  background: color-mix(in srgb, var(--t-text) 5%, transparent); color: color-mix(in srgb, var(--t-text) 72%, transparent);
}
.p-client.is-tile { flex-direction: row; justify-content: flex-start; gap: 10px; min-height: 56px; padding: 8px 10px; text-align: start; }
.p-client-logo {
  display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 10px; overflow: hidden;
  background: color-mix(in srgb, var(--t-text) 8%, transparent); font: 800 13px/1 var(--t-font-display); letter-spacing: .03em;
}
.p-client-logo img { width: 100%; height: 100%; object-fit: contain; filter: grayscale(1); opacity: .8; }
.p-client-text { display: flex; flex-direction: column; min-width: 0; }
.p-client-name { font-size: 13.5px; font-weight: 650; line-height: 1.25; overflow-wrap: anywhere; }
.p-client-note { font-size: 12.5px; color: var(--t-muted); }
.p-client.has-logo img { height: 36px; max-width: 80%; object-fit: contain; filter: grayscale(1); opacity: .75; }
.p-client-go { position: absolute; inset: 0; border-radius: inherit; }
.profile.editable .p-block--clients [data-logo-add] { margin-inline-start: 6px; }

/* ---------- video ---------- */
.p-video-one { position: relative; margin: 0; min-width: 0; }
.p-video-cap { margin-top: 6px; font-size: 14px; font-weight: 650; }
.p-video-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; align-items: start; }
.p-video-strip .p-video-cap { font-size: 13px; }
.p-video-strip .p-video-play { width: 44px; height: 44px; }
.p-video-strip .p-video-play svg { width: 20px; height: 20px; }
.p-video { display: block; color: inherit; }
.p-video { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: max(10px, calc(var(--t-radius) * .75)); background: #111; }
.p-video.is-tall { aspect-ratio: 9 / 16; max-height: 70vh; margin-inline: auto; }
.p-video.is-square { aspect-ratio: 1; }
.p-video-strip .p-video.is-tall { max-height: none; }
.p-video-img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s; }
.p-video-img[data-on] { opacity: 1; }
.p-video-play {
  position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 68px; height: 68px;
  transform: translate(-50%, -50%); border: 0; border-radius: 50%; background: var(--t-accent); color: var(--t-on-accent);
  box-shadow: 0 6px 24px rgba(0,0,0,.35); cursor: pointer; transition: transform .15s ease;
}
.p-video-play svg { width: 30px; height: 30px; margin-left: 4px; }
.p-video-play:active { transform: translate(-50%, -50%) scale(.94); }
.p-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.p-video.is-empty { display: grid; place-items: center; background: color-mix(in srgb, var(--t-text) 7%, var(--t-surface)); }
.p-video-none { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--t-muted); font-size: 14px; font-weight: 650; }
.p-video-none svg { width: 34px; height: 34px; }
.profile:not(.editable) .p-block--video[data-empty] { display: none; }
/* set 19 (frames 19e, 19f): a poster in the page's own colours until a visitor taps, a light round play button on it;
   an owner's cover covers it (no platform picture, PM-11). A tall video sits centred, at most 3/4 of the column and 60%
   of the screen high, so the strip and the next section show under it. Strip tiles carry their title on the poster. */
.p-video-one .p-video { --v-a: var(--t-accent); background: linear-gradient(165deg, color-mix(in srgb, var(--v-a) 78%, #000) 0%, color-mix(in srgb, var(--v-a) 30%, #000) 100%); }
.p-video-strip .p-video-one:nth-child(even) .p-video { background: linear-gradient(165deg, color-mix(in srgb, var(--v-a) 55%, #fff) 0%, color-mix(in srgb, var(--v-a) 70%, #000) 100%); }
.p-video-one .p-video.is-empty { background: color-mix(in srgb, var(--t-text) 7%, var(--t-surface)); }
.p-video-one .p-video-img { position: absolute; inset: 0; }
.p-video-one .p-video-play { width: 58px; height: 58px; background: color-mix(in srgb, #fff 92%, var(--v-a, var(--t-accent))); color: #1d1b19; box-shadow: 0 6px 20px rgba(0,0,0,.28); }
.p-video-one .p-video-play svg { width: 22px; height: 22px; margin-left: 3px; }
.p-video-strip .p-video-one .p-video-play { top: 42%; width: 36px; height: 36px; }
.p-video-strip .p-video-one .p-video-play svg { width: 15px; height: 15px; margin-left: 2px; }
.p-video-one.is-big .p-video.is-tall { width: min(75%, calc(60vh * 9 / 16)); max-height: 60vh; }
.p-video-one.is-big .p-video-cap { margin-top: 10px; font-size: 15px; font-weight: 400; color: var(--t-muted); }
.p-video-strip .p-video-cap {
  position: absolute; inset: auto 0 0; margin: 0; padding: 22px 10px 9px; pointer-events: none;
  border-radius: 0 0 max(10px, calc(var(--t-radius) * .75)) max(10px, calc(var(--t-radius) * .75));
  background: linear-gradient(transparent, rgba(0,0,0,.5)); color: #fff; font-size: 13px; font-weight: 700; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- Wi-Fi ---------- */
.p-wifi { display: flex; align-items: center; gap: 14px; }
.p-wifi-ico { display: grid; place-items: center; flex: none; width: 54px; height: 54px; border-radius: 16px; background: var(--t-accent); color: var(--t-on-accent); }
.p-wifi-ico svg { width: 28px; height: 28px; }
.p-wifi-rows { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.p-wifi-row { margin: 0; display: flex; flex-direction: column; gap: 1px; }
.p-wifi-row small { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--t-muted); }
.p-wifi-row b { font-size: 17px; font-weight: 750; overflow-wrap: anywhere; }
.p-wifi-pass { font-family: ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: .03em; text-align: start; }
.p-wifi-btns { display: flex; gap: 8px; margin-top: 14px; }
.p-wifi-btns .p-copy:first-child { flex: 1; justify-content: center; min-height: 44px; background: var(--t-accent); color: var(--t-on-accent); border-color: transparent; font-size: 14.5px; }
.p-wifi-btns .p-copy--qr { min-height: 44px; }

/* ---------- files ---------- */
.p-files { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.p-file { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: max(10px, calc(var(--t-radius) * .7)); border: 1px solid var(--t-border); background: color-mix(in srgb, var(--t-accent) 5%, transparent); }
.p-file-go { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.p-file-ico { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 10px; background: color-mix(in srgb, var(--t-accent) 14%, transparent); color: var(--t-accent-ink, var(--t-accent)); }
.p-file-ico svg, .p-file-down svg { width: 20px; height: 20px; }
.p-file-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.p-file-name { font-size: 15.5px; font-weight: 700; }
.p-file-url { display: none; font: 500 13px ui-monospace, Menlo, monospace; color: var(--t-muted); overflow-wrap: anywhere; text-align: start; }
.p-file-down { color: var(--t-muted); }
/* the editor's row with no link yet stays off the preview; a visitor's (a file or link the scans hold, ADR 0078/0079) shows what it is, with nothing to open */
.profile:not(.editable) .p-file.is-nolink:has(.p-file-url) { display: none; }
.p-file.is-nolink .p-file-down { display: none; }
.profile.editable .p-file-url { display: block; position: relative; z-index: 2; }
.profile.editable .p-file-name { position: relative; z-index: 2; }
.profile.editable .p-file-go { display: none; }
.profile.editable .p-file > .p-row-x { z-index: 2; }

/* ---------- areas we cover ---------- */
/* Forms pass run E (sets 29, 32, 33, ADR 0070). Find us: the floor under the area, and our own drawn map (no tiles,
   nothing asked of a map server before a tap). */
.p-loc-floor { margin-top: 3px; font-size: 13.5px; color: var(--t-muted); }
.p-drawn-map { display: block; margin-top: 14px; border-radius: max(10px, calc(var(--t-radius) * .7)); overflow: hidden; background: color-mix(in srgb, var(--t-text) 4%, var(--t-bg)); color: var(--t-text); }
.p-drawn-map-art { display: block; inline-size: 100%; block-size: 140px; }
.p-drawn-map-art rect { fill: color-mix(in srgb, var(--t-text) 11%, var(--t-bg)); }
.p-drawn-map-pin path { fill: var(--t-bg); stroke: currentColor; stroke-width: 1.9; }
.p-drawn-map-pin circle { fill: none; stroke: currentColor; stroke-width: 1.9; }
.p-block--location[data-map="drawn"] .p-landmark { margin-top: 12px; }

/* Google reviews (set 32, D-044): a link to the place's reviews on Google Maps on its own surface, the mark never
   translated or wrapped (doc 04 §8.1) */
.p-gcard { padding: 2px 16px; border-radius: max(10px, calc(var(--t-radius) * .7)); border: 1px solid #dadce0; background: #fff; color: #1f1f1f; }
.profile[data-dark="1"] .p-gcard { border-color: #5e5e5e; background: #1f1f1f; color: #fff; }
.p-gcard-see { display: inline-block; padding-block: 12px; line-height: 20px; font-size: 14px; font-weight: 600; color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.gmaps-mark { font-family: Roboto, var(--t-font-body), sans-serif; font-weight: 400; letter-spacing: normal; white-space: nowrap; }

/* Links (set 33): big buttons in the page's style, an icon tile, the label and a chevron */
.p-links { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.p-linkrow { position: relative; }
.p-linkbtn { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 9px 14px; border-radius: max(10px, calc(var(--t-radius) * .7)); border: 1px solid var(--t-border); background: color-mix(in srgb, var(--t-text) 3%, transparent); color: inherit; text-decoration: none; transition: transform .12s ease; }
.p-linkbtn:active { transform: scale(.98); }
.p-linkbtn-ic { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 10px; background: color-mix(in srgb, var(--t-accent) 14%, transparent); color: var(--t-accent-ink, var(--t-accent)); }
.p-linkbtn-ic svg, .p-linkbtn-go svg { width: 20px; height: 20px; }
.p-linkbtn-label { flex: 1; min-width: 0; font-size: 15.5px; font-weight: 700; overflow-wrap: anywhere; }
.p-linkbtn-go { flex: none; color: var(--t-muted); }
.profile:lang(ar) .p-linkbtn-go svg, [dir="rtl"] .p-linkbtn-go svg { transform: scaleX(-1); }

/* ---------- what people say (set 20) ---------- */
.p-block--quotes { container-type: inline-size; }
.p-says { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
@container (min-width: 560px) { .p-says { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.p-say { position: relative; display: flex; min-width: 0; }
.p-say figure {
  flex: 1; display: flex; flex-direction: column; margin: 0; padding: 16px;
  border-radius: max(12px, calc(var(--t-radius) * .7)); border: 1px solid var(--t-border);
  background: color-mix(in srgb, var(--t-text) 3%, var(--t-card, var(--t-surface)));
}
.p-say figure::before { content: '“'; display: block; height: 18px; margin-bottom: 8px; font: 700 34px/1 Georgia, 'Times New Roman', serif; color: var(--t-accent-ink, var(--t-accent)); }
.profile:lang(ar) .p-say figure::before { content: '”'; }
.p-say blockquote { margin: 0; font: 400 16px/1.45 var(--t-quote-font, var(--t-font-body)); overflow-wrap: anywhere; }
.p-say figcaption { display: flex; flex-direction: column; gap: 2px; margin-top: auto; padding-top: 14px; font: 400 13px/1.4 var(--t-font-body); color: var(--t-muted); }
.p-say figcaption b { font: 700 15px/1.3 var(--t-font-body); color: var(--t-text); }
.p-say-gift { margin: 6px 0 0; font: 400 12.5px/1.4 var(--t-font-body); color: var(--t-muted); }
.p-says-ok { margin: 10px 0 0; font-size: 12.5px; color: var(--t-muted); }

.p-areas-line { margin: 0 0 10px; }
.p-area-fee { font-size: 12.5px; font-weight: 700; color: var(--t-accent-ink, var(--t-accent)); unicode-bidi: isolate; }
.p-area-note { font-size: 12.5px; color: var(--t-muted); }
.p-area-pin { display: flex; color: var(--t-accent-ink, var(--t-accent)); }
.p-area-pin svg { width: 15px; height: 15px; }

/* A sample block in the editor: a draft. Dashed, its words faded, under a
   strip that says visitors don't see it yet (profile.js sampleMark). */
.profile.editable .p-block[data-sample] {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--t-text) 32%, transparent);
  box-shadow: none;
}
.profile.editable .p-block[data-sample] > :not(.p-draft):not(.p-block-head),
.profile.editable .p-block[data-sample] > .p-block-head .p-block-title { opacity: 0.6; transition: opacity 0.2s; }
.profile.editable .p-block[data-sample]:focus-within > * { opacity: 1; }
.profile.editable .p-draft {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -6px -6px 14px;
  padding: 8px 8px 8px 12px;
  border-radius: calc(var(--t-radius) * 0.6);
  background: color-mix(in srgb, var(--t-accent) 13%, transparent);
  color: var(--t-text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 13px;
  line-height: 1.35;
}
.p-draft-text { flex: 1; min-width: 0; }
.p-draft-text b {
  display: inline-block;
  margin-inline-end: 4px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--t-accent-ink, var(--t-text));
}
.p-draft-show {
  flex: none;
  min-height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: var(--t-text);
  color: var(--t-bg, #fff);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  touch-action: manipulation;
}
.p-draft-show:active { transform: scale(0.96); }

/* Added and left blank (fill.js): grey hints in the editor, nothing for visitors */
.profile:not(.editable) .p-block[data-empty],
.profile:not(.editable) [data-row-empty] { display: none !important; }
.profile.editable .p-block[data-empty] { border-style: dashed; box-shadow: none; }
.profile.editable .p-draft--empty { background: color-mix(in srgb, var(--t-text) 7%, transparent); }

/* ---------- Free and Pro (plan.js) ----------
   The PRO tag: a label on what a Free page's visitors don't get, in the
   editor only. Gold, small, never a lock. As a button it opens the plans;
   its tap area reaches past the tag to a thumb's size. */
.pro-tag {
  display: inline-flex;
  align-items: center;
  flex: none;
  height: 18px;
  margin-inline-start: 6px;
  padding: 0 6px;
  border: 0;
  border-radius: 5px;
  background: linear-gradient(135deg, #f6d27a, #d9a43b);
  color: #3a2a06;
  font: 800 10px/1 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  letter-spacing: 0.08em;
  vertical-align: 0.12em;
  white-space: nowrap;
}
button.pro-tag { position: relative; cursor: pointer; touch-action: manipulation; }
button.pro-tag::after { content: ''; position: absolute; inset: -13px -10px; }
.p-draft-text b + .pro-tag { margin-inline: 0 4px; }

/* the strip on a Pro block, in the editor: the whole strip is the tag's button */
.profile.editable .p-pro {
  display: flex;
  align-items: center;
  gap: 10px;
  width: calc(100% + 12px);
  min-height: 44px;
  margin: -6px -6px 14px;
  padding: 8px 12px;
  border: 0;
  border-radius: calc(var(--t-radius) * 0.6);
  background: color-mix(in srgb, #e3b04b 17%, transparent);
  color: var(--t-text);
  font: 600 13px/1.35 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  text-align: start;
  touch-action: manipulation;
}
.p-pro > .pro-tag { margin: 0; }
.p-pro-text { flex: 1; min-width: 0; }
button.p-pro:active { transform: scale(0.985); }

/* Google's or mine: the switch on Hours, Good to know and Photos */
.profile.editable .p-pro--source { display: block; padding: 4px; }
.profile.editable .p-block:not([data-pro]) > .p-pro--source { background: color-mix(in srgb, var(--t-text) 6%, transparent); }
.p-whose {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  padding: 3px;
  border-radius: calc(var(--t-radius) * 0.5);
  background: color-mix(in srgb, var(--t-text) 7%, transparent);
}
.p-whose button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 8px;
  border: 0;
  border-radius: calc(var(--t-radius) * 0.4);
  background: transparent;
  color: color-mix(in srgb, var(--t-text) 72%, transparent);
  font: 650 13.5px/1.2 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  touch-action: manipulation;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.p-whose button:active { transform: scale(0.97); }
.p-whose button[aria-checked="true"] {
  background: var(--t-surface, #fff);
  color: var(--t-text);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.14);
}
.p-pro--source .p-pro-text {
  margin: 7px 8px 3px;
  font-size: 12.5px;
  color: color-mix(in srgb, var(--t-text) 78%, transparent);
}

/* Google's line under the name, and the tray's suggestions */
.profile.editable .p-meta-pro { display: inline-flex; margin-inline-start: 8px; }
.p-rec-text strong .pro-tag { margin-inline-start: 7px; }
.p-hero-edit .pro-tag { margin-inline-start: 1px; }
/* Google's words under the name: the tag is drawn, not typed, so it never
   ends up in what the owner writes (app.js saveField drops it once they do) */
.profile.editable .p-tagline[data-google]::after {
  content: 'PRO';
  display: inline-flex;
  align-items: center;
  height: 18px;
  margin-inline-start: 8px;
  padding: 0 6px;
  border-radius: 5px;
  background: linear-gradient(135deg, #f6d27a, #d9a43b);
  color: #3a2a06;
  font: 800 10px/1 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  letter-spacing: 0.08em;
  vertical-align: 0.12em;
}

/* "N hidden" led here: a hero, a line or a block, pulsed once */
.profile .p-header .pulse-once,
.profile .p-tagline.pulse-once { animation: p-pulse-line 1.4s ease-out; border-radius: 10px; }
@keyframes p-pulse-line { 0%, 60% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--t-accent) 55%, transparent); } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) {
  .profile .p-header .pulse-once, .profile .p-tagline.pulse-once { animation: none; outline: 3px solid var(--t-accent); }
}

/* view.css (v3) */
/* ============================================================
   view.css — the frame around a page on a visitor's phone (view.html):
   the column, "Made for you", and the note for a link that won't open.
   The page itself is page.css; the Ask is ask.css. Nothing here comes from
   styles.css, which is the builder's.
   ============================================================ */

html, body {
  margin: 0;
  height: 100%;
  background: #141210;
  -webkit-text-size-adjust: 100%;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.view-shell {
  position: relative;
  height: 100dvh;
  max-width: 430px;
  margin: 0 auto;
  overflow: hidden;
  background: #faf8f5;
}
.view-shell .profile[hidden] { display: none; }

/* Only part of the link opened (an old browser with no inflate). */
.view-partial {
  display: none;
  position: absolute;
  z-index: 20;
  inset-inline: 12px;
  top: calc(env(safe-area-inset-top) + 10px);
  margin: 0;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(20, 18, 16, 0.86);
  color: #fff;
  font-size: 13px;
  line-height: 1.35;
  text-align: center;
}
.view-shell[data-partial="1"] .view-partial { display: block; }

/* ---------- Made for you ----------
   A card at the thumb, over the page, which stays visible above it. While it
   is up, the page's own dock steps aside: one bottom thing at a time. */

.made {
  --made-accent: #1d1b20;
  --made-on-accent: #ffffff;
  position: absolute;
  z-index: 40;
  inset-inline: 0;
  bottom: 0;
  padding: 0 10px calc(env(safe-area-inset-bottom) + 10px);
  color: #1d1b20;
  transform: translateY(110%);
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.made[hidden] { display: none; }
.made.is-in { transform: none; }
.made :where(p) { margin: 0; }

.made-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: calc(100dvh - env(safe-area-inset-top) - 40px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px 18px 16px;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08), 0 18px 50px rgba(0, 0, 0, 0.28);
}
.made-x {
  position: absolute;
  top: 6px;
  inset-inline-end: 6px;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: none;
  font: inherit;
  font-size: 15px;
  color: #6b635a;
  cursor: pointer;
}
.made-x:active { background: #f3efea; }
.made-line {
  padding-inline-end: 38px;
  font-size: 18px;
  font-weight: 750;
  letter-spacing: -0.015em;
  line-height: 1.25;
}
.made-sub {
  font-size: 15px;
  line-height: 1.4;
  color: #6b635a;
}

.made-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 52px;
  padding: 0 16px;
  border: 1.5px solid #e7e1d9;
  border-radius: 16px;
  background: #fff;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.12s ease;
}
.made-btn:active { transform: scale(0.97); }
.made-btn svg { width: 20px; height: 20px; flex: none; }
.made-btn--wa { border-color: transparent; background: #1f8a5b; color: #fff; }
.made-btn--main {
  margin-top: 12px;
  border-color: transparent;
  background: var(--made-accent);
  color: var(--made-on-accent);
  font-size: 17px;
}
.made-btn--main[hidden] { display: none; }

.view-shell[data-made="open"] .profile .p-dock { transform: translateY(100%); opacity: 0; pointer-events: none; }

/* ---------- Swap cards ----------
   The same card at the thumb as Made for you (they never show together), and
   the same rule: while it is up, the dock steps aside. */

.swap {
  --made-accent: #1d1b20;
  --made-on-accent: #ffffff;
  position: absolute;
  z-index: 40;
  inset-inline: 0;
  bottom: 0;
  padding: 0 10px calc(env(safe-area-inset-bottom) + 10px);
  color: #1d1b20;
  transform: translateY(110%);
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.swap[hidden] { display: none; }
.swap.is-in { transform: none; }
.swap :where(p) { margin: 0; }
.swap-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 16px 14px;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08), 0 18px 50px rgba(0, 0, 0, 0.28);
}
.swap-faces { display: flex; align-items: center; gap: 6px; }
.swap-face {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--made-accent);
  color: var(--made-on-accent);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.swap-face--me { background: #f3efea; color: #1d1b20; box-shadow: inset 0 0 0 1.5px #e7e1d9; }
.swap-arrows { width: 22px; height: 22px; color: #9a9187; }
.swap-line {
  padding-inline-end: 38px;
  font-size: 18px;
  font-weight: 750;
  letter-spacing: -0.015em;
  line-height: 1.25;
}
.swap-sub { margin-top: -4px !important; font-size: 14px; line-height: 1.4; color: #6b635a; }
.swap-name {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 14px;
  border: 1.5px solid #e7e1d9;
  border-radius: 16px;
  font-size: 16px;
  font-weight: 700;
}
.swap-name[hidden] { display: none; }
.swap-name:focus-within { border-color: #1d1b20; }
.swap-name input {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  border: none;
  outline: none;
  background: none;
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  color: inherit;
}
.swap-go:not([href]) { opacity: 0.55; }
.swap-save { border-color: transparent; background: var(--made-accent); color: var(--made-on-accent); }
.swap-save, .swap-make { display: none !important; }
.swap-make {
  align-items: center;
  justify-content: center;
  min-height: 44px;
  font-size: 15px;
  font-weight: 700;
  color: #1d1b20;
  text-underline-offset: 3px;
}
.swap[data-state="sent"] .swap-go, .swap[data-state="done"] .swap-go,
.swap:not([data-state="new"]) .swap-name { display: none; }
.swap[data-state="sent"] .swap-save { display: flex !important; }
.swap[data-state="sent"]:not([data-card="1"]) .swap-make { display: flex !important; }
.swap[data-state="done"] .swap-line { color: #1f6b47; }

.view-shell[data-swap="open"] .profile .p-dock { transform: translateY(100%); opacity: 0; pointer-events: none; }

/* ---------- a link that won't open ---------- */

.view-note {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 12px;
  padding: calc(env(safe-area-inset-top) + 28px) 24px calc(env(safe-area-inset-bottom) + 28px);
  background: #141210;
  color: #f4efe8;
}
.view-note[hidden] { display: none; }
/* On a wide screen the note keeps the readable column the report page has (430px), not the whole width (ADR 0053). */
@media (min-width: 640px) {
  .view-note { padding-inline: max(24px, calc((100% - 430px) / 2)); }
}
.view-note :where(h1, p) { margin: 0; }
.view-note-logo {
  margin-bottom: auto !important;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.view-note-logo i { font-style: normal; color: #e0603a; }
.view-note h1 {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 40px;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.view-note p { font-size: 16px; line-height: 1.45; color: rgba(244, 239, 232, 0.75); }
.view-note-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  margin-top: 12px;
  border-radius: 18px;
  background: #f4efe8;
  color: #141210;
  font-size: 17px;
  font-weight: 750;
  text-decoration: none;
  transition: transform 0.12s ease;
}
.view-note-btn:active { transform: scale(0.97); }
.view-note-alt {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  color: #f4efe8;
  font-size: 15px;
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.view-note-alt[hidden] { display: none; }
.view-note-examples { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; font-size: 13px; }
.view-note-examples > span { flex-basis: 100%; text-align: center; color: rgba(244, 239, 232, 0.6); }
.view-note-examples a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(244, 239, 232, 0.22);
  color: inherit;
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  .made, .swap, .made-btn, .view-note-btn { transition-duration: 0.01ms; }
}

/* linfolio: below this line is ours, not v3's (sync-v3-assets.mjs keeps it) */
/* Forms pass run D (sets 22–28, ADR 0067): what its sections share */
.p-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Photos, forms pass run D: squares three across, or each photo whole ("Don't crop my photos"), two columns (three on a laptop, wide.ts) */
.p-gal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.p-gal-fig { position: relative; margin: 0; min-width: 0; }
.p-gal-ph { position: relative; display: block; overflow: hidden; border-radius: max(4px, calc(var(--t-radius) * .55)); background: color-mix(in srgb, var(--t-text) 8%, var(--t-surface)); }
.p-gal-img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.p-gal-none { display: grid; place-items: center; aspect-ratio: 1; color: var(--t-muted); }
.p-gal-none svg { width: 24px; height: 24px; opacity: .5; }
.p-gal-cap { margin-top: 5px; font-size: 12.5px; line-height: 1.3; color: var(--t-muted); overflow-wrap: anywhere; }
.p-block--gallery[data-whole] .p-gal { display: block; columns: 2; column-gap: 8px; }
.p-block--gallery[data-whole] .p-gal-fig { break-inside: avoid; margin-bottom: 8px; }
.p-block--gallery[data-whole] .p-gal-img { aspect-ratio: auto; height: auto; }
.p-block--gallery .p-block-text + .p-gal { margin-top: 12px; }
.profile .p-gal-fig > .p-row-x { position: absolute; top: 4px; inset-inline-end: 4px; margin: 0; width: 24px; height: 24px; }

/* Before and after, forms pass run D: a strip of pairs, one at a time. Without a script the two photos sit side by side; with it (more.js,
   is-live) the after photo sits under the before one and the line between them follows a finger, a mouse or the keys */
.p-ba-strip { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.p-ba-strip::-webkit-scrollbar { display: none; }
.p-ba-pair { flex: none; width: 100%; margin: 0; scroll-snap-align: center; }
.p-ba--pair { aspect-ratio: 4 / 5; max-height: 460px; }
.p-ba--pair.is-square { aspect-ratio: 1; }
.p-ba--pair.is-wide { aspect-ratio: 16 / 9; }
.p-ba--pair .p-ba-img { opacity: 1; }
.p-ba-img.is-none { display: block; background: color-mix(in srgb, var(--t-text) 12%, var(--t-surface)); }
.p-ba--pair:not(.is-live) { display: flex; gap: 4px; aspect-ratio: auto; max-height: none; background: none; }
.p-ba--pair:not(.is-live) .p-ba-side { position: relative; flex: 1; aspect-ratio: 4 / 5; clip-path: none; overflow: hidden; border-radius: inherit; }
.p-ba--pair:not(.is-live) .p-ba-before { order: -1; }
.p-ba--pair:not(.is-live) .p-ba-line { display: none; }
.p-ba--pair:has(:focus-visible), .p-ba-strip:focus-visible { outline: 2px solid var(--t-accent); outline-offset: 3px; }
.p-ba-cap { margin-top: 10px; font-size: 14.5px; color: var(--t-muted); }
/* Offer, forms pass run D: its photo across the top of the ticket, both prices, the countdown, the terms */
.p-offer.has-photo { padding-top: 0; }
.p-offer-img { display: block; width: calc(100% + 36px); max-width: none; margin: 0 -18px 14px; aspect-ratio: 8 / 3; object-fit: cover; }
.p-offer-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 8px 0 0; }
.p-offer-price b { font-size: 19px; font-weight: 800; }
.p-offer-price s { font-size: 14.5px; opacity: .72; }
.p-offer-cd { margin-top: 12px; }
.p-offer-cd .p-cd { grid-template-columns: repeat(3, minmax(0, 80px)); gap: 8px; }
.p-offer-cd .p-cd-unit { padding: 8px 2px 6px; background: color-mix(in srgb, var(--t-on-accent) 16%, transparent); color: inherit; }
.p-offer-cd .p-cd-unit b { font-size: 22px; }
.p-offer-terms { margin: 8px 0 0; font-size: 12.5px; opacity: .8; }

/* About us, forms pass run D: the owner's bold, italic and links; past its Show until it leaves the page (the past island) */
.p-about + .p-about { margin-top: 10px; }
.p-about a { color: var(--t-accent-ink, var(--t-accent)); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.profile:not(.editable) .p-block[data-past] { display: none; }
.profile.editable .p-block[data-past] { opacity: .6; }

/* Wi-Fi, forms pass run D: the password behind a tap */
.p-wifi-tap summary { position: relative; display: inline-block; padding-block: 4px; cursor: pointer; list-style: none; font-size: 17px; font-weight: 750; color: var(--t-accent-ink, var(--t-accent)); text-decoration: underline; text-underline-offset: 3px; }
.p-wifi-tap summary::-webkit-details-marker { display: none; }
.p-wifi-tap summary::after { content: ''; position: absolute; inset: -6px -8px; }
.p-wifi-tap[open] summary { display: none; }
.p-wifi-sec { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--t-muted); }
.p-wifi-note { margin: 12px 0 0; font-size: 14px; color: var(--t-muted); }
/* end of the forms pass run D */
/* Packages, forms pass (set 8): price with its per, the badge on the card, one line about it; three across on a laptop */
.p-pkg-cost { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.p-pkg-per { font-size: 13px; font-weight: 600; color: var(--t-muted); }
.p-pkg-badge { align-self: flex-start; padding: 3px 9px; border-radius: 999px; background: var(--t-accent); color: var(--t-on-accent); font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.p-pkg-blurb { margin: 0; font-size: 14px; color: var(--t-muted); line-height: 1.4; }
.p-pkg[hidden] { display: none; }
.p-block--packages { container-type: inline-size; }
@container (min-width: 560px) {
  .p-block--packages:not([data-layout="carousel"]) .p-pkgs { display: grid; grid-template-columns: repeat(3, 1fr); align-items: stretch; }
  .p-block--packages:not([data-layout="carousel"]) .p-pkg-go { margin-top: auto; }
}
/* Events, forms pass (set 9): where and entry under the time, the countdown folded in (D-042), the event's own link */
.p-event-meta { font-size: 13.5px; color: var(--t-muted); }
.p-event-meta span + span::before { content: " · "; }
.p-event-cd { margin-top: 8px; }
.p-event-cd .p-cd { grid-template-columns: repeat(3, 1fr); max-width: 260px; gap: 6px; }
.p-event-cd .p-cd-unit { padding: 8px 2px 6px; }
.p-event-cd .p-cd-unit b { font-size: 22px; }
.p-event-cd .p-cd-done { text-align: start; font-size: 17px; }
.p-event-go { margin-top: 6px; align-self: flex-start; display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; background: var(--t-accent); color: var(--t-on-accent); font-weight: 700; font-size: 14px; text-decoration: none; }
/* We're hiring, forms pass (set 10): terms and pay, where, when it closes; how to apply under the list */
.p-job-meta, .p-job-where, .p-job-closes { font-size: 13.5px; color: var(--t-muted); }
.p-job-closes { font-weight: 650; }
.p-job-meta span + span::before { content: " · "; }
.profile:not(.editable) .p-job[data-past] { display: none; }
.profile.editable .p-job[data-past] { opacity: .6; }
a.p-job-go { display: inline-flex; align-items: center; text-decoration: none; }
.p-jobs-how { margin: 12px 0 0; font-size: 13.5px; color: var(--t-muted); }
/* Experience, forms pass (set 11): the kind as a small word, where and a note on one line, the role's own link */
.p-tl-kind { align-self: flex-start; font-size: 11.5px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; color: var(--t-muted); }
.p-tl-sub { font-size: 14px; color: var(--t-muted); }
.p-tl-sub > :empty { display: none; }
.p-tl-sub > :not(:empty) ~ :not(:empty)::before { content: " · "; }
.profile.editable .p-tl-sub > .p-tl-note { display: block; }
.profile.editable .p-tl-sub > .p-tl-note::before { content: none; }
.p-tl-link { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
/* Files, forms pass (set 13): the kind, type and size in place of the address */
.p-file-meta { font-size: 13px; color: var(--t-muted); }
.p-file-note { display: block; font-size: 14px; color: var(--t-muted); overflow-wrap: anywhere; }
/* List with notes, forms pass (set 14): a link from an older page still opens; the whole row is the target */
.p-item-go { position: absolute; inset: 0; border-radius: 8px; }
.p-item:has(> .p-item-go) .p-item-name { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
/* the second-script name under the page's name (14d SD-3; ADR 0027): the page's own body face, a size under the name. Page tokens only. */
.p-name-alt { margin-block-start: 4px; max-width: 100%; font-family: var(--t-font-body, inherit); font-size: 20px; font-weight: 650; line-height: 1.3; color: inherit; overflow-wrap: break-word; }
/* hours: special days and seasons above the usual week (ADR 0024). Page tokens only. */
.p-hx { width: 100%; margin-block-end: 18px; border-collapse: collapse; font-size: 15.5px; line-height: 1.35; color: var(--t-muted); }
.p-hx caption { caption-side: top; padding-block-end: 6px; text-align: start; font-weight: 700; color: var(--t-text); }
.p-hx small { display: block; font-size: 13px; font-weight: 400; color: var(--t-muted); }
.p-hx th { padding-block: 5px; padding-inline-end: 12px; text-align: start; font-weight: 400; vertical-align: baseline; }
.p-hx td { text-align: end; font-weight: 600; font-variant-numeric: tabular-nums; vertical-align: baseline; white-space: nowrap; }
.p-hx .is-today { color: var(--t-text); font-weight: 700; }
.p-hx-conf { margin-block: 8px 0; font-size: 13px; color: var(--t-muted); }
.p-hx-usual > summary { min-height: 44px; padding-block: 11px; box-sizing: border-box; font-weight: 700; color: var(--t-text); cursor: pointer; }
/* menu, forms pass (D-041): sections, a dish's description, tags and sold out, its sizes, and one size switch per
   section that shares sizes. The switch is radios and CSS only: it works with JS off. Page tokens only. */
.p-menu-group + .p-menu-group { margin-top: 22px; }
.p-menu-sec { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--t-muted); }
.p-menu-sec > span:first-child { flex: none; }
.p-menu-sec::after { content: ''; flex: 1; order: 1; border-bottom: 1px solid var(--t-border); }
.p-menu-group--sizes .p-menu-sec::after { order: 0; }
.p-row--dish > .p-row-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.p-row-desc { font-size: 13.5px; line-height: 1.4; color: var(--t-muted); }
.p-row-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.p-row-tag { padding: 1px 8px; border-radius: 999px; border: 1px solid var(--t-border); font-size: 11.5px; font-weight: 650; color: var(--t-muted); }
.p-row-end.is-sizes { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.p-block--menu .p-row-end small, .p-block--menu .p-row-pr small { margin-inline-end: 4px; font-weight: 500; color: var(--t-muted); }
.p-menu-pnote { margin-top: 10px; font-size: 13px; color: var(--t-muted); }
.p-row--dish.is-out { color: var(--t-muted); }
.p-row--dish.is-out .p-row-end { color: var(--t-muted); font-weight: 600; }
.p-sz { order: 2; display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--t-border); border-radius: 999px; letter-spacing: 0; text-transform: none; }
.p-sz label { display: inline-flex; align-items: center; min-height: 36px; padding-inline: 12px; border-radius: 999px; font-size: 13px; font-weight: 650; color: var(--t-muted); cursor: pointer; }
.p-sz-in { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.p-sz-p { display: none; }
.p-sz-p.is-none { font-weight: 500; font-size: 13.5px; color: var(--t-muted); }
.p-sz-in:nth-of-type(1):checked ~ .p-rows .p-sz-p:nth-child(1), .p-sz-in:nth-of-type(2):checked ~ .p-rows .p-sz-p:nth-child(2),
.p-sz-in:nth-of-type(3):checked ~ .p-rows .p-sz-p:nth-child(3), .p-sz-in:nth-of-type(4):checked ~ .p-rows .p-sz-p:nth-child(4),
.p-sz-in:nth-of-type(5):checked ~ .p-rows .p-sz-p:nth-child(5), .p-sz-in:nth-of-type(6):checked ~ .p-rows .p-sz-p:nth-child(6) { display: inline; }
.p-sz-in:nth-of-type(1):checked ~ .p-menu-sec .p-sz label:nth-child(1), .p-sz-in:nth-of-type(2):checked ~ .p-menu-sec .p-sz label:nth-child(2),
.p-sz-in:nth-of-type(3):checked ~ .p-menu-sec .p-sz label:nth-child(3), .p-sz-in:nth-of-type(4):checked ~ .p-menu-sec .p-sz label:nth-child(4),
.p-sz-in:nth-of-type(5):checked ~ .p-menu-sec .p-sz label:nth-child(5), .p-sz-in:nth-of-type(6):checked ~ .p-menu-sec .p-sz label:nth-child(6) { background: var(--t-accent); color: var(--t-on-accent); }
.p-sz-in:nth-of-type(1):focus-visible ~ .p-menu-sec .p-sz label:nth-child(1), .p-sz-in:nth-of-type(2):focus-visible ~ .p-menu-sec .p-sz label:nth-child(2),
.p-sz-in:nth-of-type(3):focus-visible ~ .p-menu-sec .p-sz label:nth-child(3), .p-sz-in:nth-of-type(4):focus-visible ~ .p-menu-sec .p-sz label:nth-child(4),
.p-sz-in:nth-of-type(5):focus-visible ~ .p-menu-sec .p-sz label:nth-child(5), .p-sz-in:nth-of-type(6):focus-visible ~ .p-menu-sec .p-sz label:nth-child(6) { outline: 2px solid var(--t-text); outline-offset: 2px; }
/* a laptop's page column (DD-17) is wide enough for two columns of dishes; a phone's is not */
.p-block--menu2 { container-type: inline-size; }
@container (min-width: 480px) {
  .p-block--menu2 .p-rows { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; row-gap: 14px; }
}
/* Order on WhatsApp (forms pass set 5, D-042): the price under the name in tabular figures, and one control slot of a
   fixed width at the row's end, so "+" and "− n +" sit in the same place and nothing moves. Sold out sits in it, greyed.
   With JS off the + is a WhatsApp link for that one dish; the order island (visitor/order.ts) takes it over. */
.p-row--ord { display: flex; align-items: center; gap: 12px; }
.p-row--ord > .p-row-main { flex: 1; }
.p-row-pr { font-weight: 650; font-variant-numeric: tabular-nums; }
.p-row-pr.is-sizes > span + span { margin-inline-start: 10px; }
.p-ord { flex: none; inline-size: 120px; display: flex; justify-content: flex-end; align-items: center; font-size: 13.5px; font-weight: 600; color: var(--t-muted); }
.p-ord-add, .p-ord-step button { display: inline-grid; place-items: center; inline-size: 44px; block-size: 44px; border-radius: 999px; font: inherit; font-size: 22px; line-height: 1; text-decoration: none; cursor: pointer; touch-action: manipulation; }
.p-ord-add[hidden] { display: none; }
.p-ord-add { border: 1.5px solid var(--t-accent); color: var(--t-accent); background: none; }
.p-ord-step { display: flex; align-items: center; justify-content: space-between; inline-size: 100%; border-radius: 999px; background: var(--t-accent); color: var(--t-on-accent); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.p-ord-step button { border: 0; background: none; color: inherit; }
.p-ord-has { display: block; font-size: 12.5px; color: var(--t-accent-ink); }
.p-sz-in:nth-of-type(1):checked ~ .p-rows .is-no1 > *, .p-sz-in:nth-of-type(2):checked ~ .p-rows .is-no2 > *, .p-sz-in:nth-of-type(3):checked ~ .p-rows .is-no3 > *,
.p-sz-in:nth-of-type(4):checked ~ .p-rows .is-no4 > *, .p-sz-in:nth-of-type(5):checked ~ .p-rows .is-no5 > *, .p-sz-in:nth-of-type(6):checked ~ .p-rows .is-no6 > * { visibility: hidden; }
.p-ord-bar { position: fixed; inset-inline: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 20; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 6px 6px 18px; border-radius: 999px; background: var(--t-text); color: var(--t-bg); font-weight: 650; font-variant-numeric: tabular-nums; }
.p-ord-bar b { flex: 1; }
.p-ord-bar button, .p-ord-send { min-height: 44px; padding-inline: 18px; border: 0; border-radius: 999px; background: var(--t-accent); color: var(--t-on-accent); font: inherit; font-weight: 700; cursor: pointer; }
.p-ord-sheet { inline-size: min(100%, 520px); max-inline-size: 100%; max-block-size: 88dvh; margin: auto auto 0; padding: 18px 18px calc(18px + env(safe-area-inset-bottom)); border: 0; border-radius: 20px 20px 0 0; background: var(--t-surface, var(--t-bg)); color: var(--t-text); }
.p-ord-sheet::backdrop { background: rgb(0 0 0 / .4); }
/* the bar steps aside while its sheet is open, so its corners never show past the sheet's */
:has(> .p-ord-sheet[open]) > .p-ord-bar { visibility: hidden; }
.p-ord-sheet h2 { display: flex; justify-content: space-between; align-items: center; margin: 0 0 12px; font-size: 18px; }
.p-ord-sheet h2 button { inline-size: 44px; block-size: 44px; border: 0; background: none; color: inherit; font-size: 20px; cursor: pointer; }
.p-ord-sheet > .p-ord-step { inline-size: 132px; align-self: center; margin-inline: auto; margin-block: 12px; }
.p-ord-line { display: flex; align-items: center; gap: 10px; padding-block: 8px; border-bottom: 1px solid var(--t-border); }
.p-ord-line > span:first-child { flex: 1; }
.p-ord-line small, .p-ord-fine { color: var(--t-muted); }
.p-ord-line .p-ord { inline-size: 120px; }
.p-ord-line > b { min-inline-size: 64px; text-align: end; font-variant-numeric: tabular-nums; }
.p-ord-total { display: flex; justify-content: space-between; padding-block: 10px; font-weight: 700; font-variant-numeric: tabular-nums; }
.p-ord-q { display: grid; gap: 6px; margin-block: 12px; font-size: 14px; font-weight: 650; }
.p-ord-q input, .p-ord-q textarea { min-height: 44px; padding: 10px 12px; border: 1px solid var(--t-border); border-radius: var(--t-radius, 10px); background: var(--t-bg); color: var(--t-text); font: inherit; font-size: 16px; font-weight: 400; }
.p-ord-seg { display: flex; gap: 6px; }
.p-ord-seg button { flex: 1; min-height: 44px; border: 1px solid var(--t-border); border-radius: 999px; background: none; color: inherit; font: inherit; cursor: pointer; }
.p-ord-seg [aria-pressed="true"] { border-color: var(--t-accent); background: var(--t-accent); color: var(--t-on-accent); }
.p-ord-send { display: flex; align-items: center; justify-content: center; inline-size: 100%; margin-top: 8px; text-decoration: none; }
.p-ord-fine { margin: 10px 0 0; font-size: 13px; line-height: 1.45; }

/* What's in store, forms pass (D-041 set 2; ordering, set 5g): a flag on the photo (New, Bestseller, Limited, Sold out),
   the price before struck through, a note and a link under the name, and Add at the card's foot in the order slot.
   A dated sold out or New ships its words; the phone sets .is-out or .is-old (visitor/time.ts). */
.p-card-pic { position: relative; }
.p-card-flag { position: absolute; inset-block-start: 8px; inset-inline-start: 8px; padding: 3px 8px; border-radius: 999px; background: var(--t-bg); color: var(--t-text); font-size: 12px; font-weight: 700; }
.p-card-flag--new { background: var(--t-accent); color: var(--t-on-accent); }
.p-card-flag--sold, .p-card.is-out .p-card-flag:not(.p-card-flag--sold), .p-card.is-old .p-card-flag--new { display: none; }
.p-card.is-out .p-card-flag--sold { display: block; background: var(--t-text); color: var(--t-bg); }
.p-card.is-out .p-tile { opacity: .55; }
.p-card.is-out .p-card-name, .p-card.is-out .p-card-price { color: var(--t-muted); }
.p-card-was { margin-inline-start: 4px; color: var(--t-muted); font-weight: 500; }
.p-card-note { font-size: 13px; color: var(--t-muted); }
.p-card-link { font-size: 13px; font-weight: 600; color: var(--t-accent-ink); }
.p-card .p-ord { inline-size: 100%; justify-content: flex-start; margin-top: 4px; }
.p-card.is-out .p-ord { display: none; }
.p-ord-add.is-word, .p-ord-in { inline-size: auto; min-inline-size: 96px; padding-inline: 14px; font-size: 14px; font-weight: 700; }
.p-ord-in { display: inline-grid; place-items: center; min-block-size: 44px; border: 0; border-radius: 999px; background: var(--t-accent); color: var(--t-on-accent); font-family: inherit; cursor: pointer; }
.p-shop-all { margin-top: 14px; }

/* Booking requests, forms pass (4c): the services, and who and how far ahead under the times */
.p-svcs { list-style: none; margin: 0 0 12px; padding: 0; }
.p-svc { display: flex; align-items: baseline; gap: 8px; padding: 8px 0; border-block-end: 1px solid var(--t-border); font-size: 15.5px; }
.p-svc-name { flex: 1; font-weight: 600; }
.p-svc-dur { color: var(--t-muted); font-size: 13px; }
.p-svc-price { font-variant-numeric: tabular-nums; }
.p-book-terms { margin: 8px 0 0; font-size: 13px; color: var(--t-muted); }
/* a time on several days is a card a day: the soonest six show (the island puts them in order) */
.p-slots > li:nth-child(n+7) { display: none; }