/* CT Nails and Spa — tokens first, then layout, then components. */

@property --spread { syntax: "<number>"; inherits: true; initial-value: 1; }

:root {
  /* Type */
  --font-display: Futura, "Futura PT", "Century Gothic", "Avenir Next", "Trebuchet MS", sans-serif;
  --font-body: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "URW Palladio L", P052, Georgia, serif;

  --step--1: 0.9375rem;
  --step-0: 1.125rem;
  --step-1: 1.375rem;
  --step-2: clamp(1.75rem, 1.3rem + 2vw, 2.625rem);
  --step-3: clamp(2.375rem, 1.5rem + 4.2vw, 4.75rem);

  /* Space */
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --band: clamp(4rem, 9vw, 7.5rem);
  --measure: 34em;

  --radius-pill: 999px;
  --ease: cubic-bezier(.2, .8, .2, 1);

  /* The nail shape: almond tip at the top, cuticle at the bottom */
  --nail-r: 50% 50% 42% 42% / 64% 64% 36% 36%;
  --bare: #F4DCD5;

  /* Nail art. Alpha masks, so one drawing works in every colour.
     All share a 100 × 210 box, the proportions of every nail on the site. */
  --art-french: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 210' preserveAspectRatio='none'%3E%3Cpath d='M0 0H100V62C72 92 28 92 0 62Z'/%3E%3C/svg%3E");
  --art-dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 210' preserveAspectRatio='none'%3E%3Cg%3E%3Ccircle cx='50' cy='18' r='7'/%3E%3Ccircle cx='24' cy='44' r='7'/%3E%3Ccircle cx='76' cy='44' r='7'/%3E%3Ccircle cx='50' cy='70' r='7'/%3E%3Ccircle cx='10' cy='84' r='7'/%3E%3Ccircle cx='90' cy='84' r='7'/%3E%3Ccircle cx='30' cy='104' r='7'/%3E%3Ccircle cx='70' cy='104' r='7'/%3E%3Ccircle cx='50' cy='136' r='7'/%3E%3Ccircle cx='12' cy='130' r='7'/%3E%3Ccircle cx='88' cy='130' r='7'/%3E%3Ccircle cx='28' cy='164' r='7'/%3E%3Ccircle cx='72' cy='164' r='7'/%3E%3Ccircle cx='50' cy='192' r='7'/%3E%3C/g%3E%3C/svg%3E");
  --art-marble: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 210' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='black' stroke-linecap='round'%3E%3Cpath stroke-width='5' d='M-6 34C22 10 34 62 58 48S92 16 108 40'/%3E%3Cpath stroke-width='2.5' d='M-6 52C16 40 30 86 54 72S88 50 108 66'/%3E%3Cpath stroke-width='6' d='M-6 112C14 84 40 138 62 110S94 92 108 118'/%3E%3Cpath stroke-width='2' d='M20 92C34 112 28 134 46 152S80 158 92 190'/%3E%3Cpath stroke-width='4' d='M-6 176C20 150 36 196 60 176S90 160 108 180'/%3E%3C/g%3E%3C/svg%3E");
  --art-hearts: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 210' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cpath id='h' d='M0 5C-7-5-17 3-11 12L0 23 11 12C17 3 7-5 0 5Z'/%3E%3C/defs%3E%3Cuse href='%23h' x='50' y='22'/%3E%3Cuse href='%23h' x='24' y='70'/%3E%3Cuse href='%23h' x='76' y='70'/%3E%3Cuse href='%23h' x='50' y='116'/%3E%3Cuse href='%23h' x='24' y='160'/%3E%3Cuse href='%23h' x='76' y='160'/%3E%3C/svg%3E");
  --art-glitter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 210' preserveAspectRatio='none'%3E%3Cpath d='M0 0H100V26C80 34 66 22 50 30S20 26 0 32Z'/%3E%3Cg%3E%3Ccircle cx='8' cy='40' r='3.4'/%3E%3Ccircle cx='22' cy='37' r='2.6'/%3E%3Ccircle cx='36' cy='42' r='3.6'/%3E%3Ccircle cx='52' cy='38' r='2.8'/%3E%3Ccircle cx='66' cy='43' r='3.4'/%3E%3Ccircle cx='80' cy='38' r='2.6'/%3E%3Ccircle cx='93' cy='42' r='3.2'/%3E%3Ccircle cx='14' cy='52' r='2.6'/%3E%3Ccircle cx='29' cy='56' r='3'/%3E%3Ccircle cx='45' cy='52' r='2.2'/%3E%3Ccircle cx='60' cy='57' r='2.8'/%3E%3Ccircle cx='74' cy='53' r='2.4'/%3E%3Ccircle cx='88' cy='57' r='3'/%3E%3Ccircle cx='6' cy='66' r='2.2'/%3E%3Ccircle cx='21' cy='72' r='2.4'/%3E%3Ccircle cx='38' cy='68' r='2'/%3E%3Ccircle cx='53' cy='74' r='2.4'/%3E%3Ccircle cx='70' cy='69' r='2'/%3E%3Ccircle cx='84' cy='74' r='2.2'/%3E%3Ccircle cx='95' cy='68' r='1.8'/%3E%3Ccircle cx='12' cy='88' r='1.8'/%3E%3Ccircle cx='31' cy='92' r='2'/%3E%3Ccircle cx='47' cy='87' r='1.6'/%3E%3Ccircle cx='63' cy='93' r='1.9'/%3E%3Ccircle cx='79' cy='88' r='1.6'/%3E%3Ccircle cx='92' cy='94' r='1.8'/%3E%3Ccircle cx='22' cy='110' r='1.5'/%3E%3Ccircle cx='41' cy='114' r='1.3'/%3E%3Ccircle cx='58' cy='109' r='1.5'/%3E%3Ccircle cx='76' cy='114' r='1.3'/%3E%3Ccircle cx='9' cy='118' r='1.2'/%3E%3Ccircle cx='33' cy='134' r='1.1'/%3E%3Ccircle cx='66' cy='136' r='1.1'/%3E%3Ccircle cx='50' cy='152' r='1'/%3E%3C/g%3E%3C/svg%3E");
  --art-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 210' preserveAspectRatio='none'%3E%3Cpath d='M0 210V158C26 120 74 120 100 158V210Z'/%3E%3C/svg%3E");
  --art-ombre: linear-gradient(to bottom, #000 6%, transparent 82%);
  --art-petals: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 210' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cg id='f'%3E%3Cellipse cy='-9' rx='5.5' ry='9'/%3E%3Cellipse cy='-9' rx='5.5' ry='9' transform='rotate(72)'/%3E%3Cellipse cy='-9' rx='5.5' ry='9' transform='rotate(144)'/%3E%3Cellipse cy='-9' rx='5.5' ry='9' transform='rotate(216)'/%3E%3Cellipse cy='-9' rx='5.5' ry='9' transform='rotate(288)'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23f' x='50' y='36'/%3E%3Cuse href='%23f' x='24' y='98'/%3E%3Cuse href='%23f' x='76' y='116'/%3E%3Cuse href='%23f' x='42' y='174'/%3E%3C/svg%3E");
  --art-stripes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 210' preserveAspectRatio='none'%3E%3Cpath fill='none' stroke='black' stroke-width='3.5' d='M-10 36L110-36M-10 66L110-6M-10 96L110 24M-10 126L110 54M-10 156L110 84M-10 186L110 114M-10 216L110 144M-10 246L110 174M-10 276L110 204M-10 306L110 234'/%3E%3C/svg%3E");

  /* Each design also has a background: an alpha tile for the page behind the
     content, and a matching divider between rows. Sizes multiply by --wall-scale. */
  --wall: .6;
  --wall-scale: 1;
  --wall-french: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 160'%3E%3Cpath fill='none' stroke='black' stroke-width='1.4' d='M0 20C60 96 180 96 240 20M-120 100C-60 176 60 176 120 100M120 100C180 176 300 176 360 100'/%3E%3C/svg%3E");
  --wall-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 180'%3E%3Cpath d='M40 25A15 15 0 1 0 40 55A18 18 0 0 1 40 25ZM130 115A15 15 0 1 0 130 145A18 18 0 0 1 130 115Z'/%3E%3C/svg%3E");
  --wall-dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56'%3E%3Ccircle cx='14' cy='14' r='2.4'/%3E%3Ccircle cx='42' cy='42' r='2.4'/%3E%3C/svg%3E");
  --wall-hearts: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cdefs%3E%3Cpath id='h' fill='none' stroke='black' stroke-width='2.4' d='M0 5C-7-5-17 3-11 12L0 23 11 12C17 3 7-5 0 5Z'/%3E%3C/defs%3E%3Cuse href='%23h' transform='translate(30 22) scale(.62)'/%3E%3Cuse href='%23h' transform='translate(90 82) scale(.62)'/%3E%3C/svg%3E");
  --wall-petals: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140'%3E%3Cdefs%3E%3Cg id='f' fill='none' stroke='black' stroke-width='1.3'%3E%3Cellipse cy='-7' rx='3.8' ry='6.4'/%3E%3Cellipse cy='-7' rx='3.8' ry='6.4' transform='rotate(72)'/%3E%3Cellipse cy='-7' rx='3.8' ry='6.4' transform='rotate(144)'/%3E%3Cellipse cy='-7' rx='3.8' ry='6.4' transform='rotate(216)'/%3E%3Cellipse cy='-7' rx='3.8' ry='6.4' transform='rotate(288)'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23f' x='35' y='35'/%3E%3Cuse href='%23f' x='105' y='105'/%3E%3C/svg%3E");
  --wall-stripes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath fill='none' stroke='black' stroke-width='1' d='M-7 35L35-7M-7 7L7-7M21 35L35 21'/%3E%3C/svg%3E");
  --wall-marble: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 900'%3E%3Cg fill='none' stroke='black' stroke-linecap='round'%3E%3Cpath stroke-width='2.6' d='M0 180C180 90 320 300 520 210S860 60 1000 170S1120 230 1200 180'/%3E%3Cpath stroke-width='1.1' d='M520 210C560 290 500 360 590 420S800 420 860 520'/%3E%3Cpath stroke-width='1.8' d='M0 560C140 470 300 640 460 570S760 450 920 560S1100 620 1200 560'/%3E%3Cpath stroke-width='.9' d='M250 515C300 600 240 680 330 730S470 770 520 860'/%3E%3Cpath stroke-width='1.2' d='M0 800C200 740 340 860 560 800S920 720 1200 800'/%3E%3Cpath stroke-width='.9' d='M1000 170C1030 240 960 300 1030 360'/%3E%3C/g%3E%3C/svg%3E");
  --wall-glitter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 320'%3E%3Ccircle cx='18' cy='26' r='1.4'/%3E%3Ccircle cx='64' cy='12' r='.8'/%3E%3Ccircle cx='108' cy='44' r='1.8'/%3E%3Ccircle cx='150' cy='20' r='1'/%3E%3Ccircle cx='204' cy='36' r='1.3'/%3E%3Ccircle cx='250' cy='14' r='.9'/%3E%3Ccircle cx='296' cy='48' r='1.6'/%3E%3Ccircle cx='40' cy='78' r='1'/%3E%3Ccircle cx='86' cy='98' r='1.3'/%3E%3Ccircle cx='132' cy='82' r='.8'/%3E%3Ccircle cx='178' cy='104' r='1.7'/%3E%3Ccircle cx='226' cy='84' r='1'/%3E%3Ccircle cx='272' cy='110' r='1.2'/%3E%3Ccircle cx='12' cy='134' r='1.7'/%3E%3Ccircle cx='58' cy='152' r='.9'/%3E%3Ccircle cx='112' cy='142' r='1.2'/%3E%3Ccircle cx='160' cy='166' r='.8'/%3E%3Ccircle cx='212' cy='150' r='1.5'/%3E%3Ccircle cx='304' cy='160' r='.9'/%3E%3Ccircle cx='32' cy='204' r='1.1'/%3E%3Ccircle cx='84' cy='216' r='1.6'/%3E%3Ccircle cx='136' cy='198' r='1'/%3E%3Ccircle cx='190' cy='226' r='1.3'/%3E%3Ccircle cx='244' cy='204' r='.8'/%3E%3Ccircle cx='290' cy='232' r='1.5'/%3E%3Ccircle cx='52' cy='270' r='.9'/%3E%3Ccircle cx='104' cy='288' r='1.3'/%3E%3Ccircle cx='156' cy='266' r='1.6'/%3E%3Ccircle cx='214' cy='296' r='1'/%3E%3Ccircle cx='266' cy='274' r='1.2'/%3E%3Cpath d='M250 128l1.6 7.4 7.4 1.6-7.4 1.6-1.6 7.4-1.6-7.4-7.4-1.6 7.4-1.6ZM70 176l1.3 5.7 5.7 1.3-5.7 1.3-1.3 5.7-1.3-5.7-5.7-1.3 5.7-1.3ZM180 56l1.2 4.8 4.8 1.2-4.8 1.2-1.2 4.8-1.2-4.8-4.8-1.2 4.8-1.2Z'/%3E%3C/svg%3E");

  --rule-smile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14'%3E%3Cpath fill='none' stroke='black' stroke-width='1.6' d='M0 2C60 18 140 18 200 2'/%3E%3C/svg%3E");
  --rule-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14'%3E%3Cpath fill='none' stroke='black' stroke-width='1.6' d='M0 12C60-4 140-4 200 12'/%3E%3C/svg%3E");
  --rule-hearts: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 14'%3E%3Cpath fill='none' stroke='black' stroke-width='3' transform='translate(22 1) scale(.5)' d='M0 5C-7-5-17 3-11 12L0 23 11 12C17 3 7-5 0 5Z'/%3E%3C/svg%3E");
  --rule-petals: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 14'%3E%3Cg transform='translate(22 7)'%3E%3Cellipse cy='-3.6' rx='1.9' ry='3.2'/%3E%3Cellipse cy='-3.6' rx='1.9' ry='3.2' transform='rotate(72)'/%3E%3Cellipse cy='-3.6' rx='1.9' ry='3.2' transform='rotate(144)'/%3E%3Cellipse cy='-3.6' rx='1.9' ry='3.2' transform='rotate(216)'/%3E%3Cellipse cy='-3.6' rx='1.9' ry='3.2' transform='rotate(288)'/%3E%3C/g%3E%3C/svg%3E");
  --rule-marble: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 12'%3E%3Cpath fill='none' stroke='black' stroke-width='1.3' d='M0 6C40 0 90 12 140 6S240 0 280 6'/%3E%3C/svg%3E");
  --rule-glitter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 8'%3E%3Ccircle cx='5' cy='3' r='1'/%3E%3Ccircle cx='17' cy='6' r='.7'/%3E%3Ccircle cx='28' cy='2' r='1.2'/%3E%3Ccircle cx='41' cy='5' r='.8'/%3E%3Ccircle cx='53' cy='3' r='1'/%3E%3C/svg%3E");
}

/* ---------- Shades: each one is a whole theme ----------
   These live on <html> for the page, and on each picker button so that button
   wears its own colour. --lacquer is the polish; --accent is that hue dark
   enough to read as text on --ground. */

[data-shade="cherry"] {
  --deep: #2B1631;  --on-deep: #F6E7E4;  --on-deep-soft: #D9C7CC;
  --ground: #F6E7E4;  --raised: #FFF8F6;  --ink: #2B1631;  --muted: #5F4A5E;
  --lacquer: #A3122A;  --lacquer-press: #7E0C1F;  --on-lacquer: #FFFFFF;
  --accent: #8E0F24;  --pour: #A3122A;  --finger: #2B1631;  --art-tone: #FFF4F0;
}
[data-shade="honey"] {
  --deep: #4A2A06;  --on-deep: #FBEFD3;  --on-deep-soft: #E6D3A8;
  --ground: #FBEFD3;  --raised: #FFF9EA;  --ink: #33200A;  --muted: #6B5226;
  --lacquer: #C98A2B;  --lacquer-press: #B37A22;  --on-lacquer: #2A1804;
  --accent: #80520C;  --pour: #C98A2B;  --finger: #4A2A06;  --art-tone: #FFF6DC;
}
[data-shade="brick"] {
  --deep: #3B1610;  --on-deep: #F3E3D8;  --on-deep-soft: #DCC4B6;
  --ground: #F3E3D8;  --raised: #FCF4EE;  --ink: #2E1410;  --muted: #6B4A3E;
  --lacquer: #8A3B2C;  --lacquer-press: #6F2E22;  --on-lacquer: #FFFFFF;
  --accent: #8A3B2C;  --pour: #8A3B2C;  --finger: #3B1610;  --art-tone: #F6DCCB;
}
[data-shade="sage"] {
  --deep: #1F3527;  --on-deep: #E6ECDF;  --on-deep-soft: #C4D0BE;
  --ground: #E6ECDF;  --raised: #F6F8F1;  --ink: #1C2B21;  --muted: #3F5844;
  --lacquer: #5F7A62;  --lacquer-press: #4C6450;  --on-lacquer: #FFFFFF;
  --accent: #3F5C46;  --pour: #5F7A62;  --finger: #1F3527;  --art-tone: #F2F6E8;
}
[data-shade="milk"] {
  --deep: #F3D5CF;  --on-deep: #3D1F28;  --on-deep-soft: #6A434E;
  --ground: #FBEDEA;  --raised: #FFFAF8;  --ink: #3D1F28;  --muted: #7A4F5A;
  --lacquer: #EBC9C3;  --lacquer-press: #E0B6AF;  --on-lacquer: #3D1F28;
  --accent: #9A3F52;  --pour: #D79F97;  --finger: #6F3F4C;  --art-tone: #B34A63;
}
[data-shade="lilac"] {
  --deep: #2A2146;  --on-deep: #ECE6F3;  --on-deep-soft: #CFC6E0;
  --ground: #ECE6F3;  --raised: #FAF7FD;  --ink: #251D3C;  --muted: #534870;
  --lacquer: #6F4FA0;  --lacquer-press: #5A3E86;  --on-lacquer: #FFFFFF;
  --accent: #5A3E86;  --pour: #6F4FA0;  --finger: #2A2146;  --art-tone: #F4EEFB;
}
[data-shade="pond"] {
  --deep: #0F2C3A;  --on-deep: #E1EDF0;  --on-deep-soft: #BFD3D9;
  --ground: #E1EDF0;  --raised: #F5FAFB;  --ink: #12303D;  --muted: #3A5A67;
  --lacquer: #1F6478;  --lacquer-press: #174E5F;  --on-lacquer: #FFFFFF;
  --accent: #1A5668;  --pour: #1F6478;  --finger: #0F2C3A;  --art-tone: #EAF6F7;
}
[data-shade="noir"] {
  --deep: #1A191E;  --on-deep: #EFEAE6;  --on-deep-soft: #CBC5C0;
  --ground: #EFEAE6;  --raised: #FBF9F7;  --ink: #1F1E24;  --muted: #55514F;
  --lacquer: #26252B;  --lacquer-press: #45434C;  --on-lacquer: #FFFFFF;
  --accent: #26252B;  --pour: #26252B;  --finger: #1A191E;  --art-tone: #E8DCC4;
}

/* Resolved on <html>, so picker buttons keep the page's value, not their own */
html { --page-on-deep: var(--on-deep); }

/* ---------- Designs: same attribute on <html> and on each design button ---------- */

[data-art] { --art-on: 1; --wall-k: 1; --rule: linear-gradient(#000, #000); --rule-size: 100% 2px; --rule-h: 2px; }
[data-art="plain"] {
  --art-on: 0; --wall-k: 0;
  --wall-img: linear-gradient(#000, #000); --wall-size: 100% 100%;
}
[data-art="french"] {
  --art: var(--art-french); --wall-k: 1.5;
  --wall-img: var(--wall-french); --wall-size: calc(240px * var(--wall-scale)) calc(160px * var(--wall-scale));
  --rule: var(--rule-smile); --rule-size: 200px 14px; --rule-h: 14px;
}
[data-art="moon"] {
  --art: var(--art-moon); --wall-k: .9;
  --wall-img: var(--wall-moon); --wall-size: calc(180px * var(--wall-scale));
  --rule: var(--rule-moon); --rule-size: 200px 14px; --rule-h: 14px;
}
[data-art="ombre"] {
  --art: var(--art-ombre); --wall-k: .9;
  --wall-img: linear-gradient(to bottom, #000, transparent 50%, #000); --wall-size: 100% calc(200vh * var(--wall-scale));
  --rule: linear-gradient(to right, #000, transparent);
}
[data-art="dots"] {
  --art: var(--art-dots);
  --wall-img: var(--wall-dots); --wall-size: calc(56px * var(--wall-scale));
  --rule: radial-gradient(circle, #000 0 1.6px, transparent 2px); --rule-size: 12px 6px; --rule-h: 6px;
}
[data-art="hearts"] {
  --art: var(--art-hearts); --wall-k: 1.5;
  --wall-img: var(--wall-hearts); --wall-size: calc(120px * var(--wall-scale));
  --rule: var(--rule-hearts); --rule-size: 44px 14px; --rule-h: 14px;
}
[data-art="petals"] {
  --art: var(--art-petals); --wall-k: 1.5;
  --wall-img: var(--wall-petals); --wall-size: calc(140px * var(--wall-scale));
  --rule: var(--rule-petals); --rule-size: 44px 14px; --rule-h: 14px;
}
[data-art="stripes"] {
  --art: var(--art-stripes); --wall-k: 1.2;
  --wall-img: var(--wall-stripes); --wall-size: calc(28px * var(--wall-scale));
  --rule: linear-gradient(#000 0 1px, transparent 1px 4px, #000 4px 5px); --rule-size: 100% 5px; --rule-h: 5px;
}
[data-art="marble"] {
  --art: var(--art-marble); --wall-k: 1.6;
  --wall-img: var(--wall-marble); --wall-size: calc(1200px * var(--wall-scale)) calc(900px * var(--wall-scale));
  --rule: var(--rule-marble); --rule-size: 280px 12px; --rule-h: 12px;
}
[data-art="glitter"] {
  --art: var(--art-glitter); --wall-k: 1.3;
  --wall-img: var(--wall-glitter); --wall-size: calc(320px * var(--wall-scale));
  --rule: var(--rule-glitter); --rule-size: 60px 8px; --rule-h: 8px;
}

/* ---------- Detail colour: the tip, dots or veins. Classic is each shade's own ---------- */

[data-detail="classic"] { --detail-fill: initial; }
[data-detail="gold"] { --detail-fill: linear-gradient(135deg, #F4E2AE, #BE9337 42%, #F7EBC4 60%, #AD832C); }
[data-detail="rose"] { --detail-fill: linear-gradient(135deg, #F7D9CC, #C4806F 42%, #FBE6DC 60%, #B26E5F); }
[data-detail="silver"] { --detail-fill: linear-gradient(135deg, #F4F5F7, #A3A9B2 42%, #FBFCFD 60%, #8F96A0); }
[data-detail="ink"] { --detail-fill: #1F1E24; }

/* ---------- Finish: what light does on every nail and on the background ---------- */

[data-finish="gloss"] { --sheen-on: 1; --finish-sheen: none; --glint-a: .55; }
[data-finish="matte"] { --sheen-on: 0; --finish-sheen: linear-gradient(rgba(255, 255, 255, .1), rgba(255, 255, 255, .1)); --glint-a: .3; }
[data-finish="pearl"] {
  --sheen-on: 1; --glint-a: .7;
  --finish-sheen: linear-gradient(115deg, transparent 12%, rgba(255, 212, 234, .42) 38%, rgba(194, 226, 255, .42) 58%, rgba(236, 218, 255, .34) 72%, transparent 92%);
}

/* ---------- Shape: every nail, plus the corners of the site's buttons ---------- */

[data-shape="almond"] { --nail-r: 50% 50% 42% 42% / 64% 64% 36% 36%; --tip-x-end: 50%; --tip-y-end: 64%; }
[data-shape="round"] { --nail-r: 50% 50% 42% 42% / 25% 25% 36% 36%; --tip-x-end: 50%; --tip-y-end: 25%; }
[data-shape="square"] { --nail-r: 16% 16% 42% 42% / 7% 7% 36% 36%; --tip-x-end: 16%; --tip-y-end: 7%; --radius-pill: .6rem; }

.art {
  position: absolute;
  inset: 0;
  background: var(--detail-fill, var(--art-tone));
  opacity: var(--art-on, 1);
  mask: var(--art) center / 100% 100% no-repeat;
}

/* ---------- The wall: the chosen design, behind the whole page ----------
   Tones stay low so body text keeps its contrast at full strength. Under the
   pointer the .glint shows the same tile in the detail colour, lined up with
   the wall by --gx and --gy. It is a small fixed-size box, so moving it repaints
   a patch and not the page. */

.wall {
  --gs: min(44rem, 92vw);
  --glint-fill: var(--detail-fill, var(--wall-ink));
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: clip;
  pointer-events: none;
}
.wall--light { --wall-ink: color-mix(in srgb, var(--lacquer) 55%, var(--ink)); }
.wall--dark { --wall-ink: var(--on-deep); }
/* Reaches up behind the masthead and out to both screen edges */
.wall--hero { --wall-over: 12rem; inset: calc(var(--wall-over) * -1) calc(50% - 50vw) 0; }
[data-finish="pearl"] .wall { --glint-fill: linear-gradient(115deg, #F7C9DD, #CFE3FF 40%, #E7D4FF 65%, #FBE6C8); }

.wall::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--wall-ink);
  opacity: calc(var(--wall) * var(--wall-k) * .16);
  mask: var(--wall-img) 0 0 / var(--wall-size) repeat;
}

/* French and half moon draw the nail itself across the dark bands: a tip
   curving down from the top of the band, or a moon rising from its foot */
.wall--dark::after {
  content: "";
  position: absolute;
  left: -12%;
  right: -12%;
  display: none;
  height: calc(var(--wall-over, 0rem) + clamp(5rem, 10vw, 8.5rem));
  background: var(--detail-fill, var(--art-tone));
  opacity: calc(var(--wall) * .3);
}
[data-art="french"] .wall--dark::after { display: block; top: 0; border-radius: 0 0 50% 50% / 0 0 100% 100%; }
[data-art="moon"] .wall--dark::after {
  display: block;
  bottom: 0;
  height: clamp(5rem, 10vw, 8.5rem);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

.glint {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  width: var(--gs);
  height: var(--gs);
  opacity: 0;
  transform: translate3d(var(--gx, 0), var(--gy, 0), 0);
  transition: opacity .45s var(--ease), scale .5s var(--ease);
}
.motion .glint { display: block; }
.glint.is-lit { opacity: 1; }
.glint.is-pressed { scale: 1.3; }
/* The soft pool of light, then the pattern catching it */
.glint::before, .glint::after { content: ""; position: absolute; inset: 0; }
.glint::before {
  background: radial-gradient(closest-side, color-mix(in srgb, var(--wall-ink) 14%, transparent), transparent);
}
.glint::after {
  background: var(--glint-fill);
  opacity: calc(var(--glint-a, .55) * min(1, var(--wall-k) + .4) * min(1, var(--wall) * 2));
  mask-image: radial-gradient(closest-side, #000 15%, transparent), var(--wall-img);
  mask-size: 100% 100%, var(--wall-size);
  mask-repeat: no-repeat, repeat;
  mask-position: 0 0, calc(var(--gx, 0px) * -1) calc(var(--gy, 0px) * -1);
  mask-composite: intersect;
}
[data-art="plain"] .glint::after { display: none; }

/* ---------- Colour change ---------- */

::view-transition-old(root),
::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { z-index: 2; }

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  position: relative;
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.62;
  text-rendering: optimizeLegibility;
  overflow-x: clip; /* the hero's full-bleed ::before uses 100vw */
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.012em;
  margin: 0;
}

p { margin: 0 0 1em; max-width: var(--measure); }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: 1rem; top: -4rem;
  z-index: 10;
  padding: .6rem 1rem;
  background: var(--raised);
  color: var(--ink);
  font-family: var(--font-display);
  border-radius: var(--radius-pill);
}
.skip:focus { top: 1rem; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: .7rem 1.5rem;
  border: 2px solid var(--lacquer);
  border-radius: var(--radius-pill);
  background: var(--lacquer);
  color: var(--on-lacquer);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: .01em;
  text-decoration: none;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.btn:hover { background: var(--lacquer-press); border-color: var(--lacquer-press); }
.btn--small { min-height: 2.5rem; padding: .4rem 1.1rem; font-size: 1rem; }
.btn--block { width: 100%; }
html:not(.js) [data-studio-open] { display: none; }

/* ---------- Dark top: masthead + hero ---------- */

/* Sits on the hero's own background, so the wall runs unbroken behind both */
.masthead { position: relative; z-index: 1; color: var(--on-deep); }
.masthead__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  max-width: 76rem;
  margin: 0 auto;
  padding: 1.1rem var(--gutter);
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.wordmark__mark { width: 1.4rem; height: 1.4rem; fill: var(--lacquer); stroke: var(--on-deep); stroke-width: 1.5; }
.wordmark__amp { font-family: var(--font-body); font-style: italic; }

.nav { margin-left: auto; }
.nav ul { display: flex; gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.nav a { font-family: var(--font-display); font-size: 1rem; text-decoration: none; }
.nav a:hover { text-decoration: underline; }
.masthead .btn { background: var(--on-deep); border-color: var(--on-deep); color: var(--deep); }
.masthead .btn:hover { background: var(--on-deep-soft); border-color: var(--on-deep-soft); }
.masthead :focus-visible, .hero :focus-visible, .footer :focus-visible { outline-color: var(--on-deep); }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  max-width: 76rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 5vw, 4.5rem) var(--gutter) clamp(3rem, 6vw, 5rem);
  color: var(--on-deep);
}
/* Full-bleed dark background behind a centred hero */
.hero { position: relative; isolation: isolate; }
.hero::before {
  content: "";
  position: absolute;
  inset: -12rem calc(50% - 50vw) 0;
  z-index: -1;
  background: var(--deep);
}

.status {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: 1.5rem;
  padding: .35rem .9rem .35rem .75rem;
  border: 1px solid color-mix(in srgb, var(--on-deep) 45%, transparent);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: var(--step--1);
}
.status::before {
  content: "";
  width: .55rem; height: .55rem;
  border-radius: 50%;
  background: var(--on-deep-soft);
}
.status.is-open::before { background: #4FBF78; }

.hero__title {
  font-size: var(--step-3);
  max-width: 13ch;
  margin-bottom: 1.5rem;
  text-wrap: balance;
}
.hero__lede { font-size: var(--step-1); line-height: 1.5; max-width: 30em; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 2rem 0 1.75rem; }
.hero .btn { background: var(--on-deep); border-color: var(--on-deep); color: var(--deep); }
.hero .btn:hover { background: var(--on-deep-soft); border-color: var(--on-deep-soft); }
.hero .btn--ghost { background: transparent; color: var(--on-deep); }
.hero .btn--ghost:hover { background: color-mix(in srgb, var(--on-deep) 12%, transparent); color: var(--on-deep); }
.hero--single { grid-template-columns: minmax(0, 1fr); min-height: 60vh; }
.hero__aka { font-size: var(--step--1); color: var(--on-deep-soft); font-style: italic; }

/* ---------- Signature: the polish fan ---------- */

.fan {
  --w: 80px;
  --h: 168px;
  --pivot: 300px;
  --fan-step: 10deg;
  position: relative;
  display: grid;
  justify-items: center;
  text-align: center;
}
.fan__disc {
  position: absolute;
  top: 0;
  left: 50%;
  width: min(25rem, 92%);
  aspect-ratio: 1;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--lacquer) 55%, transparent), transparent 70%);
}
.fan__nails {
  position: relative;
  width: 100%;
  height: calc(var(--h) + 7rem);
}
.motion .fan__nails { animation: fan-open 1.1s var(--ease) .15s backwards; }
@keyframes fan-open { from { --spread: 0; } }

.nail {
  --r: calc(var(--i, 0) * var(--fan-step));
  --lift: 0px;
  position: absolute;
  left: 50%;
  bottom: 1.5rem;
  width: var(--w);
  height: var(--h);
  margin-left: calc(var(--w) / -2);
  padding: 0;
  overflow: hidden;
  border: 2px solid rgba(255, 248, 246, .8);
  border-radius: var(--nail-r);
  background: var(--lacquer);
  cursor: pointer;
  transform-origin: 50% var(--pivot);
  transform: rotate(calc(var(--r) * var(--spread) * (1 + var(--hp, 0) * .5))) translateY(var(--lift));
  transition: transform .45s var(--ease), box-shadow .3s var(--ease);
  box-shadow: 0 14px 28px rgba(0, 0, 0, .28);
}
/* Lacquer sheen */
.nail::after {
  content: "";
  position: absolute;
  top: 12%;
  left: 22%;
  width: 18%;
  height: 46%;
  border-radius: 50%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0));
  opacity: var(--sheen-on, 1);
}
/* The finish lies over the art on every nail */
.nail::before, .minail::after, .bignail::after, .tip::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--finish-sheen, none);
  pointer-events: none;
}
.bignail::after { opacity: var(--coat); }
.nail:hover { --lift: -10px; }
.nail[aria-pressed="true"] {
  --lift: -26px;
  z-index: 1;
  border-color: #fff;
  box-shadow: 0 22px 36px rgba(0, 0, 0, .38), 0 0 0 4px rgba(255, 248, 246, .25);
}
.nail:focus-visible { outline: 3px solid var(--page-on-deep); outline-offset: 5px; border-radius: var(--nail-r); }

.nail--1 { --i: -3.5; }
.nail--2 { --i: -2.5; }
.nail--3 { --i: -1.5; }
.nail--4 { --i: -.5; }
.nail--5 { --i: .5; }
.nail--6 { --i: 1.5; }
.nail--7 { --i: 2.5; }
.nail--8 { --i: 3.5; }

.fan__caption {
  min-height: 2.8em;
  margin: .5rem auto .75rem;
  font-size: var(--step-1);
  line-height: 1.4;
}
.fan__caption strong { font-family: var(--font-display); font-weight: 500; }
.fan__hint { margin: 1rem auto 0; font-size: var(--step--1); color: var(--on-deep-soft); }
.fan__more { margin-top: .9rem; }
.fan .tip { box-shadow: 0 0 0 1px color-mix(in srgb, var(--on-deep) 45%, transparent); }

/* Design picker */
.artpick { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; }
.artpick__btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 2.75rem;
  padding: .25rem .8rem .25rem .55rem;
  border: 2px solid color-mix(in srgb, currentColor 35%, transparent);
  border-radius: var(--radius-pill);
  background: transparent;
  color: inherit;
  font-family: var(--font-display);
  font-size: var(--step--1);
  cursor: pointer;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.artpick__btn:hover { border-color: currentColor; }
.artpick__btn[aria-pressed="true"] { border-color: currentColor; background: color-mix(in srgb, currentColor 14%, transparent); }
.tip {
  position: relative;
  display: block;
  flex: none;
  width: 1rem;
  height: 2.1rem;
  overflow: hidden;
  border-radius: var(--nail-r);
  background: var(--lacquer);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 25%, transparent);
}
.artpick--icons { justify-content: flex-start; }
.fan .artpick--icons { justify-content: center; max-width: 17rem; }
.artpick--icons .artpick__btn { justify-content: center; width: 2.75rem; padding: 0; }
.swatch {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: var(--detail-fill, var(--lacquer));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 25%, transparent);
}

/* ---------- The pour: lacquer runs out of the hero as you scroll ---------- */

.drips {
  position: relative;
  z-index: 2;
  height: 0;
  pointer-events: none;
}
.drips svg { display: block; width: 100%; height: clamp(110px, 17vw, 240px); }
.drips path { fill: var(--pour); }

/* ---------- One nail, painted by the scrollbar ----------
   Without .motion (no JS, or reduced motion) this is a plain list next to a
   finished nail. The defaults below are that finished state; site.js overwrites
   them as the visitor scrolls. */

.ritual {
  --shape: 1; --cut: 1; --k1: 1; --k2: 1; --k3: 1; --design: 1; --coat: 1; --sweep: 0;
  --nh: min(56svh, 30rem);
  scroll-margin-top: 1rem;
}
.ritual__stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
  max-width: 76rem;
  margin: 0 auto;
  padding: var(--band) var(--gutter) 0;
}
.ritual__text h2 { font-size: var(--step-3); max-width: 14ch; margin-bottom: 2rem; }

.steps { margin: 0 0 1.75rem; padding: 0; list-style: none; display: grid; gap: 1.5rem; }
.step h3 { font-size: var(--step-2); margin-bottom: .5rem; }
.step p { margin: 0; }
.step .step__count { margin-bottom: .35rem; font-family: var(--font-display); font-size: var(--step--1); color: var(--accent); }

.motion .ritual { height: 480svh; }
.motion .ritual__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  padding-top: clamp(6rem, 16vh, 9rem);
  padding-bottom: 0;
  overflow: clip;
}
.motion .steps { gap: 0; }
.motion .step {
  grid-area: 1 / 1;
  opacity: 0;
  translate: 0 .75rem;
  transition: opacity .3s var(--ease), translate .3s var(--ease);
}
.motion .step.is-active { opacity: 1; translate: 0 0; }

.hand { position: relative; align-self: end; height: calc(var(--nh) * 1.25); }
.finger {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: calc(var(--nh) * .64);
  height: var(--nh);
  translate: -50% 0;
  border-radius: 50% 50% 0 0 / 24% 24% 0 0;
  background: var(--finger);
}
.bignail-wrap {
  position: absolute;
  left: 50%;
  bottom: calc(var(--nh) * .25);
  width: calc(var(--nh) * .476);
  height: var(--nh);
  translate: -50% 0;
}
.bignail {
  --tip-x: calc(14% + var(--shape) * (var(--tip-x-end, 50%) - 14%));
  --tip-y: calc(8% + var(--shape) * (var(--tip-y-end, 64%) - 8%));
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--bare);
  border-radius: var(--tip-x) var(--tip-x) 42% 42% / var(--tip-y) var(--tip-y) 36% 36%;
  box-shadow: 0 0 0 .3rem color-mix(in srgb, var(--bare) 22%, transparent);
}
.bignail__cuticle {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 0;
  height: 20%;
  border-radius: 50% 50% 0 0;
  background: #C98F88;
  transform-origin: bottom;
  transform: scaleY(calc(1 - var(--cut)));
}
.stroke {
  position: absolute;
  bottom: -3%;
  height: 106%;
  border-radius: 50% 50% 0 0 / 6% 6% 0 0;
  background: var(--lacquer);
  transform-origin: bottom;
}
.stroke--1 { left: 26%; width: 48%; transform: scaleY(var(--k1)); }
.stroke--2 { left: -6%; width: 42%; transform: scaleY(var(--k2)); }
.stroke--3 { left: 64%; width: 42%; transform: scaleY(var(--k3)); }
.bignail .art { clip-path: inset(0 0 calc((1 - var(--design)) * 100%) 0); }
.bignail__sweep {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, transparent 30%, rgba(255, 255, 255, .6) 50%, transparent 70%);
  opacity: var(--sweep);
  transform: translateY(calc((.5 - var(--coat)) * 200%));
}
.bignail__gloss {
  position: absolute;
  top: 10%;
  left: 20%;
  width: 16%;
  height: 50%;
  border-radius: 50%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0));
  opacity: calc(var(--coat) * var(--sheen-on, 1));
}
.file {
  position: absolute;
  top: -5%;
  left: -8%;
  width: 116%;
  height: 7%;
  border-radius: var(--radius-pill);
  background: repeating-linear-gradient(90deg, #C9B5BE 0 3px, #8F7A84 3px 5px);
  opacity: 0;
}
/* Origin is the bristle tip; the handle reaches up off-stage */
.brush {
  position: absolute;
  top: 0;
  left: 0;
  width: 1.1rem;
  height: 70svh;
  margin: -70svh 0 0 -.55rem;
  transform-origin: 50% 100%;
  opacity: 0;
  background: linear-gradient(to bottom, var(--ink) 0 88%, #BDBDBD 88% 91%, var(--lacquer) 91%);
  border-radius: .3rem .3rem 50% 50%;
  transition: opacity .2s linear;
}
.spark {
  position: absolute;
  width: 2.4rem;
  aspect-ratio: 1;
  background: var(--accent);
  clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%);
  transform: scale(clamp(0, var(--coat) * 3 - 2, 1)) rotate(calc(var(--coat) * 90deg));
}
.spark--1 { top: -6%; right: -24%; }
.spark--2 { top: 16%; left: -34%; width: 1.5rem; }
.spark--3 { top: 34%; right: -36%; width: 1.25rem; }

/* ---------- Light bands ---------- */

.band {
  max-width: 76rem;
  margin: 0 auto;
  padding: var(--band) var(--gutter);
  scroll-margin-top: 1rem;
}
.band__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  align-items: end;
  gap: 1rem 3rem;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}
.band__head h2 { font-size: var(--step-2); }
.band__head p { margin: 0; color: var(--muted); }

/* A nail that paints itself as it comes into view */
.minail {
  --fill: 1;
  position: relative;
  display: block;
  flex: none;
  width: 4rem;
  height: 8.4rem;
  overflow: hidden;
  border-radius: var(--nail-r);
  background: var(--bare);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ink) 16%, transparent);
}
.minail__coat {
  position: absolute;
  inset: -2% 0;
  background: var(--lacquer);
  transform-origin: bottom;
  transform: scaleY(var(--fill));
}
.minail .art { opacity: calc(var(--art-on, 1) * clamp(0, var(--fill) * 3 - 2, 1)); }

