/* =====================================================================
   FIND YOUR SWAN  ·  DESIGN TOKENS  ·  EDITION II  (October 2026)
   Single source of truth. Every page imports this file.

   COLOUR is carried over from Edition I byte for byte. Do not edit it
   here without changing design-system.html chapter II as well.
   Everything else (type, space, grid, shape, motion, components) is new
   in Edition II. Edition I is kept in _v1/ for the old concepts.

   Fonts (load on every page, before this file):
   https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Jost:wght@300;400;500&display=swap
   Rules: FONT-SYSTEM.md
   ===================================================================== */

:root {
  /* ---------- COLOUR: PLUM (brand) ---------- */
  --plum-900: #1b1927;   /* ink — Wix color_20 */
  --plum-800: #2b2440;   /* deep band (footer / testimonial) */
  --plum-700: #423358;   /* PRIMARY — sampled from hero banner */
  --plum-600: #67647a;   /* Wix color_18 — muted text on light */
  --plum-400: #9592a7;   /* Wix color_17 — rules, captions */
  --plum-200: #c2bfd3;   /* Wix color_16 — lavender band */
  --plum-100: #e9e6f0;   /* tint — card fill */
  --plum-50:  #f5f3f8;   /* tint — section wash */
  --logo-plum: #3d2341;  /* exact ink used in the swan logo */

  /* ---------- COLOUR: NEUTRAL ---------- */
  --white:   #ffffff;
  --paper:   #fbfbfb;    /* Wix color_12 — page background (standardised) */
  --stone:   #ededed;
  --grey-400:#a3a3a2;    /* Wix color_13 */
  --grey-600:#575555;    /* Wix color_14 */
  --ink:     #333333;    /* Wix color_15 — body text */

  /* ---------- SEMANTIC ---------- */
  --bg:            var(--paper);
  --bg-dark:       var(--plum-700);
  --bg-wash:       var(--plum-50);
  --text:          var(--ink);
  --text-muted:    var(--plum-600);
  --text-on-dark:  var(--white);
  --text-on-dark-muted: rgba(255,255,255,.72);
  --rule:          rgba(66,51,88,.14);
  --rule-on-dark:  rgba(255,255,255,.18);
  --accent:        var(--plum-700);
  --accent-hover:  var(--plum-800);
  --focus:         var(--plum-400);

  /* ---------- TYPE FAMILIES: two voices ---------- */
  --font-serif: "Cormorant Garamond", Cormorant, Garamond, "Times New Roman", serif;  /* feeling: headings, standfirsts, quotes, numerals */
  --font-sans:  "Jost", Futura, "Century Gothic", "Helvetica Neue", Arial, sans-serif; /* fact: text, labels, buttons, forms, navigation */

  /* ---------- WEIGHTS (nothing above 500, ever) ---------- */
  --w-light:   300;
  --w-regular: 400;
  --w-medium:  500;

  /* ---------- TYPE SCALE (fluid, 390px to 1440px viewport) ---------- */
  --fs-display:    clamp(3.5rem, 1.457rem + 8.381vw, 9rem);       /* 56 to 144  cover and hero only */
  --fs-h1:         clamp(2.75rem, 1.729rem + 4.19vw, 5.5rem);      /* 44 to 88 */
  --fs-h2:         clamp(2.125rem, 1.521rem + 2.476vw, 3.75rem);   /* 34 to 60 */
  --fs-h3:         clamp(1.625rem, 1.393rem + 0.952vw, 2.25rem);   /* 26 to 36 */
  --fs-h4:         clamp(1.25rem, 1.157rem + 0.381vw, 1.5rem);     /* 20 to 24 */
  --fs-standfirst: clamp(1.3125rem, 1.15rem + 0.667vw, 1.75rem);   /* 21 to 28 */
  --fs-body:       clamp(1rem, 0.977rem + 0.095vw, 1.0625rem);     /* 16 to 17 */
  --fs-small:      clamp(0.875rem, 0.852rem + 0.095vw, 0.9375rem); /* 14 to 15 */
  --fs-caption:    0.8125rem;                                      /* 13 */
  --fs-nav:        0.8125rem;                                      /* 13 */
  --fs-label:      0.6875rem;                                      /* 11, capitals, tracked */
  --fs-numeral:    clamp(3.5rem, 2.386rem + 4.571vw, 6.5rem);      /* 56 to 104 */
  --fs-quote:      clamp(1.75rem, 1.193rem + 2.286vw, 3.25rem);    /* 28 to 52 */

  /* ---------- LEADING ---------- */
  --lh-display:    0.92;
  --lh-h1:         1.0;
  --lh-h2:         1.06;
  --lh-h3:         1.15;
  --lh-h4:         1.25;
  --lh-standfirst: 1.38;
  --lh-body:       1.75;
  --lh-small:      1.65;
  --lh-caption:    1.5;
  --lh-quote:      1.18;

  /* ---------- TRACKING (negative on large serif, wide on small capitals, zero on lowercase text) ---------- */
  --track-display:  -0.02em;
  --track-h1:       -0.015em;
  --track-h2:       -0.01em;
  --track-h3:       -0.005em;
  --track-label:    0.32em;
  --track-button:   0.28em;
  --track-wordmark: 0.36em;
  --track-nav:      0.04em;

  /* ---------- SPACE (4px base, doubles as it grows) ---------- */
  --space-3xs: 0.25rem;  /*   4 */
  --space-2xs: 0.5rem;   /*   8 */
  --space-xs:  0.75rem;  /*  12 */
  --space-s:   1rem;     /*  16 */
  --space-m:   1.5rem;   /*  24 */
  --space-l:   2rem;     /*  32 */
  --space-xl:  3rem;     /*  48 */
  --space-2xl: 4rem;     /*  64 */
  --space-3xl: 6rem;     /*  96 */
  --space-4xl: 8rem;     /* 128 */
  --space-5xl: 12rem;    /* 192 */
  --section:   clamp(6rem, 3.771rem + 9.143vw, 12rem);  /* 96 to 192, top and bottom of every section */

  /* ---------- GRID ---------- */
  --columns:        12;                                   /* 6 under 1024px, 4 under 600px */
  --margin:         clamp(1.25rem, -0.514rem + 7.238vw, 6rem); /* 20 to 96, page edge to content */
  --gutter:         clamp(1rem, 0.629rem + 1.524vw, 2rem);     /* 16 to 32, between columns */
  --container:      1360px;
  --container-text: 46rem;   /* 736, long reading */
  --measure:        60ch;

  /* ---------- SHAPE: the square and the circle ---------- */
  --radius:       0;
  --radius-round: 50%;       /* icon buttons only */
  --hairline:     1px;
  --shadow:       none;      /* depth comes from tone, never from blur */

  /* ---------- IMAGERY (no new hues: plum-900 at two strengths) ---------- */
  --veil: linear-gradient(180deg, rgba(27,25,39,.18) 0%, rgba(27,25,39,.46) 100%);

  /* ---------- MOTION ---------- */
  --ease-silk:   cubic-bezier(.16,1,.3,1);   /* long, soft landing: reveals, arrows, menus */
  --ease-out:    cubic-bezier(.22,.61,.36,1);/* colour and underline changes */
  --ease-in-out: cubic-bezier(.65,0,.35,1);  /* overlays opening and closing */
  --dur-quick: 240ms;
  --dur-calm:  640ms;
  --dur-slow:  1200ms;
  --rise:      16px;                          /* reveal travel */
}

