/* ==========================================================================
   The Sophie Lancaster Foundation — homepage redesign prototype, version 5 (12 Oct 2026)
   Poster palette (#121214 / #782091; the live Just Giving button is #751C93), Poppins
   throughout. v5 follows Adria's feedback of 5 and 7 Oct: sections alternate dark and light
   (add class "light" to a section), bigger menu text, her 7-item menu and rewritten copy.
   Header on one row at ≥1024px; header and page share a 1320px content width.
   Section order: hero → Sophie's story → What we do → donate → Why our work matters → news.
   ========================================================================== */
:root{
  color-scheme:dark;
  /* poster palette: near-black ground, one purple, white type */
  --plum:#782091;            /* poster purple — buttons, rules, highlights */
  --plum-hover:#8E2EAB;
  --heading:#F4EFF7;         /* heading colour on dark */
  --plum-ink:#0C0B0E;        /* footer ground */
  --accent:#C98BEA;          /* links and accents (lilac on dark) */
  --panel:#1F1A24;           /* tinted panels */
  --paper:#121214;           /* section ground (poster black) */
  --ink:#F4EFF7;             /* body text */
  --ink-2:#B9ADC2;           /* muted text */
  --strong:#FFFFFF;          /* emphasised text and link hover */
  --line:#2E2834;
  --line-dark:#3A3141;
  --white:#FFFFFF;
  --on-dark:#F4EFF7;
  --on-dark-muted:#B9ADC2;
  --display:"Poppins",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --body:"Poppins",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --gutter:clamp(16px,4vw,48px);
  --measure:64ch;
  --radius:6px;
  --focus:0 0 0 3px var(--paper),0 0 0 6px var(--accent);
}
/* light sections: the same tokens, redefined. Purple takes over as the accent. */
.light{
  --paper:#F6F3F8;
  --panel:#FFFFFF;
  --ink:#1B1523;
  --ink-2:#5B4F66;
  --heading:#1B1523;
  --strong:#1B1523;
  --accent:#782091;
  --line:#E3DCE8;
  --line-dark:#D5CBDD;
  --focus:0 0 0 3px #F6F3F8,0 0 0 6px #782091;
  color-scheme:light;
  background:var(--paper);
  color:var(--ink);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:1rem;line-height:1.65;overflow-x:hidden}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-underline-offset:.15em}