/* Services menu */
.menu { margin: 0; padding: 0; list-style: none; }
.menu__item {
  position: relative;
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 0 clamp(1.25rem, 4vw, 3.5rem);
  padding: clamp(1.25rem, 3vw, 2rem) 0;
}
/* Row dividers are drawn in the chosen design */
.menu__item::before, .menu__note::before, .visit::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--rule-h, 2px);
  background: color-mix(in srgb, var(--ink) 26%, transparent);
  mask: var(--rule) left center / var(--rule-size) repeat-x;
}
.menu__item h3 { font-size: var(--step-3); }
.menu__item p { margin: 0; }
.menu__note {
  position: relative;
  margin-top: 0;
  padding-top: 1.5rem;
  font-style: italic;
  max-width: none;
}

/* Visit */
.visit { position: relative; }
.visit__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.hours {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 .3rem;
  font-family: var(--font-display);
  font-size: var(--step-1);
}
.hours th, .hours td { padding: .55rem 1.1rem; text-align: left; font-weight: 400; }
.hours td { text-align: right; white-space: nowrap; }
.hours th { border-radius: var(--radius-pill) 0 0 var(--radius-pill); }
.hours td { border-radius: 0 var(--radius-pill) var(--radius-pill) 0; }
.hours tr.is-today th, .hours tr.is-today td { background: var(--lacquer); color: var(--on-lacquer); }
.hours tr.is-today th::after { content: " (today)"; font-size: .75em; }