/* =====================================================================
   BASE
   ===================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-sans);font-weight:var(--w-light);font-size:var(--fs-body);line-height:var(--lh-body);font-kerning:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
img,picture,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd{margin:0}
ol,ul{margin:0;padding:0;list-style:none}
::selection{background:var(--plum-200);color:var(--plum-900)}
:focus-visible{outline:2px solid var(--focus);outline-offset:4px}

/* =====================================================================
   TYPE  (two voices: serif for feeling, sans for fact)
   ===================================================================== */
h1,h2,h3,h4,.display,.h1,.h2,.h3,.h4{font-family:var(--font-serif);font-weight:var(--w-light);color:var(--plum-700);text-wrap:balance;font-variant-numeric:lining-nums}
.display{font-size:var(--fs-display);line-height:var(--lh-display);letter-spacing:var(--track-display)}
h1,.h1{font-size:var(--fs-h1);line-height:var(--lh-h1);letter-spacing:var(--track-h1)}
h2,.h2{font-size:var(--fs-h2);line-height:var(--lh-h2);letter-spacing:var(--track-h2)}
h3,.h3{font-size:var(--fs-h3);line-height:var(--lh-h3);letter-spacing:var(--track-h3);font-weight:var(--w-regular)}
h4,.h4{font-size:var(--fs-h4);line-height:var(--lh-h4);font-weight:var(--w-medium)}
:is(h1,h2,h3,h4,.display,.h1,.h2,.h3,.h4,.standfirst) em{font-style:italic;font-weight:var(--w-light)}
.standfirst{font-family:var(--font-serif);font-weight:var(--w-regular);font-size:var(--fs-standfirst);line-height:var(--lh-standfirst);color:var(--text-muted);text-wrap:pretty;font-variant-numeric:oldstyle-nums}
.body{font-size:var(--fs-body);line-height:var(--lh-body)}
.small{font-size:var(--fs-small);line-height:var(--lh-small)}
.caption{font-size:var(--fs-caption);line-height:var(--lh-caption);font-weight:var(--w-regular);color:var(--text-muted)}
.label{font-family:var(--font-sans);font-size:var(--fs-label);font-weight:var(--w-medium);line-height:1.5;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-muted)}
.wordmark{font-family:var(--font-sans);font-size:var(--fs-label);font-weight:var(--w-medium);line-height:1;letter-spacing:var(--track-wordmark);text-transform:uppercase;white-space:nowrap}
.numeral{font-family:var(--font-serif);font-weight:var(--w-light);font-size:var(--fs-numeral);line-height:.9;letter-spacing:-0.02em;font-variant-numeric:lining-nums proportional-nums;color:var(--plum-700)}
.quote{font-family:var(--font-serif);font-style:italic;font-weight:var(--w-light);font-size:var(--fs-quote);line-height:var(--lh-quote);letter-spacing:-0.005em;color:var(--plum-700);text-wrap:balance}
.measure{max-width:var(--measure)}
p+p{margin-top:1em}