a:hover{color:var(--strong)}
:is(a,button,input,textarea):focus-visible{outline:none;box-shadow:var(--focus);border-radius:var(--radius)}
h1,h2,h3{font-family:var(--display);font-weight:500;line-height:1.1;margin:0;text-wrap:balance;color:var(--heading)}
h2{font-size:clamp(1.6rem,3vw,2.25rem);letter-spacing:.04em;text-transform:uppercase}
h3{font-size:1.25rem;line-height:1.3}
p{margin:0}
.wrap{max-width:1320px;margin-inline:auto;padding-inline:var(--gutter)}
.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}
.skip{position:absolute;left:var(--gutter);top:-100px;background:var(--plum);color:var(--white);padding:.75rem 1rem;z-index:100;font-weight:600;border-radius:var(--radius)}
.skip:focus{top:8px;outline:none;box-shadow:var(--focus)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;padding:.75rem 1.5rem;border-radius:999px;font-family:var(--display);font-weight:600;font-size:.9375rem;letter-spacing:.01em;text-decoration:none;border:2px solid transparent;cursor:pointer;line-height:1.2;transition:background-color .15s,color .15s,border-color .15s}
.btn-primary{background:var(--plum);color:var(--white);border-color:var(--plum)}
.btn-primary:hover{background:var(--plum-hover);border-color:var(--plum-hover);color:var(--white)}
.btn-light{background:var(--white);color:#5E1478;border-color:var(--white)}
.btn-light:hover{background:#EFE3F5;color:#5E1478}

/* header ------------------------------------------------------------- */
.site-header{background:var(--paper);color:var(--ink);position:sticky;top:env(safe-area-inset-top,0px);z-index:50;border-bottom:1px solid var(--line)}
.header-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:72px;padding-block:.5rem}
.brand{display:inline-flex;align-items:center;flex-shrink:0}
/* The Foundation's logo file is white-on-transparent and is used as supplied on the dark header. */
.brand img{width:auto;height:48px}
.header-actions{display:flex;align-items:center;gap:.75rem}
.donate-top{min-height:44px;padding:.5rem 1.1rem;font-size:.875rem}
.donate-top svg{width:18px;height:18px;flex:none}
.nav-toggle{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;min-width:44px;padding:.5rem .75rem;background:transparent;color:var(--white);border:2px solid var(--line-dark);border-radius:var(--radius);font:inherit;font-family:var(--display);font-weight:600;cursor:pointer}
.nav-toggle svg{width:22px;height:22px}
.nav-toggle .ic-close,.nav-toggle[aria-expanded="true"] .ic-open{display:none}
.nav-toggle[aria-expanded="true"] .ic-close{display:block}
@media (max-width:599px){.donate-top{padding:.5rem .85rem}.nav-toggle .label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.nav-toggle{padding:.5rem}.brand img{height:40px}}
.site-nav ul{list-style:none;margin:0;padding:0}
.site-nav a{color:var(--white);text-decoration:none;font-family:var(--display);font-weight:500}
.site-nav a:hover{color:var(--accent);text-decoration:underline}
.site-nav a[aria-current="page"]{color:var(--accent)}
.sub-toggle{background:transparent;border:0;color:var(--white);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0;border-radius:var(--radius)}
.sub-toggle svg{width:14px;height:14px;transition:transform .15s}
.sub-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.has-sub{position:relative}
.has-sub>div{display:flex;align-items:center}
.site-nav{display:none;border-top:1px solid var(--line);padding-block:.5rem 1rem}
.site-nav.is-open{display:block}
.site-nav>ul>li{border-bottom:1px solid var(--line)}
.site-nav>ul>li>a,.has-sub>div>a{display:block;flex:1;padding:.85rem 0;font-size:1.125rem}
.site-nav .sub{display:none;padding:0 0 .75rem 1rem}
.site-nav .sub.is-open{display:block}
.site-nav .sub a{display:block;padding:.6rem 0;color:var(--ink-2);font-weight:400;font-family:var(--body);font-size:1.0625rem}
.site-nav .sub a:hover{color:var(--accent)}
@media (min-width:1200px){
  .nav-toggle{display:none}
  /* one row: logo · menu · Donate. The header-bar wrapper dissolves so nav can sit between its children.
     The button shows "Donate" here (full Just Giving label kept for screen readers) so the menu has room to breathe. */
  .site-header .wrap{display:flex;align-items:center;gap:2rem;min-height:80px}
  .header-bar{display:contents}
  .brand{order:1;flex:none}
  .site-nav{display:block;border:0;padding:0;order:2;flex:1 1 auto;min-width:0}
  .header-actions{order:3;flex:none}
  .donate-top{white-space:nowrap;font-size:.875rem;padding:.5rem 1.1rem}
  .site-nav>ul{display:flex;align-items:center;justify-content:center;flex-wrap:nowrap;gap:.875rem}
  .site-nav>ul>li{border:0}
  .site-nav>ul>li>a,.has-sub>div>a{padding:.5rem .25rem;font-size:.9375rem;white-space:nowrap}
  .sub-toggle{min-width:26px;min-height:30px;margin-left:-.3rem}
  .site-nav .sub{position:absolute;top:100%;left:0;min-width:240px;background:var(--panel);border:1px solid var(--line-dark);border-radius:var(--radius);padding:.5rem 0;box-shadow:0 14px 34px rgba(0,0,0,.45)}
  .site-nav .sub a{padding:.6rem 1rem;white-space:nowrap;font-size:1rem}
  .has-sub:hover .sub,.has-sub:focus-within .sub{display:block}
}
@media (min-width:1280px){.site-nav>ul{gap:1.75rem}}
@media (min-width:1440px){.site-nav>ul>li>a,.has-sub>div>a{font-size:1rem}}
/* homepage: the header sits transparent over the hero (with JS), solid once scrolled or with the menu open */
.js body:has(.hero-banner) .site-header{position:fixed;left:0;right:0;background:transparent;border-bottom-color:rgba(255,255,255,.14);transition:background-color .2s,border-color .2s,padding .2s}
/* extra space under the menu so the faint line sits halfway between the menu and the hero's purple bar
   (the hero's top gap minus the 15px/19px already below the button, halved) */
.js body:has(.hero-banner) .site-header{padding-bottom:calc((clamp(2rem,6vw,5rem) - 15px) / 2)}
@media (min-width:1200px){.js body:has(.hero-banner) .site-header{padding-bottom:calc((clamp(2rem,6vw,5rem) - 19px) / 2)}}
.js body:has(.hero-banner) .site-header.is-scrolled,
.js body:has(.hero-banner) .site-header:has(.site-nav.is-open){background:var(--paper);border-bottom-color:var(--line);padding-bottom:0}
.site-header:has(.site-nav.is-open){max-height:100vh;overflow-y:auto}
.js body:has(.hero-banner) .hero .wrap{padding-top:calc(73px + clamp(2rem,6vw,5rem))}
@media (min-width:1200px){.js body:has(.hero-banner) .hero .wrap{padding-top:calc(81px + clamp(2rem,6vw,5rem))}}
.js body:has(.hero-banner) .page-hero{padding-top:calc(73px + clamp(2.5rem,6vw,5rem))}
@media (min-width:1200px){.js body:has(.hero-banner) .page-hero{padding-top:calc(81px + clamp(2.5rem,6vw,5rem))}}

/* hero --------------------------------------------------------------- */
.hero{position:relative;isolation:isolate;overflow:hidden;background:var(--paper)}
.hero .wrap{display:grid;gap:2.5rem;padding-block:clamp(2.5rem,6vw,5.5rem)}
.hero .wrap>div:first-child{max-width:40rem}
/* the banner image, faded, behind the hero content; darker on the left so the text reads, fading into the page at the bottom */
.hero-banner{position:absolute;inset:0;z-index:-1}
.hero-banner img{width:100%;height:100%;object-fit:cover;object-position:center 20%;opacity:.15}
.hero-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,18,20,.6) 0%,rgba(18,18,20,0) 20%,rgba(18,18,20,0) 65%,var(--paper) 100%),linear-gradient(90deg,rgba(18,18,20,.6) 0%,rgba(18,18,20,.3) 55%,rgba(18,18,20,.1) 100%)}
.hero .wrap{position:relative}
.hero .bar{display:block;width:72px;height:6px;background:linear-gradient(90deg,var(--plum) 35%,rgba(120,32,145,0));margin-bottom:1rem}
.hero h1{font-size:clamp(2rem,4.6vw,3.5rem);font-weight:500;letter-spacing:.06em;color:var(--strong);text-transform:uppercase;line-height:1.12}
.hero .intro{margin-top:1.5rem;display:grid;gap:1rem;max-width:var(--measure)}
.hero .intro p{color:var(--ink);font-size:1.0625rem;line-height:1.7}
.hero .intro p.lead{color:var(--strong);font-weight:600;font-size:1.125rem;line-height:1.55}
.hero .actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.artwork{position:relative;padding:clamp(1rem,3vw,2rem) 0}
.artwork::before{content:"";position:absolute;inset:0 -8% 0 12%;background:var(--plum);clip-path:polygon(0 18%,100% 0,100% 82%,0 100%);z-index:0;opacity:.9}
.artwork svg{position:relative;z-index:1;width:100%;height:auto;border-radius:2px;box-shadow:0 24px 48px rgba(0,0,0,.5)}
.artwork figcaption{position:relative;z-index:1;margin-top:.75rem;font-size:.9375rem;color:var(--ink-2);display:flex;gap:.5rem;align-items:baseline}
.tag{display:inline-block;font-family:var(--display);font-size:.6875rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);background:var(--panel);border:1px solid var(--line-dark);border-radius:999px;padding:.15rem .6rem;white-space:nowrap}
@media (min-width:768px){.hero .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:3.5rem}}
/* phones: the rose artwork would sit straight above Sophie's photo (two images in a row), so it shows only beside the text */
@media (max-width:767px){.hero .artwork{display:none}}

