/* ==========================================================================
   CONTACT — a Notion page you write your message in
   The Connect page's idea (one place, every way to reach her, every action
   answering back) told in Notion: the subject is the page's title, the
   topic and timing are select properties you choose from, every field says
   whether it is Required or Optional, the to-dos tick as you fill it, and
   Send opens a Share menu. Beside it: the quicker way
   (book a call), her address, and her other places as bookmarks.
   (Built on notion.css: its tokens, tags and to-do boxes.)
   ========================================================================== */
.ct { position: relative; z-index: 1; padding: clamp(104px, 11vw, 140px) 0 40px; }
.ct-help { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(24px, 4vw, 56px); align-items: start; }

/* --- the header (her words) ------------------------------------------------------------- */
.ct-head { text-align: center; }
.ct-head .label { justify-content: center; }
.ct-head h1 { margin-top: 14px; font: 500 clamp(2.6rem, 6vw, 4.8rem)/1 var(--f-display); letter-spacing: -.035em; color: var(--ink); }
.ct-head h1 em { font-weight: 400; }
.ct-lede { max-width: 56ch; margin: 18px auto 0; font-size: clamp(16px, 1.35vw, 18.5px); color: var(--ink-3); }

/* --- the three doors ------------------------------------------------------------------------ */
.doors { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: clamp(34px, 5vw, 56px) 0 clamp(26px, 3.5vw, 40px); }
.door { position: relative; overflow: hidden; display: grid; align-content: start; gap: 8px; padding: 22px 22px 20px; border-radius: 18px; text-align: left; background: var(--sheet); box-shadow: var(--sh-block); transition: transform .45s var(--e-spring), box-shadow .3s; isolation: isolate; }
/* its colour rises from the bottom when you point at it */
.door::before { content: ""; position: absolute; inset: auto 0 0; z-index: -1; height: 0; background: var(--cbg); transition: height .5s var(--e-out); }
.door:hover::before, .door.on::before { height: 100%; }
.door:hover { transform: translateY(-4px); box-shadow: var(--sh-lift); }
.door.on { box-shadow: 0 0 0 2px var(--acc), var(--sh-lift); }
.door:focus-visible { outline-offset: 4px; }
.dr-ic { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 16px; background: var(--paper); transition: background-color .3s, transform .5s var(--e-spring); }
.door:hover .dr-ic, .door.on .dr-ic { background: var(--glass-2); transform: rotate(-4deg); }
.dr-ic svg { width: 46px; height: 46px; fill: var(--sheet); stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.dr-ic svg * { transform-box: fill-box; transition: transform .55s var(--e-spring), opacity .3s, fill .3s; }
.dr-n { margin-top: 6px; font: 500 12px/1 var(--f-mono); color: var(--ink-4); }
.door b { font: 500 clamp(1.4rem, 2.2vw, 1.75rem)/1.1 var(--f-display); letter-spacing: -.015em; color: var(--ink); }
.dr-t { font-size: 14.5px; line-height: 1.55; color: var(--ink-3); }
.door:hover .dr-t, .door.on .dr-t { color: var(--cfg); }
.dr-go { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 14px; font-weight: 650; color: var(--ink); }
.dr-go svg { transition: transform .35s var(--e-spring); }
.door:hover .dr-go svg { transform: translateX(4px); }
/* Email us: the envelope opens and the letter rises */
.d-flap-up { opacity: 0; } .d-letter { transform-origin: center; }
.door:hover .d-letter, .door.on .d-letter { transform: translateY(-9px); }
.door:hover .d-flap-up, .door.on .d-flap-up { opacity: 1; }
.door:hover .d-letter path, .door.on .d-letter path { stroke: var(--acc); }
/* Affiliate: a coin drops into the jar, and it sparkles */
.d-coin { fill: #FDECC8; } .d-coin, .d-coin-s { transform: translateY(0); }
.d-spark { opacity: 0; }
.door:hover .d-coin, .door:hover .d-coin-s { animation: coin 1.1s var(--e-out) infinite; }
.door:hover .d-spark, .door.on .d-spark { opacity: 1; stroke: var(--acc); }
.door.on .d-jar { fill: #FDECC8; }
@keyframes coin { 0% { transform: translateY(-4px); opacity: 0; } 25% { opacity: 1; } 70% { transform: translateY(22px); opacity: 1; } 100% { transform: translateY(22px); opacity: 0; } }
/* Sponsorship: the megaphone calls out */
.d-horn { transform-origin: 0% 50%; }
.d-w1, .d-w2 { fill: none; opacity: .25; }
.door:hover .d-horn, .door.on .d-horn { transform: rotate(-6deg); fill: #FFE2DD; }
.door:hover .d-w1 { animation: wave 1s ease-out infinite; } .door:hover .d-w2 { animation: wave 1s ease-out .2s infinite; }
.door.on .d-w1, .door.on .d-w2 { opacity: 1; stroke: var(--acc); }
@keyframes wave { 0% { opacity: .2; transform: translateX(-3px); } 50% { opacity: 1; } 100% { opacity: .2; transform: translateX(3px); } }
/* an ink under the open door */
.door-ink { position: absolute; left: 0; top: 0; width: var(--w, 0); height: 4px; border-radius: 2px; background: var(--c, var(--ink)); transform: translate(var(--x, 0), calc(var(--y, 0) + 8px)); transition: transform .5s var(--e-spring), width .4s var(--e-out), background-color .3s; }

/* --- a door's page --------------------------------------------------------------------------- */
.ct-pane { animation: pane-in .45s var(--e-out); scroll-margin-top: 100px; }
.ct-pane[hidden] { display: none; }
@keyframes pane-in { from { opacity: 0; transform: translateY(14px); } }
.pg { max-width: 860px; margin-inline: auto; padding: 0 clamp(20px, 4vw, 48px) clamp(24px, 3.5vw, 40px); border-radius: 18px; background: var(--sheet); box-shadow: var(--sh-lift); }
.pg-cover { height: 90px; margin: 0 calc(-1 * clamp(20px, 4vw, 48px)); border-radius: 18px 18px 0 0; background: radial-gradient(circle at 15% 150%, var(--gloss) 0 38%, transparent 39%), radial-gradient(circle at 85% -60%, var(--gloss) 0 46%, transparent 47%), var(--cbg); }
.pg-icon { display: grid; place-items: center; width: 64px; height: 64px; margin-top: -32px; border-radius: 14px; font-size: 34px; background: var(--sheet); box-shadow: 0 0 0 1px var(--line); }
.pg h2 { margin-top: 14px; font: 500 clamp(1.9rem, 3.6vw, 2.7rem)/1.05 var(--f-display); letter-spacing: -.025em; color: var(--ink); }
.pg-lede { margin-top: 10px; max-width: 62ch; font-size: 16px; color: var(--ink-3); }
.pg-props { margin: 18px -6px 4px; }
.pg-props a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.pg-k { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 24px; font: 600 12px/1 var(--f-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-4); }
.pg-k-s { font: 400 13px/1.3 var(--f-ui); letter-spacing: 0; text-transform: none; }
.pg-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.pg-steps li { display: grid; grid-template-columns: auto 1fr; gap: 10px; padding: 14px; border-radius: 12px; background: var(--paper); font-size: 14px; line-height: 1.5; color: var(--ink-3); }
.pg-steps b { display: block; margin-bottom: 4px; font-size: 15px; color: var(--ink); }
.ps-n { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font: 600 12.5px/1 var(--f-ui); color: var(--cfg); background: var(--cbg); }
.pg-go { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 24px; }
.pg-go .btn svg { width: 14px; height: 14px; transition: transform .35s var(--e-spring); }
.pg-go .btn:hover svg { transform: translateX(3px); }
.pg-alt { font-size: 14px; font-weight: 600; color: var(--ink-3); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.pg-alt:hover { color: var(--ink); }
.brief { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin-top: 12px; }
.bf { display: grid; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.bf .prop-in { max-width: none; height: 40px; }
.bf-wide { grid-column: 1 / -1; }
.bf textarea { width: 100%; padding: 12px 14px; border: 0; border-radius: 8px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); resize: vertical; font: 400 15.5px/1.55 var(--f-ui); color: var(--ink-2); }
.bf textarea:focus { outline: none; background: var(--sheet); box-shadow: inset 0 0 0 2px var(--focus); }
.pg-fine { font-size: 13px; color: var(--ink-4); }

/* --- her other places ---------------------------------------------------------------------- */
.ct-social { margin-top: clamp(56px, 8vw, 96px); text-align: center; }
.ct-social h2 { font: 500 clamp(1.8rem, 3.6vw, 2.6rem)/1.05 var(--f-display); letter-spacing: -.025em; color: var(--ink); }
.ct-social > p { margin-top: 10px; color: var(--ink-3); }
.ct-links { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 26px; text-align: left; }
.ct-links .lk { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; padding: 14px; border-radius: 14px; background: var(--sheet); box-shadow: var(--sh-block); transition: transform .4s var(--e-spring), box-shadow .3s; }
.ct-links .lk:hover { background: var(--sheet); transform: translateY(-3px); box-shadow: var(--sh-lift); }
.ct-links .lk-go { display: none; }
.ct-links .lk-t small { white-space: normal; }

/* --- the page --------------------------------------------------------------------- */
.ct-page { position: relative; padding: 0 clamp(18px, 3vw, 40px) clamp(22px, 3vw, 34px); border-radius: 14px; background: var(--sheet); box-shadow: var(--sh-lift); }
.ct-cover { height: 96px; margin: 0 calc(-1 * clamp(18px, 3vw, 40px)); border-radius: 14px 14px 0 0;
  background: radial-gradient(circle at 18% 130%, var(--t-yellow-bg) 0 36%, transparent 37%), radial-gradient(circle at 82% -40%, var(--t-blue-bg) 0 46%, transparent 47%), radial-gradient(circle at 55% 160%, var(--t-pink-bg) 0 30%, transparent 31%), var(--t-orange-bg); }
/* in the dark, the same three shapes as soft tints with a fine lit edge, like a cover seen at night */
:root[data-theme="dark"] .ct-cover { background:
  radial-gradient(circle at 18% 130%, rgba(232,190,100,.2) 0 35.6%, rgba(232,190,100,.72) 35.6% 36%, transparent 36.3%),
  radial-gradient(circle at 82% -40%, rgba(100,165,225,.2) 0 45.6%, rgba(100,165,225,.72) 45.6% 46%, transparent 46.3%),
  radial-gradient(circle at 55% 160%, rgba(225,135,170,.22) 0 29.6%, rgba(225,135,170,.68) 29.6% 30%, transparent 30.3%),
  linear-gradient(100deg, #2A2826, #22262C); }
.ct-icon { display: block; width: 64px; height: 64px; margin: -32px 0 8px; padding: 6px; border-radius: 12px; background: var(--sheet); }
.ct-icon svg { width: 100%; height: 100%; }
.ct-kicker { font: 500 12px/1 var(--f-mono); color: var(--ink-4); letter-spacing: .03em; }
.ct-title { width: 100%; margin-top: 8px; padding: 2px 0; border: 0; background: none; font: 500 clamp(2rem, 4.2vw, 3.2rem)/1.08 var(--f-display); letter-spacing: -.03em; color: var(--ink); }
.ct-title::placeholder { color: #C9C7C2; }
.ct-title:focus { outline: none; }
.ct-guide { display: block; margin-top: 10px; font-size: 13.5px; color: var(--ink-3); }
/* Required and Optional, as Notion tags; a filled required field turns to Done */
/* required: a red *, which turns into a green check once the field is filled */
.req { display: inline-block; margin-left: 3px; font-weight: 700; color: #D44C47; transition: color .3s, transform .4s var(--e-spring); }
.req::before { content: "*"; }
.ok .req { color: #2E7D4F; transform: scale(1.1); }
.ok .req::before { content: "\2713"; }
.ct-guide .req { margin: 0 2px; }
/* what it is about: a list of choices, one per line */
.topics { display: grid; gap: 6px; }
.topics .chip { justify-self: start; padding: 7px 12px 7px 10px; font-size: 14px; }
.ch-e { font-size: 15px; line-height: 1; }
.need, .opt { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 4px; font: 600 11.5px/1 var(--f-ui); white-space: nowrap; }
.need { color: #5D1715; background: var(--t-red-bg); }
.opt { color: var(--ink-3); background: var(--paper-2); }
.ok > .need, .ok .ct-body-h .need { color: #1C3829; background: var(--t-green-bg); }
.ct-props { margin: 18px 0 6px; }
.ct-props > div { grid-template-columns: 150px minmax(0, 1fr); gap: 6px 10px; min-height: 44px; padding: 6px; align-items: start; }
.ct-props > div > dt { min-height: 30px; }
.ct-props > div > .need, .ct-props > div > .opt { margin-top: 5px; transition: background-color .3s, color .3s; }
.ct-props dd { display: grid; gap: 6px; }
.pick { font-size: 12.5px; color: var(--ink-4); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
/* the choices look like choices: a radio dot in each, filled when it is chosen */
.chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px 5px 8px; border-radius: 6px; font-size: 13.5px; opacity: .8; box-shadow: inset 0 0 0 1px rgba(55, 53, 47, .1); transition: opacity .2s, transform .3s var(--e-spring), box-shadow .2s; }
.chip::before { content: ""; flex: none; width: 11px; height: 11px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; opacity: .7; transition: box-shadow .25s var(--e-spring), opacity .2s; }
.chip:hover { opacity: 1; transform: translateY(-1px); box-shadow: inset 0 0 0 1px currentColor; }
.chip.on { opacity: 1; box-shadow: 0 0 0 1.5px currentColor; }
.chip.on::before { opacity: 1; box-shadow: inset 0 0 0 3.5px currentColor; }
.prop-in { width: 100%; max-width: 340px; height: 34px; padding: 0 10px; border: 0; border-radius: 6px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); font-size: 15px; color: var(--ink); transition: box-shadow .2s, background-color .2s; }
.prop-in::placeholder { color: var(--ink-4); }
.prop-in:hover { box-shadow: inset 0 0 0 1px var(--line-2); }
.prop-in:focus { outline: none; background: var(--sheet); box-shadow: inset 0 0 0 2px var(--focus); }
.ct-body { position: relative; margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.ct-body-h { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.ct-body textarea { width: 100%; min-height: 170px; padding: 12px 14px; border: 0; border-radius: 8px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); resize: vertical; font: 16.5px/1.6 var(--f-ui); color: var(--ink-2); transition: box-shadow .2s, background-color .2s; }
.ct-body textarea::placeholder { color: #A9A7A2; }
.ct-body textarea:hover { box-shadow: inset 0 0 0 1px var(--line-2); }
.ct-body textarea:focus { outline: none; background: var(--sheet); box-shadow: inset 0 0 0 2px var(--focus); }
@keyframes sl-in { from { opacity: 0; transform: translateY(-4px); } }
/* the foot: the to-dos, and Send */
.ct-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--line); }
.todo-list { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.todo-list li { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-3); transition: color .3s; }
.todo-list li .chk { transition: background-color .25s, border-color .25s; }
.todo-list li.on { color: var(--ink-4); text-decoration: line-through; text-decoration-color: var(--ink-4); }
.todo-list li.on .chk { background: var(--focus); border-color: var(--focus); }
.todo-list li.on .chk::after { content: ""; width: 7px; height: 4px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg); animation: tickm .3s var(--e-spring); }
.send-wrap { position: relative; }
.send { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 18px; border-radius: 8px; font: 650 15px/1 var(--f-ui); color: var(--ink-3); background: var(--paper-2); transition: background-color .3s, color .3s, transform .35s var(--e-spring), box-shadow .3s; }
.send:disabled { cursor: default; }
.send.ready { color: var(--on-ink); background: var(--ink); box-shadow: 0 10px 24px -8px rgba(25,25,24,.45); }
.send.ready:hover { transform: translateY(-2px); }
.send.ready:hover svg { transform: translate(2px, -2px); }
.send svg { transition: transform .35s var(--e-spring); }
.share { position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 5; width: 240px; padding: 6px; border-radius: 10px; background: var(--sheet); box-shadow: var(--sh-lift); animation: sl-in .25s var(--e-out); }
.sh-h { padding: 6px 8px 4px; font-size: 12px; font-weight: 600; color: var(--ink-4); }
.sh { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border-radius: 6px; font-size: 14.5px; color: var(--ink); text-align: left; }
.sh:hover { background: var(--hover); }
.sh-ic { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 6px; color: #fff; font: 700 12px/1 var(--f-ui); background: var(--c); }

/* --- the side ----------------------------------------------------------------------- */
.ct-side { position: sticky; top: 96px; display: grid; gap: 22px; }
.ct-book { position: relative; display: grid; gap: 8px; padding: 20px; border-radius: 14px; background: var(--t-yellow-bg); color: var(--t-yellow); box-shadow: var(--sh-block); transition: transform .4s var(--e-spring), box-shadow .3s; }
.ct-book:hover { transform: translateY(-3px) rotate(-.4deg); box-shadow: var(--sh-lift); }
.cb-ic { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: var(--glass-2); color: var(--ink); }
.cb-ic svg { width: 22px; height: 22px; }
.ct-book b { font: 500 1.5rem/1.1 var(--f-display); color: var(--ink); letter-spacing: -.015em; }
.ct-book > span:not(.cb-ic):not(.cb-go) { font-size: 14.5px; }
.cb-go { display: inline-flex; align-items: center; gap: 8px; justify-self: start; margin-top: 4px; padding: 8px 12px; border-radius: 8px; font-weight: 650; color: var(--on-ink); background: var(--ink); }
.cb-go svg { transition: transform .35s var(--e-spring); }
.ct-book:hover .cb-go svg { transform: translateX(3px); }
.ct-addr .label, .ct-else .label { margin-bottom: 10px; }
.addr { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 12px 14px; border-radius: 10px; background: var(--sheet); box-shadow: var(--sh-block); font: 500 14.5px/1.2 var(--f-mono); color: var(--ink); transition: box-shadow .25s; }
.addr small { font: 600 11.5px/1 var(--f-ui); color: var(--ink-4); text-transform: uppercase; letter-spacing: .06em; }
.addr:hover { box-shadow: var(--sh-lift); }
.addr.copied small { color: #2E7D4F; }
.links { display: grid; gap: 2px; }
.lk { display: flex; align-items: center; gap: 12px; padding: 9px 8px; border-radius: 8px; transition: background-color .2s; }
.lk:hover { background: var(--hover); }
.lk-ic { width: 30px; height: 30px; flex: none; display: grid; place-items: center; }
.lk-ic svg, .lk-ic img { width: 26px; height: 26px; transition: transform .45s var(--e-spring); }
.lk:hover .lk-ic svg, .lk:hover .lk-ic img { transform: rotate(-8deg) scale(1.1); }
.lk-t { display: grid; flex: 1; min-width: 0; }
.lk-t b { font-size: 14.5px; font-weight: 500; color: var(--ink); }
.lk-t small { font-size: 12.5px; color: var(--ink-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lk-go { color: var(--ink-4); transition: transform .3s var(--e-spring), color .2s; }
.lk:hover .lk-go { color: var(--ink); transform: translate(2px, -2px); }
.ct-note { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-3); }

@media (max-width: 900px) { .ct-help { grid-template-columns: minmax(0, 1fr); } .ct-side { position: static; } .doors { grid-template-columns: 1fr; } .ct-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pg-steps { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .brief { grid-template-columns: 1fr; } .ct-links { grid-template-columns: 1fr; } .door-ink { display: none; } }
@media (max-width: 760px) { .ct { padding-top: 32px; } }
@media (max-width: 520px) { .ct-props > div { grid-template-columns: minmax(0, 1fr); } .ct-props > div > dd { grid-column: 1; grid-row: 2; } .ct-foot { flex-direction: column; align-items: stretch; } .send { width: 100%; justify-content: center; } .share { width: 100%; } }