.visit__where address { font-style: normal; font-family: var(--font-display); font-size: var(--step-1); line-height: 1.35; margin-bottom: 1rem; }
.visit__line { display: block; }
.link-strong { font-family: var(--font-display); font-size: var(--step-2); color: var(--accent); text-decoration: none; }
.link-strong:hover { text-decoration: underline; }
.visit__links { margin: 1.5rem 0 0; padding: 0; list-style: none; display: grid; gap: .6rem; }
.visit__links a { color: var(--accent); }

/* Tina */
.tina {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.tina__text h2 { font-size: var(--step-2); margin-bottom: 1.5rem; max-width: 14ch; }
.tina__text .btn { margin-top: 1rem; }

/* Photo frames are three nails, drifting apart at different speeds */
.gallery {
  --gp: .5;
  --drift-k: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.ph { margin: 0; }
.motion .ph { transform: translateY(calc((var(--gp) - .5) * var(--drift, 0px) * var(--drift-k))); }
.motion .ph:nth-child(1) { --drift: 70px; }
.motion .ph:nth-child(2) { --drift: -90px; }
.motion .ph:nth-child(3) { --drift: 130px; }
.ph__frame {
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 4.6;
  padding: 1rem;
  border: 2px dashed color-mix(in srgb, var(--muted) 60%, transparent);
  border-radius: var(--nail-r);
  background:
    repeating-linear-gradient(135deg, var(--raised) 0 14px, color-mix(in srgb, var(--lacquer) 22%, var(--raised)) 14px 28px);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--step--1);
  text-align: center;
}
.ph img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4.6; object-fit: cover; border-radius: var(--nail-r); }
.ph figcaption { margin-top: .5rem; font-size: var(--step--1); color: var(--muted); text-align: center; }