/* on dark plum bands */
.on-dark{color:var(--text-on-dark)}
.on-dark :is(h1,h2,h3,h4,.display,.h1,.h2,.h3,.h4,.numeral,.quote){color:var(--white)}
.on-dark :is(.standfirst,.caption,.label){color:var(--text-on-dark-muted)}

/* =====================================================================
   BUTTONS (two) AND LINKS (two). Square, hairline, no shadow.
   ===================================================================== */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.9em;min-height:3.5rem;padding:0 calc(2.5rem - var(--track-button)) 0 2.5rem;border:var(--hairline) solid transparent;border-radius:var(--radius);font-family:var(--font-sans);font-size:var(--fs-label);font-weight:var(--w-medium);letter-spacing:var(--track-button);text-transform:uppercase;line-height:1;white-space:nowrap;cursor:pointer;transition:background-color var(--dur-quick) var(--ease-out),color var(--dur-quick) var(--ease-out),border-color var(--dur-quick) var(--ease-out)}
.btn::after{content:"";position:absolute;inset:-6px}            /* larger hit area than the visual */
.btn:active{transition:none}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--white)}
.btn-primary:hover,.btn-primary.is-hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn-primary:active{background:var(--plum-900);border-color:var(--plum-900)}
.btn-secondary{background:transparent;border-color:var(--accent);color:var(--accent)}
.btn-secondary:hover,.btn-secondary.is-hover{background:var(--accent);color:var(--white)}
.btn-secondary:active{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--white)}
.btn:disabled,.btn.is-disabled{background:transparent;border-color:var(--plum-200);color:var(--plum-400);cursor:not-allowed}
.btn.is-focus{outline:2px solid var(--focus);outline-offset:4px}
.on-dark .btn-primary{background:var(--white);border-color:var(--white);color:var(--plum-800)}
.on-dark .btn-primary:hover,.on-dark .btn-primary.is-hover{background:var(--plum-100);border-color:var(--plum-100)}
.on-dark .btn-secondary{border-color:rgba(255,255,255,.5);color:var(--white)}
.on-dark .btn-secondary:hover,.on-dark .btn-secondary.is-hover{background:var(--white);border-color:var(--white);color:var(--plum-800)}