/* story -------------------------------------------------------------- */
/* follows the rest of the site: content within the 1320px page width, standard section spacing,
   a rounded photo panel (like the cards) with Adria's lines and the caption over it */
.story{padding-block:clamp(3rem,7vw,6rem)}
.story-grid{display:grid;gap:2.5rem;max-width:1320px;margin-inline:auto;padding-inline:var(--gutter)}
.story-photo{position:relative;margin:0}
.story-photo .frame{position:relative;height:100%;min-height:500px}
.story-photo .photo{position:absolute;inset:0;overflow:hidden;border-radius:var(--radius);background:#1A0F20}
/* photo sits to the right and fades into the panel on the left, leaving room for the lines */
.story-photo .photo img{position:absolute;top:0;right:0;width:86%;height:100%;object-fit:cover;object-position:0% 18%;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 38%);mask-image:linear-gradient(to right,transparent 0,#000 38%)}
.story-photo .photo::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 18% 8%,rgba(201,139,234,.35),transparent 40%),radial-gradient(circle at 0% 100%,rgba(120,32,145,.7),transparent 55%),linear-gradient(transparent 60%,rgba(12,11,14,.55))}
/* the top of the photo fades from the hero's dark, so the two sections run into each other */
.story-photo .photo::before{content:"";position:absolute;inset:0 0 auto;height:120px;z-index:1;pointer-events:none;background:linear-gradient(#121214,rgba(18,18,20,0))}
.story-photo .photo-note{position:absolute;left:1.5rem;top:1.5rem;z-index:1;margin:0;font-family:"Caveat",cursive;font-weight:400;font-size:clamp(1.6rem,2.6vw,2.15rem);line-height:1.35;color:#F3E8F7;transform:rotate(-4deg);transform-origin:left top;text-shadow:0 2px 12px rgba(0,0,0,.55)}
.story-photo .photo-note svg{display:inline-block;width:.85em;height:.85em;vertical-align:-.1em;margin-left:.3em}
.story-photo figcaption{position:absolute;left:1.5rem;right:1.5rem;bottom:1.5rem;z-index:1;font-size:.875rem;line-height:1.5;color:#F4EFF7;max-width:32ch}
.story-body{max-width:var(--measure)}
.story-body .lead{margin-top:1.5rem;font-size:1.125rem;line-height:1.65;color:var(--ink)}
.story-steps{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:1.5rem}
.story-steps li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:1rem;position:relative}
.story-steps li:not(:last-child)::before{content:"";position:absolute;left:19px;top:42px;bottom:-1.4rem;width:2px;background:var(--line-dark)}
.story-steps .icon{width:40px;height:40px;display:grid;place-items:center;color:var(--plum)}
.story-steps .icon svg{width:28px;height:28px}
.story-steps h3{font-size:1rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:.35rem}
.story-steps p{font-size:1.0625rem;line-height:1.7}
/* Sophie's full story: its own section below, same grid as the story above (heading left, chapters right),
   short numbered chapters on a rail */
.story-full-section{padding-block:clamp(3rem,7vw,6rem)}
.story-full-section .full-head h2{margin:0}
.story-full{display:grid;gap:2.25rem;max-width:var(--measure)}
.chapter{display:grid;grid-template-columns:40px minmax(0,1fr);gap:1rem;position:relative}
.chapter::before{content:"";position:absolute;left:19px;top:44px;bottom:-2.25rem;width:2px;background:var(--line-dark)}
.chapter .num{width:40px;height:40px;border-radius:50%;border:2px solid var(--accent);color:var(--accent);display:grid;place-items:center;font-family:var(--display);font-weight:600;font-size:1rem;background:var(--paper);position:relative}
.chapter h3{font-size:1rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin:.55rem 0 .6rem}
.chapter p{font-size:1.0625rem;line-height:1.75}
.chapter p+p{margin-top:1rem}
.story-end{padding-left:56px}
/* Sophie's Story: the photo has no frame or border round it, like the images elsewhere on the site.
   It runs edge to edge (top to bottom of the section, and to the screen edge); the text keeps the page width. */
.story{padding-block:0}
.story .story-grid{max-width:none;padding-inline:0;gap:0}
.story .story-photo .photo{border-radius:0}
.story .story-body{padding:2.5rem var(--gutter) clamp(3rem,7vw,6rem)}
@media (min-width:1024px){
  .story .story-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:stretch}
  .story .story-photo .frame{min-height:620px}
  .story .story-body{max-width:none;padding:clamp(3.5rem,6vw,6rem) max(var(--gutter),calc((100vw - 1320px) / 2 + var(--gutter))) clamp(3.5rem,6vw,6rem) clamp(3rem,5vw,4.5rem)}
  .story .story-body>*{max-width:40rem}
}
@media (min-width:1024px){
  .story-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:4rem;align-items:start}
  .story-photo .photo-note{left:2rem;top:2rem}
  .story-photo figcaption{left:2rem;bottom:1.75rem}
  .story-photo .frame{height:100%;min-height:560px}
  .story-full-section .full-head{position:sticky;top:calc(81px + 2rem)}
}

/* what we do --------------------------------------------------------- */
.pillars{padding-block:clamp(3rem,6vw,5rem);background:var(--paper)}
.pillar-list{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:1.25rem}
.pillar-list li{border:1px solid var(--line-dark);border-top:4px solid var(--plum);border-radius:var(--radius);padding:1.5rem 1.5rem 1.6rem;display:grid;gap:.5rem;align-content:start;background:var(--panel)}
.pillar-list h3{font-size:1.5rem;color:var(--accent)}
.pillar-list p{color:var(--ink);font-size:1rem}
@media (min-width:600px){.pillar-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}}
@media (min-width:1024px){.pillar-list{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* donate band -------------------------------------------------------- */
.donate{background:var(--plum);color:var(--white);padding-block:clamp(2.5rem,5vw,3.75rem)}
.donate .wrap{display:grid;gap:1.5rem;align-items:center}
.donate h2{color:var(--white);font-size:clamp(1.5rem,3vw,2.25rem);max-width:26ch}
.donate .btn-light{justify-self:start}
@media (min-width:768px){.donate .wrap{grid-template-columns:minmax(0,1fr) auto}.donate .btn-light{justify-self:end}}
.donate{overflow:hidden}
/* button sits below the scrolling logos */
.donate .donate-cta .btn-light{justify-self:start}
.donate .donate-cta{margin-top:clamp(1.25rem,2.5vw,2rem)}
.donate .btn-light .short{display:none}
@media (max-width:767px){.donate .btn-light .long{display:none}.donate .btn-light .short:not(.sr-only){display:inline}.donate h2{max-width:none;font-size:8.3vw}}
/* the S.O.P.H.I.E logo scrolling across the band, alternating full and faded */
.marquee{margin-top:clamp(1.5rem,3vw,2.5rem);padding-block:.25rem;overflow:hidden;white-space:nowrap}
.marquee-track{--h:clamp(64px,11vw,120px);display:inline-flex;align-items:center;gap:clamp(1.5rem,4vw,3.5rem);animation:marquee 30s linear infinite;will-change:transform}
.marquee-track span{display:block;flex:none;height:var(--h);width:calc(var(--h) * 1.9);background:var(--logo) center/contain no-repeat}
.marquee-track span:nth-child(even){opacity:.4}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(calc(-50% - clamp(1.5rem,4vw,3.5rem) / 2))}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none}}