/* Your set */
.yourset { position: relative; isolation: isolate; background: var(--deep); color: var(--on-deep); }
.yourset__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
  max-width: 76rem;
  margin: 0 auto;
  padding: var(--band) var(--gutter);
}
.yourset__nails { display: flex; align-items: flex-end; justify-content: center; gap: clamp(.4rem, 1.5vw, 1rem); }
.minail--rise {
  width: clamp(3rem, 7vw, 5.5rem);
  height: auto;
  aspect-ratio: 100 / 210;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--on-deep) 30%, transparent);
}
.minail--rise:nth-child(1) { margin-bottom: 1rem; scale: .86; transform-origin: bottom; }
.minail--rise:nth-child(2) { margin-bottom: 3.5rem; }
.minail--rise:nth-child(3) { margin-bottom: 4.5rem; }
.minail--rise:nth-child(4) { margin-bottom: 3.25rem; }
.minail--rise:nth-child(5) { scale: .74; transform-origin: bottom; }
.motion .minail--rise { transform: translateY(calc((1 - var(--fill)) * 3rem)); }
.yourset h2 { font-size: var(--step-3); margin-bottom: 1.25rem; text-wrap: balance; }
.yourset .btn { background: var(--on-deep); border-color: var(--on-deep); color: var(--deep); }
.yourset .btn:hover { background: var(--on-deep-soft); border-color: var(--on-deep-soft); }
.yourset .btn--ghost { margin: .5rem 0 0 .25rem; background: transparent; color: var(--on-deep); }
.yourset .btn--ghost:hover { background: color-mix(in srgb, var(--on-deep) 12%, transparent); color: var(--on-deep); }
.yourset :focus-visible { outline-color: var(--on-deep); }