/* text link: a hairline that retracts and redraws on hover */
.link{position:relative;display:inline-block;padding-bottom:.4em;font-family:var(--font-sans);font-size:var(--fs-small);font-weight:var(--w-regular);letter-spacing:.01em;color:var(--accent);line-height:1.3}
.link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--hairline);background:currentColor;transform-origin:left}
.link:hover::after,.link.is-hover::after{animation:fys-redraw var(--dur-slow) var(--ease-silk)}
.on-dark .link{color:var(--white)}
@keyframes fys-redraw{0%{transform:scaleX(1);transform-origin:right}45%{transform:scaleX(0);transform-origin:right}46%{transform:scaleX(0);transform-origin:left}100%{transform:scaleX(1);transform-origin:left}}

/* arrow link: the hairline arrow lengthens on hover */
.link-arrow{display:inline-flex;align-items:center;gap:1rem;font-family:var(--font-sans);font-size:var(--fs-label);font-weight:var(--w-medium);letter-spacing:var(--track-button);text-transform:uppercase;color:var(--accent);line-height:1;padding-block:.5rem}
.link-arrow .arrow{position:relative;display:block;width:2rem;height:var(--hairline);background:currentColor;transition:width var(--dur-calm) var(--ease-silk)}
.link-arrow .arrow::after{content:"";position:absolute;right:0;top:50%;width:7px;height:7px;border-top:var(--hairline) solid currentColor;border-right:var(--hairline) solid currentColor;transform:translateY(-50%) rotate(45deg);transform-origin:center}
.link-arrow:hover .arrow,.link-arrow.is-hover .arrow{width:3.25rem}
.on-dark .link-arrow{color:var(--white)}

/* icon button: the only circle in the system */
.icon-btn{display:inline-grid;place-items:center;width:2.75rem;height:2.75rem;border:var(--hairline) solid var(--rule);border-radius:var(--radius-round);color:var(--plum-700);transition:background-color var(--dur-quick) var(--ease-out),color var(--dur-quick) var(--ease-out),border-color var(--dur-quick) var(--ease-out)}
.icon-btn svg{width:15px;height:15px;fill:currentColor}
.icon-btn:hover{background:var(--plum-700);border-color:var(--plum-700);color:var(--white)}
.on-dark .icon-btn{border-color:var(--rule-on-dark);color:var(--white)}
.on-dark .icon-btn:hover{background:var(--white);color:var(--plum-800)}

/* =====================================================================
   FORMS: underline fields, italic serif placeholders
   ===================================================================== */