/* why our work matters ------------------------------------------------ */
.why{padding-block:clamp(3rem,7vw,6rem)}
/* the S.O.P.H.I.E logo as a faint black watermark behind the text, on white */
.why-bg{position:relative;isolation:isolate;overflow:hidden;background:#FFFFFF}
.why-mark{position:absolute;left:50%;top:50%;width:min(1000px,92%);height:auto;transform:translate(-50%,-50%);filter:brightness(0);opacity:.05;z-index:-1;pointer-events:none}
.why .wrap{display:grid;gap:1.5rem;justify-items:center;text-align:center}
.why-text{max-width:60ch;display:grid;gap:1.1rem}
.why-text p{font-size:clamp(1.0625rem,1.6vw,1.1875rem);line-height:1.7}
.why .closing{margin-top:.5rem;font-family:var(--display);font-weight:600;font-size:clamp(1.25rem,2.4vw,1.75rem);line-height:1.35;color:var(--accent);text-wrap:balance}

/* news --------------------------------------------------------------- */
.news{padding-block:clamp(3rem,7vw,6rem)}
.news .head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:1rem}
.news .head a{font-family:var(--display);font-weight:600;font-size:.9375rem}
.news-list{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:1.25rem}
.news-list li{border:1px solid var(--line-dark);border-radius:var(--radius);overflow:hidden;display:grid;grid-template-columns:110px minmax(0,1fr);background:var(--panel)}
.news-list img{width:110px;height:100%;object-fit:cover;background:#000}
.news-list .body{padding:1.1rem 1.25rem 1.25rem;display:grid;gap:.4rem;align-content:start}
.news-list .date a{font-size:.8125rem;color:var(--ink-2);letter-spacing:.08em;text-transform:uppercase;font-family:var(--display);font-weight:500;text-decoration:none}
.news-list .date a:hover{color:var(--accent);text-decoration:underline}
.news-list h3{font-size:1.125rem}
.news-list h3 a{color:var(--strong);text-decoration:none}
.news-list h3 a:hover{color:var(--accent);text-decoration:underline}
@media (min-width:768px){
  .news-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}
  .news-list li{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .news-list img{width:100%;height:200px;object-fit:contain;background:#000}
}

/* inner pages ------------------------------------------------------- */
.eyebrow{font-family:var(--display);font-size:.875rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.page-hero{padding-block:clamp(2.5rem,6vw,5rem)}
/* inner page heroes match the homepage: the page's photo behind the title (darker on the left, fading into the page),
   with the header see-through over it. Photos show at 40% (the homepage roses, a texture, stay at 15%). */
/* every inner page hero is the same size: label and title only (intro copy starts the first section below) */
.page-hero:has(.hero-banner){position:relative;isolation:isolate;overflow:hidden;min-height:clamp(360px,40vw,480px);display:grid;align-content:center}
.page-intro{margin-bottom:clamp(2.5rem,5vw,3.5rem)}
.page-hero .wrap{position:relative;width:100%}
.page-hero .hero-banner img{opacity:.4}
.page-hero .hero-banner.texture img{opacity:.15}
.page-hero .wrap{display:grid;gap:1.25rem}
.page-hero .bar{display:block;width:72px;height:6px;background:linear-gradient(90deg,var(--plum) 35%,rgba(120,32,145,0))}
.page-hero h1{font-size:clamp(2rem,4.6vw,3.25rem);font-weight:500;letter-spacing:.06em;text-transform:uppercase;line-height:1.12;color:var(--strong);max-width:22ch}
.block{padding-block:clamp(3rem,6vw,5rem)}
.block h2{margin-bottom:1.5rem}
.prose{max-width:var(--measure);display:grid;gap:1.1rem}
.prose p{font-size:1.0625rem;line-height:1.7}
.prose p.lead{font-size:1.1875rem;line-height:1.6;font-weight:500;color:var(--strong)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;margin-top:1.75rem}
/* a link whose destination hasn't been supplied yet: looks like a button, isn't one */
.btn-pending{border:2px dashed var(--line-dark);color:var(--ink-2);cursor:default}
.placeholder{border:2px dashed var(--line-dark);border-radius:var(--radius);padding:1.5rem;display:grid;gap:.6rem;align-content:start;justify-items:start;background:var(--panel);color:var(--ink-2)}
.placeholder h3{color:var(--heading)}
.card-grid{list-style:none;margin:0;padding:0;display:grid;gap:1.25rem}
@media (min-width:768px){.card-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}}
.map-placeholder{min-height:280px;place-content:center;justify-items:center;text-align:center}
.callout{margin-top:1.5rem;border-left:6px solid var(--plum);background:var(--panel);padding:1rem 1.25rem;border-radius:0 var(--radius) var(--radius) 0;font-weight:500}
.big-link{font-family:var(--display);font-weight:600;font-size:clamp(1.0625rem,2.4vw,1.375rem);overflow-wrap:anywhere}
.split{display:grid;gap:2rem}
/* bulleted lists in page copy, and a photo beside the text */
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.ticks li{position:relative;padding-left:1.6rem;font-size:1.0625rem;line-height:1.6}
.ticks li::before{content:"";position:absolute;left:.2rem;top:.62em;width:.55rem;height:.55rem;border-radius:50%;background:var(--accent)}
.photo-side{margin:0}
.photo-side img{display:block;width:100%;height:auto;border-radius:var(--radius)}
@media (min-width:1024px){.split{grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:4rem;align-items:start}}

/* shared page devices (first built for the Education page) ------------ */
/* opening statement, with the S.O.P.H.I.E logo as a faint watermark (as in Why Our Work Matters) */
.statement-section{position:relative;isolation:isolate;overflow:hidden;background:#FFFFFF}
.statement-mark{position:absolute;right:-8%;top:50%;width:min(720px,72%);height:auto;transform:translateY(-50%);filter:brightness(0);opacity:.05;z-index:-1;pointer-events:none}
/* the dark version (About Us): page ground, white watermark */
.statement-section:not(.light){background:var(--paper)}
.statement-section:not(.light) .statement-mark{filter:none;opacity:.06}
.statement{font-family:var(--display);font-weight:500;font-size:clamp(1.6rem,3.6vw,2.75rem);line-height:1.25;color:var(--heading);max-width:28ch;text-wrap:balance}
.statement-sub{margin-top:1.5rem;font-size:clamp(1.0625rem,1.6vw,1.25rem);line-height:1.7;color:var(--ink-2);max-width:56ch}
/* edge-to-edge photo beside the text, fading into the page (as in Sophie's Story) */
.bleed{display:grid;background:var(--paper)}
.bleed-photo{margin:0;position:relative;min-height:320px}
.bleed-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bleed-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,18,20,0) 55%,var(--paper))}
.bleed-body{padding:2.5rem var(--gutter) clamp(3rem,7vw,6rem)}
@media (min-width:1024px){
  .bleed{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .bleed-photo{min-height:100%}
  .bleed-photo::after{background:linear-gradient(90deg,rgba(18,18,20,0) 45%,var(--paper))}
  .bleed-body{max-width:none;padding:clamp(3.5rem,6vw,6rem) max(var(--gutter),calc((100vw - 1320px) / 2 + var(--gutter))) clamp(3.5rem,6vw,6rem) clamp(2.5rem,4vw,4rem)}
  .bleed-body>*{max-width:38rem}
}
/* the three workshop themes, in the homepage's What We Do card style */
.themes{list-style:none;margin:2.25rem 0 0;padding:0;display:grid;gap:1.25rem}
.themes li{display:grid;gap:1rem;align-content:start;background:var(--panel);border:1px solid var(--line);border-top:4px solid var(--plum);border-radius:var(--radius);padding:1.5rem;font-family:var(--display);font-weight:500;font-size:1.25rem;line-height:1.35;color:var(--heading)}
.theme-icon{display:block;width:48px;height:48px;color:var(--accent)}
.theme-icon svg{width:100%;height:100%}
@media (min-width:768px){.themes{grid-template-columns:repeat(3,minmax(0,1fr))}}
.after-themes{margin-top:2rem;max-width:var(--measure);font-size:1.0625rem;line-height:1.7}
/* "take meaningful action against": each item struck through by a hand-drawn line, drawn once when it scrolls into view */
.impact h2{margin-bottom:0}
.impact .bar{display:block;width:72px;height:6px;margin-bottom:1.25rem;background:linear-gradient(90deg,var(--plum) 35%,rgba(120,32,145,0))}
.against-intro{margin-top:1rem;font-family:var(--display);font-weight:500;font-size:clamp(1.125rem,2vw,1.5rem);line-height:1.4;color:var(--accent);max-width:34ch}
.against{list-style:none;margin:clamp(1.75rem,3vw,2.5rem) 0 clamp(2.5rem,5vw,4rem);padding:0;display:grid;gap:.35rem}
/* the strike is a background image on the inline text, cloned onto every line it wraps to */
.against-text{font-family:var(--display);font-weight:600;font-size:clamp(1.9rem,6vw,4.25rem);line-height:1.2;color:var(--strong);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 24' preserveAspectRatio='none'%3E%3Cpath d='M2 15C60 9 118 17 176 11S300 8 398 13' fill='none' stroke='%23C98BEA' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:0 58%;background-size:100% .42em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.js .against .against-text{background-size:0% .42em;transition:background-size .7s cubic-bezier(.6,.1,.3,1)}
.js .against.is-drawn .against-text{background-size:100% .42em}
.js .against.is-drawn li:nth-child(2) .against-text{transition-delay:.35s}
.js .against.is-drawn li:nth-child(3) .against-text{transition-delay:.7s}
@media (prefers-reduced-motion:reduce){.js .against .against-text{background-size:100% .42em;transition:none}}
.pill-list{list-style:none;margin:1rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem}
.impact{padding-block:clamp(4rem,9vw,7.5rem)}
.impact .against{margin-bottom:0}
/* the supporting detail, split out of the dark section: photo beside three rows, each with its own icon */
.impact-detail .wrap{display:grid;gap:2.5rem}
.detail-photo{order:2}
.detail-rows{list-style:none;margin:0;padding:0}
.detail-rows>li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:1.25rem;padding-block:1.75rem;border-top:1px solid var(--line-dark)}
.detail-rows>li:first-child{border-top:0;padding-top:0}
.detail-rows>li:last-child{padding-bottom:0}
.detail-rows p{font-size:1.0625rem;line-height:1.7;max-width:60ch}
.detail-icon{display:block;width:40px;height:40px;color:var(--accent)}
.detail-icon svg{width:100%;height:100%}
@media (min-width:1024px){.impact-detail .wrap{grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:4rem;align-items:center}.detail-photo{order:0}}
.pill-list li{border:1px solid var(--line-dark);border-radius:999px;padding:.45rem 1rem;font-family:var(--display);font-weight:500;font-size:.9375rem;color:var(--strong);background:var(--panel)}
/* Get Involved: purple band like the homepage donate band */
.donate.edu-cta h2{font-size:clamp(1.6rem,3.4vw,2.25rem);max-width:none}
.edu-cta p{margin-top:.75rem;max-width:60ch;color:#F4EFF7;font-size:1.0625rem;line-height:1.7}
/* Safeguarding: shield, copy, and the policy as a clear document link */
.safeguarding .wrap{display:grid;gap:1.75rem;align-items:start}
.safe-icon{display:block;width:56px;height:56px;color:var(--accent)}
.safe-icon svg,.doc-icon svg{width:100%;height:100%}
.doc-link{display:inline-flex;align-items:center;gap:1rem;justify-self:start;min-height:44px;padding:1rem 1.25rem;border:1px solid var(--line-dark);border-radius:var(--radius);background:var(--panel);color:var(--strong);text-decoration:none}
.doc-link:hover{border-color:var(--accent);color:var(--strong)}
.doc-icon{display:block;width:40px;height:40px;flex:none;color:var(--accent)}
.doc-link strong{display:block;font-family:var(--display);font-weight:600}
.doc-meta{display:block;font-size:.875rem;color:var(--ink-2)}
@media (min-width:1024px){.safeguarding .wrap{grid-template-columns:auto minmax(0,1fr) auto;gap:2.5rem}}

/* inner page components (30 Oct) -------------------------------------- */
/* Hate Crime: the five monitored strands as solid tags, alternative subcultures as the dashed, missing one */
.strands{list-style:none;margin:2rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem}
.strands li{padding:.6rem 1.1rem;border-radius:999px;background:var(--plum);color:#FFFFFF;font-family:var(--display);font-weight:500;font-size:1rem}
.strands li.missing{background:transparent;color:var(--accent);border:2px dashed var(--accent)}
.change{margin-top:2.5rem;font-family:var(--display);font-weight:600;font-size:clamp(1.6rem,4vw,2.75rem);line-height:1.2;color:var(--heading);max-width:24ch;text-wrap:balance}
.guide{display:grid;gap:2rem;align-items:center}
.guide-funder{margin:0;justify-self:start}
.guide-funder img{display:block;width:min(260px,70vw);height:auto;border-radius:var(--radius)}
@media (min-width:1024px){.guide{grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:4rem}.guide-funder{justify-self:center}}
.contact-band p{margin-top:.75rem;max-width:52ch;font-size:1.0625rem;line-height:1.7}
/* email and 999 as two rows: icon in an outlined circle, separated by a hairline */
.reach{list-style:none;margin:2rem 0 0;padding:0;border-top:1px solid rgba(255,255,255,.28)}
.reach li{display:grid;grid-template-columns:48px minmax(0,1fr);gap:1rem;align-items:center;padding-block:1.25rem;border-bottom:1px solid rgba(255,255,255,.28)}
.reach-icon{display:grid;place-items:center;width:48px;height:48px;border:1px solid rgba(255,255,255,.6);border-radius:50%;color:#FFFFFF}
.reach-icon svg{width:22px;height:22px}
.reach a{display:inline-block;padding-block:.6rem;min-height:44px;font-family:var(--display);font-weight:600;font-size:clamp(1rem,1.6vw,1.1875rem);color:#FFFFFF;overflow-wrap:anywhere;text-underline-offset:.2em}
.reach a{text-decoration:none}
.reach a:hover{text-decoration:underline;text-decoration-thickness:1px}
.reach-urgent{font-weight:500;line-height:1.5;color:#FFFFFF}
.reach-urgent strong{font-weight:700}
.doc-link.is-pending{border-style:dashed;color:var(--ink-2)}
.urgent{display:flex;align-items:center;gap:1rem;margin-top:2rem;padding:1.25rem 1.5rem;border:1px solid var(--line-dark);border-radius:var(--radius);background:var(--panel);font-size:1.125rem;font-weight:500;max-width:40rem}
.urgent .detail-icon{flex:none}
/* Events: upcoming events as festival-ticket cards (placeholders until the Foundation adds them) */
.tickets{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:1.5rem}
@media (min-width:900px){.tickets{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ticket{position:relative;display:grid;grid-template-columns:84px minmax(0,1fr);background:var(--panel);border:1px solid var(--line-dark);border-radius:12px;overflow:hidden}
.ticket::before,.ticket::after{content:"";position:absolute;left:84px;width:22px;height:22px;border-radius:50%;background:var(--paper);transform:translateX(-50%);z-index:1}
.ticket::before{top:-11px}.ticket::after{bottom:-11px}
.ticket-stub{display:grid;place-items:center;background:var(--plum);color:#FFFFFF;border-right:2px dashed rgba(255,255,255,.35)}
.ticket-stub svg{width:34px;height:34px}
.ticket-body{display:grid;gap:.45rem;align-content:start;justify-items:start;padding:1.25rem 1.25rem 1.4rem 1.5rem}
.ticket-body h3{font-size:1.25rem;color:var(--heading)}
.ticket-body p{color:var(--ink-2);font-size:.9375rem}
.map-placeholder .detail-icon{width:56px;height:56px}
/* Support Us: three ways to help, as link cards */
.ways{list-style:none;margin:2.25rem 0 0;padding:0;display:grid;gap:1.25rem}
@media (min-width:768px){.ways{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ways a{display:grid;gap:1rem;align-content:start;height:100%;min-height:44px;padding:1.75rem 1.5rem;border:1px solid var(--line);border-top:4px solid var(--plum);border-radius:var(--radius);background:var(--panel);color:var(--heading);text-decoration:none;font-family:var(--display);font-weight:600;font-size:1.25rem;line-height:1.3}
.ways a:hover{border-color:var(--accent);color:var(--accent)}
.ways .theme-icon{color:var(--accent)}
/* Support Us: Adria's fundraiser ideas scrolling across a band (same motion as the homepage logos) */
.ideas{background:var(--paper);padding-block:clamp(2.5rem,5vw,4rem);overflow:hidden}
.ideas .marquee{margin-top:0}
.marquee-words .marquee-track{--h:auto}
.marquee-words .marquee-track span{display:inline-flex;align-items:center;width:auto;height:auto;background:none;opacity:1;font-family:var(--display);font-weight:600;font-size:clamp(2rem,6vw,4.25rem);line-height:1.1;color:#FFFFFF}
.marquee-words .marquee-track span:nth-child(4n+3){color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.75)}
.marquee-words .marquee-track span.sep{color:var(--accent);-webkit-text-stroke:0}
.marquee-words .marquee-track span.sep svg{width:.6em;height:.6em}
/* Store: a mosaic of the actual merchandise */
.store-layout{display:grid;gap:2.5rem;align-items:center}
.mosaic{margin:0;display:grid;gap:.75rem;grid-template-columns:repeat(2,minmax(0,1fr))}
.mosaic img{display:block;width:100%;height:100%;object-fit:cover;border-radius:var(--radius)}
.mosaic .m1{grid-column:1/-1;aspect-ratio:16/10}
.mosaic .m2,.mosaic .m3{aspect-ratio:4/5}
@media (min-width:1024px){
  .store-layout{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:4rem}
  .mosaic{grid-template-columns:minmax(0,3fr) minmax(0,2fr);grid-template-rows:repeat(2,minmax(0,1fr));height:min(560px,62vh)}
  .mosaic .m1{grid-column:1;grid-row:1 / span 2;aspect-ratio:auto}
  .mosaic .m2,.mosaic .m3{aspect-ratio:auto}
}
/* About Us: staff and Ambassadors side by side; profile placeholders until the bios arrive */
.panels{list-style:none;margin:0;padding:0;display:grid;gap:1.25rem}
@media (min-width:900px){.panels{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}}
.panels li{display:grid;gap:1rem;align-content:start;padding:1.75rem;border:1px solid var(--line);border-top:4px solid var(--plum);border-radius:var(--radius);background:var(--panel)}
.panels p{font-size:1.0625rem;line-height:1.7}
.people{list-style:none;margin:0;padding:0;display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))}
.people li{display:grid;gap:.6rem;justify-items:start;padding:1.5rem;border:2px dashed var(--line-dark);border-radius:var(--radius);color:var(--ink-2)}
.people .avatar{width:88px;height:88px;border-radius:50%;border:2px dashed var(--line-dark);display:grid;place-items:center;color:var(--accent)}
.people .avatar svg{width:40px;height:40px}
.people h3{font-size:1.125rem;color:var(--heading)}

/* footer ------------------------------------------------------------- */
.site-footer{background:var(--plum-ink);color:var(--on-dark);padding-block:clamp(2.5rem,5vw,4rem) 1.5rem;border-top:4px solid var(--plum)}
.site-footer a{color:var(--on-dark);text-decoration:none}
.site-footer a:hover{color:var(--accent);text-decoration:underline}
.site-footer .btn-primary,.site-footer .btn-primary:hover{color:var(--white);text-decoration:none}
.footer-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem;padding-bottom:2rem;border-bottom:1px solid var(--line-dark)}
.footer-logo img{height:56px;width:auto}
.footer-grid{display:grid;gap:2rem;padding-block:2rem}
.site-footer h2{font-family:var(--display);font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-muted);margin-bottom:.85rem}
.site-footer address{font-style:normal;line-height:1.7}
.site-footer .tel{font-family:var(--display);font-size:1.125rem;font-weight:600}
.emails{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.emails a{display:inline-flex;align-items:center;gap:.6rem;min-height:44px;font-weight:500}
.emails svg{width:20px;height:20px;flex:none;color:var(--accent)}
.social{list-style:none;margin:0;padding:0;display:flex;gap:.5rem}
.social a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--line-dark);border-radius:999px}
.social a:hover{background:var(--plum);border-color:var(--plum);color:var(--white)}
.social svg{width:20px;height:20px;fill:currentColor}
.funders{display:flex;flex-wrap:wrap;align-items:center;gap:1rem}
.funders img{height:56px;width:auto;border-radius:2px}
.legal{padding-top:1.5rem;border-top:1px solid var(--line-dark);font-size:.8125rem;color:var(--on-dark-muted);display:flex;flex-wrap:wrap;gap:.35rem 1.5rem}
.site-footer .legal a{color:var(--on-dark-muted);text-decoration:underline}
.legal span{overflow-wrap:anywhere}
@media (min-width:768px){.footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem 3rem}}
@media (max-width:599px){.footer-top{flex-direction:column;align-items:flex-start}}
@media (min-width:1024px){.legal{justify-content:space-between}}
@media (min-width:1024px){.footer-grid{grid-template-columns:repeat(4,auto);justify-content:space-between;gap:3rem}}

/* contact page ------------------------------------------------------- */
.form-grid{display:grid;gap:1rem;max-width:40rem}
.field{display:grid;gap:.35rem}
.field label{font-size:.875rem;font-weight:600;letter-spacing:.04em;color:var(--ink-2)}
.field input,.field textarea{width:100%;min-height:48px;padding:.65rem .85rem;font:inherit;font-size:1rem;color:#1B1523;background:#FFFFFF;border:1px solid #8A7D95;border-radius:var(--radius)}
.field textarea{min-height:160px;resize:vertical}
.form-note{font-size:.875rem;color:var(--ink-2);line-height:1.5}
.form-status{font-size:.9375rem;color:var(--accent);min-height:1.5em;overflow-wrap:anywhere}
.field-row{display:grid;gap:1rem}
@media (min-width:560px){.field-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.choice{margin:0;padding:0;border:0;display:flex;flex-wrap:wrap;gap:.25rem 1.5rem;align-items:center}
.choice legend{float:left;width:100%;margin-bottom:.35rem;padding:0;font-size:.875rem;font-weight:600;letter-spacing:.04em;color:var(--ink-2)}
.choice label{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;cursor:pointer}
.choice input{width:20px;height:20px;margin:0;accent-color:var(--plum)}
/* Hate Crime: the short form, outlined fields straight on the purple band */
.mini-form{max-width:none}
.mini-form .field label,.mini-form .choice legend{color:rgba(255,255,255,.88)}
.mini-form .field input,.mini-form .field textarea{color:#FFFFFF;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.55);transition:border-color .15s,background-color .15s}
.mini-form .field input:hover,.mini-form .field textarea:hover{border-color:#FFFFFF}
.mini-form .field input:focus,.mini-form .field textarea:focus{outline:none;border-color:#FFFFFF;background:rgba(255,255,255,.12);box-shadow:0 0 0 2px #FFFFFF}
.mini-form .field textarea{min-height:120px}
.mini-form .choice label{color:#FFFFFF}
.mini-form .choice input{accent-color:#FFFFFF}
.mini-form .form-status{color:#FFFFFF}
.mini-form .btn-light{justify-self:start}
.mini-form .form-status:empty{display:none}
.contact-band .wrap{grid-template-columns:minmax(0,1fr)}
@media (min-width:1024px){.contact-band .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4rem;align-items:start}}
/* Contact page: details as icon rows (the Hate Crime band's .reach, recoloured for a light section) */
.contact-side h2{margin-bottom:0}
.reach-light{margin-top:1.5rem;border-color:var(--line-dark)}
.reach-light li{border-color:var(--line-dark);align-items:start}
.reach-light .reach-icon{border-color:var(--plum);color:var(--plum)}
.reach-light a{color:var(--heading);padding-block:.45rem;font-size:1rem;white-space:nowrap}
/* phones, and the narrow side column at 1024–1279px: a small icon beside the label and the email
   on its own full-width line, sized so the whole address fits on one line */
@media (max-width:559px),(min-width:1024px) and (max-width:1279px){
  .reach-light li{grid-template-columns:36px minmax(0,1fr);row-gap:.35rem;column-gap:.75rem;align-items:center}
  .reach-light li>div{display:contents}
  .reach-light .reach-icon{width:36px;height:36px}
  .reach-light .reach-icon svg{width:18px;height:18px}
  .reach-light .reach-label{margin-top:0}
  .reach-light a,.reach-light address{grid-column:1 / -1}
}
@media (max-width:559px){.reach-light a{font-size:clamp(.75rem,calc((100vw - 2.5rem) / 25),1rem);white-space:normal}}
@media (min-width:1024px) and (max-width:1279px){.reach-light a{font-size:.9375rem}}

.reach-light a:hover{color:var(--accent)}
.reach-light address{font-style:normal;line-height:1.6;font-weight:500;color:var(--heading)}
.reach-label{display:block;margin-top:.15rem;font-size:.8125rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.contact-side .form-note{margin-top:1.25rem}
/* Contact form: quieter fields with a purple focus ring */
.contact-form{max-width:none;gap:1.25rem}
.contact-form .field input,.contact-form .field textarea{border-color:var(--line-dark);transition:border-color .15s,box-shadow .15s}
.contact-form .field input:hover,.contact-form .field textarea:hover{border-color:#8A7D95}
.contact-form .field input:focus,.contact-form .field textarea:focus{outline:none;border-color:var(--plum);box-shadow:0 0 0 3px rgba(120,32,145,.18)}
.contact-form .choice input{accent-color:var(--plum)}
.contact-form .form-status:empty{display:none}
.contact-form .form-note{padding-top:1rem;border-top:1px solid var(--line-dark)}