/* Footer */
.footer { background: var(--deep); color: var(--on-deep); }
.footer__inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 2rem;
  max-width: 76rem;
  margin: 0 auto;
  padding: 3.5rem var(--gutter) 3rem;
  font-size: var(--step--1);
}
.footer__name { font-family: var(--font-display); font-size: var(--step-1); }
.footer__small { grid-column: 1 / -1; color: var(--on-deep-soft); margin: 0; }

/* The shade picker that follows you down the page */
.dock { display: none; }
.js .dock {
  position: fixed;
  right: .4rem;
  top: 50%;
  z-index: 5;
  display: grid;
  gap: .3rem;
  padding: .4rem .25rem;
  border-radius: var(--radius-pill);
  background: var(--raised);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ink) 14%, transparent);
  translate: 3.5rem -50%;
  visibility: hidden;
  transition: translate .4s var(--ease), visibility .4s;
}
.js .dock.is-on { translate: 0 -50%; visibility: visible; }
.dock__nail {
  width: 1.75rem;
  height: 2.75rem;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--nail-r);
  background: var(--lacquer);
  background-clip: padding-box;
  cursor: pointer;
  transition: scale .2s var(--ease);
}
.dock__nail:hover { scale: 1.08; }
.dock__nail[aria-pressed="true"] { outline: 2px solid var(--ink); outline-offset: 1px; }
.dock__nail:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: var(--nail-r); }
.dock__style {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  margin-top: .15rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--ink);
  cursor: pointer;
}
.dock__style:hover { background: color-mix(in srgb, var(--ink) 10%, transparent); }
.dock__style svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }

