/* WOCA public site. Every colour, face and size comes from the tokens below; the Website tab in the console picks them (data-skin, data-accent, data-font, data-scale, data-corner, data-motion, data-variation on ). See docs/WIRING.md → Website. */ :root{ color-scheme:light; --bg:#F6F3EE; --bg-2:#EDE8E0; --ink:#1A1814; --ink-2:#6F695F; --line:rgba(26,24,20,.12); --veil:rgba(246,243,238,.84); --accent:#A8862F; --accent-ink:#F6F3EE; --display:"Cormorant Garamond",Georgia,serif; --body:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif; --dw:400; --track:-.015em; --radius:999px; --card:18px; --scale:1; --gutter:clamp(20px,5vw,72px); --max:1180px; --ease:cubic-bezier(.2,.75,.2,1); } /* Themes */ :root[data-skin="ivory"]{ color-scheme:light; --bg:#F6F3EE; --bg-2:#EDE8E0; --ink:#1A1814; --ink-2:#6F695F; --line:rgba(26,24,20,.12); --veil:rgba(246,243,238,.84) } :root[data-skin="porcelain"]{ color-scheme:light; --bg:#FFFFFF; --bg-2:#F3F3F5; --ink:#111216; --ink-2:#696C74; --line:rgba(17,18,22,.1); --veil:rgba(255,255,255,.84) } :root[data-skin="stone"]{ color-scheme:light; --bg:#E8E4DD; --bg-2:#DDD7CD; --ink:#1B1915; --ink-2:#686257; --line:rgba(27,25,21,.14); --veil:rgba(232,228,221,.86) } :root[data-skin="onyx"]{ color-scheme:dark; --bg:#0F0E0C; --bg-2:#181613; --ink:#F1EDE5; --ink-2:#9A948A; --line:rgba(241,237,229,.13); --veil:rgba(15,14,12,.82) } :root[data-skin="maroon"]{ color-scheme:dark; --bg:#2A0B12; --bg-2:#35101A; --ink:#F6ECE8; --ink-2:#C4A7AB; --line:rgba(246,236,232,.14); --veil:rgba(42,11,18,.84) } @media (prefers-color-scheme:dark){ :root[data-skin="auto"]{ color-scheme:dark; --bg:#0F0E0C; --bg-2:#181613; --ink:#F1EDE5; --ink-2:#9A948A; --line:rgba(241,237,229,.13); --veil:rgba(15,14,12,.82) } } /* Accents, tuned for light and dark grounds */ :root[data-accent="gold"]{ --accent:#A8862F } :root[data-accent="oxblood"]{ --accent:#7A1F2E } :root[data-accent="forest"]{ --accent:#24503D } :root[data-accent="ink"]{ --accent:var(--ink) } :root[data-skin="onyx"][data-accent="gold"],:root[data-skin="maroon"][data-accent="gold"]{ --accent:#D3B26A } :root[data-skin="onyx"][data-accent="oxblood"],:root[data-skin="maroon"][data-accent="oxblood"]{ --accent:#E08C99 } :root[data-skin="onyx"][data-accent="forest"],:root[data-skin="maroon"][data-accent="forest"]{ --accent:#8EC2A4 } @media (prefers-color-scheme:dark){ :root[data-skin="auto"][data-accent="gold"]{ --accent:#D3B26A } :root[data-skin="auto"][data-accent="oxblood"]{ --accent:#E08C99 } :root[data-skin="auto"][data-accent="forest"]{ --accent:#8EC2A4 } } :root[data-accent]{ --accent-ink:var(--bg) } /* Type pairs */ :root[data-font="cormorant"]{ --display:"Cormorant Garamond",Georgia,serif; --body:"Manrope",system-ui,sans-serif; --dw:400 } :root[data-font="newsreader"]{ --display:"Newsreader",Georgia,serif; --body:"Albert Sans",system-ui,sans-serif; --dw:300 } :root[data-font="instrument"]{ --display:"Instrument Serif",Georgia,serif; --body:"Geist",system-ui,sans-serif; --dw:400 } :root[data-font="fraunces"]{ --display:"Fraunces",Georgia,serif; --body:"DM Sans",system-ui,sans-serif; --dw:300 } :root[data-font="bodoni"]{ --display:"Bodoni Moda",Georgia,serif; --body:"Figtree",system-ui,sans-serif; --dw:400 } :root[data-font="gloock"]{ --display:"Gloock",Georgia,serif; --body:"Outfit",system-ui,sans-serif; --dw:400; --track:-.02em } :root[data-scale="calm"]{ --scale:.86 } :root[data-scale="bold"]{ --scale:1.14 } :root[data-corner="soft"]{ --radius:12px; --card:14px } :root[data-corner="sharp"]{ --radius:0; --card:0 } *{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-weight:300;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background .5s,color .5s} h1,h2,h3,h4{font-family:var(--display);font-weight:var(--dw);letter-spacing:var(--track);line-height:1.02;margin:0;text-wrap:balance} p{margin:0} a{color:inherit} img{max-width:100%} em{font-style:italic;color:var(--accent)} :focus-visible{outline:1.5px solid var(--accent);outline-offset:4px} .wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)} .k{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-2);font-weight:500;font-family:var(--body)} .muted{color:var(--ink-2)} .skip{position:absolute;left:-999px}.skip:focus{left:16px;top:16px;z-index:99;background:var(--ink);color:var(--bg);padding:8px 12px} /* Header */ .hd{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;transition:transform .45s var(--ease),background .3s,border-color .3s;border-bottom:1px solid transparent} .hd.solid{background:var(--veil);backdrop-filter:saturate(1.4) blur(16px);-webkit-backdrop-filter:saturate(1.4) blur(16px);border-bottom-color:var(--line)} .hd.tuck{transform:translateY(-100%)} .hd-in{display:flex;align-items:center;gap:28px;min-height:72px} .brand{font-family:var(--display);font-size:24px;letter-spacing:.2em;text-decoration:none;font-weight:500;text-transform:uppercase} .nav{display:flex;gap:26px;margin-left:auto;font-size:13.5px;letter-spacing:.04em} .nav a{text-decoration:none;color:var(--ink-2);position:relative;padding-block:6px;transition:color .25s} .nav a:hover,.nav a[aria-current="page"]{color:var(--ink)} .nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--accent);transition:right .35s var(--ease)} .nav a[aria-current="page"]::after,.nav a:hover::after{right:0} .menu-btn{all:unset;display:none;cursor:pointer;margin-left:auto;font-size:12px;letter-spacing:.2em;text-transform:uppercase;padding:10px 0} .overlay{position:fixed;inset:0;z-index:60;background:var(--bg);display:flex;flex-direction:column;padding:calc(20px + env(safe-area-inset-top,0px)) var(--gutter) calc(30px + env(safe-area-inset-bottom,0px));transform:translateY(-102%);transition:transform .6s var(--ease)} .overlay.open{transform:none} .overlay .top{display:flex;justify-content:space-between;align-items:center;min-height:52px} .overlay nav{display:grid;gap:6px;margin-top:auto} .overlay nav a{font-family:var(--display);font-size:clamp(40px,11vw,64px);text-decoration:none;line-height:1.1} .overlay nav a[aria-current="page"]{color:var(--accent);font-style:italic} .overlay .foot{margin-top:auto;padding-top:28px;color:var(--ink-2);font-size:14px} /* Buttons */ .btn{display:inline-flex;align-items:center;gap:10px;font:500 14px/1 var(--body);letter-spacing:.05em;text-decoration:none;border:1px solid var(--ink);border-radius:var(--radius);padding:16px 26px;cursor:pointer;background:transparent;color:var(--ink);transition:transform .3s var(--ease),background .3s,color .3s,border-color .3s} .btn:hover{transform:translateY(-1px)} .btn.solid{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)} .btn.sm{padding:11px 18px;font-size:13px} .btn .a{display:inline-block;transition:transform .3s var(--ease)} .btn:hover .a{transform:translateX(4px)} .ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:40px} .link{text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px;transition:border-color .25s} .link:hover{border-color:var(--accent)} /* Sections */ main{display:block;min-height:60vh} .sec{padding-block:clamp(72px,12vh,140px);position:relative} .sec + .sec{border-top:1px solid var(--line)} .hero{padding-block:clamp(64px,14vh,160px) clamp(56px,10vh,120px)} .hero h1{font-size:calc(clamp(50px,8.8vw,128px) * var(--scale));margin-top:22px} .hero h1 .l{display:block} .hero .lede{font-size:clamp(18px,1.6vw,22px);color:var(--ink-2);max-width:31em;margin-top:28px} .h2{font-size:calc(clamp(38px,5.6vw,80px) * var(--scale));margin-top:16px} .h3{font-size:clamp(26px,2.6vw,34px)} .sec-lede{color:var(--ink-2);max-width:32em;margin-top:22px;font-size:clamp(17px,1.4vw,19px)} .hair{display:block;height:1px;background:var(--accent);width:0;margin-top:34px;transition:width 1.4s var(--ease) .5s} .in .hair{width:84px} /* Grids */ .grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:52px} .grid.c4{grid-template-columns:repeat(4,1fr)} .grid.c3{grid-template-columns:repeat(3,1fr)} .cell{background:var(--bg);padding:34px 28px;display:grid;gap:12px;align-content:start;transition:background .35s} .cell:hover{background:var(--bg-2)} .cell .k{color:var(--accent)} .cell h3{font-size:clamp(28px,2.4vw,34px)} .cell p{color:var(--ink-2);font-size:15.5px} .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,64px);margin-top:56px} .step{border-top:1px solid var(--line);padding-top:22px} .step .n{font-family:var(--display);font-size:60px;line-height:1;color:var(--accent);font-weight:300} .step h3{font-size:28px;margin:14px 0 8px} .step p{color:var(--ink-2);font-size:15.5px} .two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,110px);align-items:start} /* Registration */ .checks{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:0;border-top:1px solid var(--line)} .checks li{display:grid;grid-template-columns:28px 1fr;gap:12px;padding:16px 0;border-bottom:1px solid var(--line)} .checks li::before{content:"";width:14px;height:8px;border-left:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);transform:rotate(-45deg) translate(2px,4px)} .timeline{list-style:none;margin:28px 0 0;padding:0;position:relative} .timeline li{position:relative;padding:0 0 30px 34px} .timeline li::before{content:"";position:absolute;left:5px;top:10px;bottom:-4px;width:1px;background:var(--line)} .timeline li:last-child::before{display:none} .timeline li::after{content:"";position:absolute;left:0;top:6px;width:11px;height:11px;border-radius:50%;border:1.5px solid var(--accent);background:var(--bg)} .timeline h4{font-family:var(--body);font-weight:500;font-size:17px;letter-spacing:0} .timeline .d{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-left:10px} .timeline p{color:var(--ink-2);font-size:15px;margin-top:4px} .pkgs{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin-top:52px} .pkg{border:1px solid var(--line);border-radius:var(--card);padding:30px 26px;display:flex;flex-direction:column;gap:14px;position:relative;transition:border-color .3s,transform .4s var(--ease)} .pkg:hover{border-color:var(--accent);transform:translateY(-3px)} .pkg .badge{position:absolute;top:-11px;left:24px;background:var(--accent);color:var(--accent-ink);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;padding:5px 10px;border-radius:var(--radius)} .pkg h3{font-size:32px} .pkg .tag{color:var(--ink-2);font-size:15px} .pkg .price{font-family:var(--display);font-size:30px;color:var(--accent);margin-top:4px} .pkg ul{list-style:none;margin:6px 0 10px;padding:0;display:grid;gap:8px;font-size:14.5px;color:var(--ink-2)} .pkg li{padding-left:18px;position:relative} .pkg li::before{content:"";position:absolute;left:0;top:.75em;width:8px;height:1px;background:var(--accent)} .pkg .btn{margin-top:auto;align-self:flex-start} .faq{margin-top:40px;border-top:1px solid var(--line);max-width:860px} .faq details{border-bottom:1px solid var(--line)} .faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;padding:22px 0;font-family:var(--display);font-size:clamp(22px,2vw,28px)} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";font-family:var(--body);font-weight:300;color:var(--accent);transition:transform .3s} .faq details[open] summary::after{transform:rotate(45deg)} .faq .a{color:var(--ink-2);padding:0 0 22px;max-width:40em} /* News + events */ .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:36px} .chip{all:unset;cursor:pointer;font-size:13px;padding:8px 14px;border:1px solid var(--line);border-radius:var(--radius);transition:all .2s} .chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)} .list{margin-top:36px;border-top:1px solid var(--line)} .story{display:grid;grid-template-columns:160px 1fr;gap:28px;padding:30px 0;border-bottom:1px solid var(--line)} .story .meta{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);display:grid;gap:4px;align-content:start} .story .meta b{color:var(--accent);font-weight:500} .story h3{font-size:clamp(26px,2.6vw,36px)} .story p{color:var(--ink-2);margin-top:10px;max-width:42em} .story .src{display:inline-block;margin-top:14px;font-size:14px} .pin{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);border:1px solid var(--accent);border-radius:var(--radius);padding:2px 8px;margin-left:10px;vertical-align:4px;font-family:var(--body)} .empty{padding:60px 0;color:var(--ink-2);font-family:var(--display);font-size:clamp(24px,2.6vw,34px);font-style:italic} .event{display:grid;grid-template-columns:120px 1fr auto;gap:28px;align-items:start;padding:32px 0;border-bottom:1px solid var(--line)} .date{font-family:var(--display);line-height:1} .date b{display:block;font-size:64px;font-weight:300;color:var(--accent)} .date span{font-size:13px;letter-spacing:.2em;text-transform:uppercase;font-family:var(--body);color:var(--ink-2)} .event h3{font-size:clamp(26px,2.6vw,36px)} .event .where{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin-top:8px} .event p{color:var(--ink-2);margin-top:10px;max-width:40em} .past .event{opacity:.6;grid-template-columns:120px 1fr} .past .date b{font-size:40px} /* About */ .story-text{font-family:var(--display);font-size:clamp(24px,2.6vw,36px);line-height:1.3;display:grid;gap:1em;max-width:30em} .nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:30px;margin-top:48px} .nums b{display:block;font-family:var(--display);font-size:clamp(48px,6vw,84px);font-weight:300;color:var(--accent);line-height:1} .nums span{color:var(--ink-2);font-size:15px} /* Contact */ form{display:grid;gap:24px} .f{display:grid;gap:8px} .f label{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)} .f input,.f select,.f textarea{font:300 18px/1.4 var(--body);color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--line);padding:10px 0;border-radius:0;width:100%;transition:border-color .3s} .f textarea{resize:vertical;min-height:90px} .f select option{color:#1A1814;background:#fff} .f input:focus,.f select:focus,.f textarea:focus{outline:none;border-bottom-color:var(--accent)} .f-row{display:grid;grid-template-columns:1fr 1fr;gap:24px} .hp{position:absolute;left:-5000px} .err{color:#C0453E;font-size:14px;min-height:1.2em} .side{display:grid;gap:26px} .side b{display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--ink-2);margin-bottom:6px;font-family:var(--body)} .side .v{font-family:var(--display);font-size:clamp(22px,2vw,28px);line-height:1.3;white-space:pre-line} .copy{all:unset;cursor:pointer;border-bottom:1px solid var(--line)} .copy:hover{border-color:var(--accent)} .thanks .ref{font-family:var(--display);font-size:34px;color:var(--accent);margin:14px 0} /* Footer */ footer.ft{border-top:1px solid var(--line);padding-block:56px calc(40px + env(safe-area-inset-bottom,0px));margin-top:40px} .ft-in{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px} .ft .brand{font-size:22px} .ft p{color:var(--ink-2);font-size:14.5px;margin-top:12px;max-width:26em} .ft nav{display:grid;gap:10px;font-size:14.5px} .ft nav a{text-decoration:none;color:var(--ink-2)} .ft nav a:hover{color:var(--ink)} .ft .legal{grid-column:1/-1;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:12px;letter-spacing:.08em;color:var(--ink-2);border-top:1px solid var(--line);padding-top:22px;margin-top:10px} .preview-bar{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:70;background:var(--ink);color:var(--bg);font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:9px 16px;border-radius:999px;pointer-events:none;opacity:.9} .toast{position:fixed;left:50%;bottom:calc(60px + env(safe-area-inset-bottom,0px));transform:translate(-50%,10px);opacity:0;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:var(--radius);font-size:13px;transition:all .3s;z-index:80;pointer-events:none} .toast.show{opacity:1;transform:translate(-50%,0)} /* Motion: everything is visible at rest; reveals only move it a little */ [data-motion="on"] .rv{transition:transform 1s var(--ease),opacity 1s var(--ease)} [data-motion="on"] .rv.wait{transform:translateY(30px)} [data-motion="on"] .hero .l{animation:rise 1.1s var(--ease) both} [data-motion="on"] .hero .l:nth-child(2){animation-delay:.12s} [data-motion="on"] .hero .lede{animation:rise 1.1s var(--ease) .24s both} [data-motion="on"] .hero .ctas{animation:rise 1.1s var(--ease) .36s both} @keyframes rise{from{transform:translateY(22px);opacity:0}to{transform:none;opacity:1}} [data-motion="on"] main{animation:fade .6s var(--ease) both} @keyframes fade{from{opacity:0}to{opacity:1}} /* ── Variation: Gallery — centred, full-height sections that settle into place ── */ [data-variation="gallery"] .hero,[data-variation="gallery"] .center{text-align:center} [data-variation="gallery"] .hero .lede,[data-variation="gallery"] .center .sec-lede{margin-inline:auto} [data-variation="gallery"] .hero .ctas,[data-variation="gallery"] .center .ctas{justify-content:center} [data-variation="gallery"] .hero .hair,[data-variation="gallery"] .center .hair{margin-inline:auto} [data-variation="gallery"] body[data-page="home"] .sec{min-height:88svh;display:grid;align-content:center} [data-variation="gallery"] body[data-page="home"]{scroll-snap-type:y proximity} [data-variation="gallery"] .sec + .sec{border-top:0} [data-variation="gallery"] .num{display:none} /* ── Variation: Chapters — editorial, left-aligned, numbered ── */ [data-variation="chapters"] .num,[data-variation="slides"] body:not([data-page="home"]) .num{display:inline-block;font-family:var(--display);color:var(--accent);font-size:15px;letter-spacing:.06em;margin-right:14px} [data-variation="chapters"] .hero h1{max-width:12em} [data-variation="chapters"] .grid{border-inline:0} [data-variation="chapters"] .cell{padding-inline:0 28px} [data-variation="chapters"] .cell + .cell{padding-left:28px} /* ── Variation: Slides — the home page runs as full-screen slides ── */ html[data-variation="slides"]:has(body[data-page="home"]){scroll-snap-type:y mandatory} [data-variation="slides"] body[data-page="home"] .sec{min-height:100svh;scroll-snap-align:start;display:grid;align-content:center;text-align:center;border-top:0} [data-variation="slides"] body[data-page="home"] .sec-lede,[data-variation="slides"] body[data-page="home"] .hero .lede{margin-inline:auto} [data-variation="slides"] body[data-page="home"] .ctas{justify-content:center} [data-variation="slides"] body[data-page="home"] .hair{margin-inline:auto} [data-variation="slides"] body[data-page="home"] .num{display:none} [data-variation="slides"] body[data-page="home"] footer.ft{scroll-snap-align:end;margin-top:0} .dots{display:none} [data-variation="slides"] body[data-page="home"] .dots{display:grid;position:fixed;right:clamp(14px,2.4vw,32px);top:50%;transform:translateY(-50%);z-index:30;gap:14px} .dots a{width:6px;height:6px;border-radius:50%;background:var(--ink-2);opacity:.35;display:block;transition:all .3s} .dots a.on{opacity:1;background:var(--accent);transform:scale(1.5)} [data-variation="gallery"] .num{display:none} @media (max-width:960px){ .nav,.hd .btn{display:none} .menu-btn{display:block} .grid.c4{grid-template-columns:1fr 1fr} .grid.c3{grid-template-columns:1fr} .two{grid-template-columns:1fr} .ft-in{grid-template-columns:1fr 1fr} .ft-in>div:first-child{grid-column:1/-1} [data-variation="chapters"] .cell,[data-variation="chapters"] .cell + .cell{padding:28px 20px} } @media (max-width:640px){ body{font-size:16px} .grid.c4{grid-template-columns:1fr} .steps{grid-template-columns:1fr;gap:22px} .story,.event,.past .event{grid-template-columns:1fr;gap:10px} .event .btn{justify-self:start} .date b{font-size:44px} .f-row{grid-template-columns:1fr} .dots{display:none!important} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important;transition-duration:.01ms!important} html{scroll-behavior:auto} [data-motion] .rv.wait{transform:none;opacity:1} }