.field{display:grid;gap:.35rem}
.field>label,.field>.field-label{font-family:var(--font-sans);font-size:var(--fs-label);font-weight:var(--w-medium);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-muted);transition:color var(--dur-quick) var(--ease-out)}
.input{appearance:none;-webkit-appearance:none;width:100%;min-height:3rem;margin:0;padding:.6rem 0 .7rem;border:0;border-bottom:var(--hairline) solid var(--plum-400);border-radius:var(--radius);background:transparent;font-family:var(--font-sans);font-weight:var(--w-light);font-size:1.0625rem;line-height:1.5;color:var(--text);transition:border-color var(--dur-quick) var(--ease-out),box-shadow var(--dur-quick) var(--ease-out)}
textarea.input{min-height:7.5rem;resize:vertical}
.input::placeholder{font-family:var(--font-serif);font-style:italic;font-weight:var(--w-regular);font-size:1.1875rem;color:var(--plum-600);opacity:1}
.input:focus,.input.is-focus{outline:none;border-bottom-color:var(--plum-700);box-shadow:0 1px 0 0 var(--plum-700)}
.field:focus-within>label,.field.is-focus>label{color:var(--plum-700)}
.field-note{font-family:var(--font-serif);font-style:italic;font-size:1.0625rem;line-height:1.4;color:var(--plum-700)}
.field.is-error .input{border-bottom-color:var(--plum-700);box-shadow:0 1px 0 0 var(--plum-700)}
.select{position:relative}
.select .input{padding-right:2rem;cursor:pointer}
.select::after{content:"";position:absolute;right:.35rem;bottom:1.45rem;width:8px;height:8px;border-right:var(--hairline) solid var(--plum-700);border-bottom:var(--hairline) solid var(--plum-700);transform:rotate(45deg);pointer-events:none}
.choice{display:flex;align-items:flex-start;gap:.85rem;font-size:var(--fs-small);line-height:var(--lh-small);cursor:pointer}
.choice input{appearance:none;-webkit-appearance:none;flex:none;width:1.125rem;height:1.125rem;margin:.2rem 0 0;border:var(--hairline) solid var(--plum-600);border-radius:var(--radius);background:var(--white) center/70% no-repeat;cursor:pointer;transition:background-color var(--dur-quick) var(--ease-out),border-color var(--dur-quick) var(--ease-out)}
.choice input[type=radio]{border-radius:var(--radius-round)}
.choice input:checked{background-color:var(--plum-700);border-color:var(--plum-700)}
.choice input[type=checkbox]:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.4 4.8 9 10 3' fill='none' stroke='%23fff' stroke-width='1.4'/%3E%3C/svg%3E")}
.choice input[type=radio]:checked{background:var(--white);box-shadow:inset 0 0 0 4px var(--white),inset 0 0 0 10px var(--plum-700)}

/* =====================================================================
   LAYOUT
   ===================================================================== */
.container{width:min(100% - 2*var(--margin),var(--container));margin-inline:auto}
.container-text{width:min(100% - 2*var(--margin),var(--container-text));margin-inline:auto}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter)}
@media (max-width:1023px){.grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (max-width:599px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.section{padding-block:var(--section)}
.bg-wash{background:var(--bg-wash)}
.bg-800{background:var(--plum-800)}
.bg-900{background:var(--plum-900)}
.rule{height:0;border:0;border-top:var(--hairline) solid var(--rule);margin:0}
.on-dark .rule{border-top-color:var(--rule-on-dark)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* =====================================================================
   IMAGERY: square corners, still on hover, veil under any text
   ===================================================================== */
.frame{position:relative;overflow:hidden;background:var(--plum-100)}
.frame img{width:100%;height:100%;object-fit:cover}
.ratio-4x5{aspect-ratio:4/5}.ratio-3x2{aspect-ratio:3/2}.ratio-16x9{aspect-ratio:16/9}.ratio-1x1{aspect-ratio:1/1}
.veiled::after{content:"";position:absolute;inset:0;background:var(--veil);pointer-events:none}

/* =====================================================================
   MOTION: reveal once, never bounce
   ===================================================================== */
html.js .reveal{opacity:0;transform:translateY(var(--rise));transition:opacity var(--dur-slow) var(--ease-silk),transform var(--dur-slow) var(--ease-silk)}
html.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html.js .reveal{opacity:1;transform:none}
}