/* ---------- Studio: every option, in a panel that leaves the page in view ---------- */

.studio {
  position: fixed;
  inset: auto 1rem 1rem auto;
  z-index: 6;
  width: min(24rem, calc(100vw - 2rem));
  max-height: calc(100svh - 2rem);
  margin: 0;
  padding: 1.1rem 1.25rem 1.25rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 0;
  border-radius: 1.5rem;
  background: var(--raised);
  color: var(--ink);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 14%, transparent), 0 28px 64px rgba(20, 8, 20, .34);
}
.studio[open] { display: grid; gap: 1rem; }
.studio__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.studio__head h2 { font-size: var(--step-1); }
.studio__close {
  position: relative;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  margin-right: -.6rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  cursor: pointer;
}
.studio__close:hover { background: color-mix(in srgb, var(--ink) 10%, transparent); }
.studio__close::before, .studio__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.1rem;
  height: 2px;
  margin: -1px 0 0 -.55rem;
  background: currentColor;
  rotate: 45deg;
}
.studio__close::after { rotate: -45deg; }
.studio__group { min-width: 0; }
.studio__label { margin: 0 0 .4rem; font-family: var(--font-display); font-size: var(--step--1); color: var(--muted); }
.studio__nails { display: flex; flex-wrap: wrap; gap: .4rem; }
.studio__nails .dock__nail { width: 2rem; height: 3.1rem; }
.studio .artpick { justify-content: flex-start; }
.studio .artpick--icons { gap: .25rem; flex-wrap: wrap; overflow: visible; }
.studio .artpick__btn { min-height: 2.5rem; font-size: 1rem; }
.studio .artpick--icons .artpick__btn { width: 2.75rem; min-height: 2.75rem; }
.studio__pair { display: grid; gap: 1rem; }
.studio__range { display: block; }
.studio__range + .studio__range { margin-top: .5rem; }
.studio__range input { display: block; width: 100%; height: 1.75rem; margin: 0; accent-color: var(--lacquer); cursor: pointer; }
.studio__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.studio__reset {
  min-height: 2.5rem;
  padding: 0 .25rem;
  border: 0;
  background: none;
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 1rem;
  text-decoration: underline;
  text-underline-offset: .2em;
  cursor: pointer;
}
/* The panel covers the dock's corner, so the dock steps aside */
.js .studio[open] ~ .dock.is-on { translate: 3.5rem -50%; visibility: hidden; }

.callbar { display: none; }
.callbar__shade { display: none; }

/* ---------- Responsive ---------- */

@media (max-width: 1100px) {
  .js .dock { display: none; }
  .callbar {
    display: flex;
    gap: .6rem;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 5;
    padding: .65rem 1rem calc(.65rem + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--deep) 96%, transparent);
  }
  .js .callbar__shade {
    display: block;
    flex: none;
    width: 2rem;
    height: 3rem;
    padding: 0;
    border: 2px solid var(--on-deep);
    border-radius: var(--nail-r);
    background: var(--lacquer);
    cursor: pointer;
  }
  .callbar :focus-visible { outline-color: var(--on-deep); }
  body { padding-bottom: 4.5rem; }
  .motion .ritual__stage { padding-bottom: 4.5rem; } /* the finger ends at the call bar */
}

@media (max-width: 860px) {
  .hero, .visit__grid, .tina, .band__head, .yourset__inner { grid-template-columns: minmax(0, 1fr); }
  .hero__title { max-width: 15ch; }
  .footer__inner { grid-template-columns: minmax(0, 1fr); }
  .menu__item { grid-template-columns: 3.25rem minmax(0, 1fr); row-gap: .5rem; }
  .menu__item .minail { grid-row: 1 / span 2; width: 3.25rem; height: 6.8rem; }
  .menu__item h3 { font-size: var(--step-2); align-self: end; }
  .menu__item p { align-self: start; }

  /* Text up top, the finger rising from the bottom edge */
  .ritual { --nh: min(32svh, 22rem); }
  .ritual__stage { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .ritual__text h2 { font-size: var(--step-2); max-width: none; margin-bottom: 1rem; }
  .step h3 { font-size: var(--step-1); }
  .motion .ritual__stage { grid-template-rows: auto minmax(0, 1fr); padding-top: clamp(3rem, 8svh, 5rem); }
  .steps { margin-bottom: 1rem; }
  .step p { font-size: 1rem; line-height: 1.45; }
  /* All ten designs in one swipeable row, so the pinned stage keeps its height */
  .ritual .artpick--icons {
    flex-wrap: nowrap;
    gap: .25rem;
    margin: -.3rem;
    padding: .3rem;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .ritual .artpick__btn { flex: none; }
}

@media (max-width: 860px) and (max-height: 620px) {
  .ritual { --nh: 26svh; }
}

@media (max-width: 720px) {
  .nav { display: none; }
  .masthead .btn { margin-left: auto; }
  .fan { --w: 60px; --h: 126px; --pivot: 230px; --fan-step: 8.5deg; }
  /* A bottom sheet over the call bar, with the page still showing above it */
  .studio {
    inset: auto 0 0;
    width: 100%;
    max-width: none;
    max-height: min(62svh, 34rem);
    padding-bottom: calc(1.25rem + env(safe-area-inset-bottom));
    border-radius: 1.5rem 1.5rem 0 0;
  }
  .gallery { --drift-k: .3; grid-template-columns: minmax(0, 1fr); }
  .ph { width: 68%; }
  .ph:nth-child(2) { justify-self: end; }
}

@media (max-width: 400px) {
  .hours { font-size: 1.0625rem; }
  .hours th, .hours td { padding: .5rem .75rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

@media print {
  .callbar, .dock, .drips, .fan, .hand, .artpick, .nav, .skip, .wall, .studio[open] { display: none; }
  .yourset { display: none; }
  .hero::before, .masthead, .footer { background: none; color: #000; }
  .hero { color: #000; }
  .motion .ritual { height: auto; }
  .motion .ritual__stage { position: static; height: auto; }
  .motion .step { opacity: 1; }
}