/* The artist portal: the look of marlowren.com (its tokens and typefaces), not the desk.
   The typefaces are the site's own copies under public/assets/fonts (SIL Open Font License),
   so no visitor's address reaches Google. Light first; dark dims the chrome only. */
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/cormorant-garamond-italic-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/cormorant-garamond-italic-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:300 500;font-display:swap;src:url(fonts/cormorant-garamond-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:300 500;font-display:swap;src:url(fonts/cormorant-garamond-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Karla";font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/karla-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Karla";font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/karla-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Mrs Saint Delafield";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/mrs-saint-delafield-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Mrs Saint Delafield";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/mrs-saint-delafield-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  --paper:#faf9f6; --paper-2:#f2f0ea; --plate:#ffffff; --edge:#e2ded5;
  --ink:#1a1c1a; --ink-2:#5f6560; --ink-3:#6a706b; --rule:#ddd9d2;
  --accent:#4c6353; --accent-soft:#e6ece7;
  --display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --body:"Karla",system-ui,-apple-system,"Segoe UI",sans-serif;
  --script:"Mrs Saint Delafield",cursive;
  --measure:66ch;
  --card-shadow:0 2px 6px rgba(26,28,26,.13),0 18px 40px rgba(26,28,26,.18);
  --card-shadow-grid:0 2px 6px rgba(26,28,26,.10),0 10px 22px rgba(26,28,26,.12);
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#151716; --paper-2:#1c1f1d; --plate:#fbfbf9; --edge:#2c302d;
    --ink:#e9ece9; --ink-2:#a6ada7; --ink-3:#7d857f; --rule:#2c302d;
    --accent:#8fb39c; --accent-soft:#1e2723;
    --card-shadow:0 1px 3px rgba(26,28,26,.10),0 14px 34px rgba(26,28,26,.16);
    --card-shadow-grid:0 1px 3px rgba(26,28,26,.08);
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:400;text-wrap:balance;line-height:1.12}
h1{font-size:clamp(34px,5vw,50px);letter-spacing:.005em}
h2{font-size:clamp(26px,3.6vw,34px);margin-top:14px}
h3{font-size:22px;margin-top:12px}
h4{font-size:17px;font-family:var(--body);font-weight:600;letter-spacing:.02em;margin-top:18px}
p{margin:14px 0 0}
.wrap{max-width:720px;margin:0 auto;padding:0 20px}
.wrap-wide{max-width:960px}

.site-head{padding:26px 0 20px;border-bottom:1px solid var(--rule)}
.wordmark{font-family:var(--display);font-size:28px;letter-spacing:.11em;text-transform:uppercase;text-decoration:none;color:var(--ink);white-space:nowrap}
@media(max-width:600px){.site-head{padding:16px 0 12px}.wordmark{font-size:24px}}

.eyebrow{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);font-weight:600;margin:40px 0 14px}
.lede{font-size:18px;color:var(--ink-2);max-width:var(--measure)}
.quiet{color:var(--ink-2)}
.small{font-size:13.5px;color:var(--ink-3)}
.letter p{max-width:var(--measure)}
.letter .sign{font-family:var(--script);font-size:38px;color:var(--ink);margin-top:18px;line-height:1}

section{padding:36px 0 8px;border-top:1px solid var(--rule)}
section:first-of-type{border-top:0}
.contents{margin:28px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px 18px}
.contents a{font-size:13.5px;letter-spacing:.09em;text-transform:uppercase;text-decoration:none;color:var(--ink-2);padding-bottom:3px;border-bottom:1px solid transparent}
.contents a:hover{color:var(--ink);border-bottom-color:var(--accent)}

.btn{display:inline-block;padding:13px 22px;background:var(--ink);color:var(--paper);text-decoration:none;font:600 13px/1.2 var(--body);letter-spacing:.1em;text-transform:uppercase;border:0;border-radius:2px;cursor:pointer;min-height:44px}
.btn:hover{background:var(--accent)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--rule)}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent);background:transparent}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

form{margin-top:18px}
label{display:block;font-size:13.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);margin-top:14px}
input[type=text],input[type=email],input[type=password],textarea{display:block;width:100%;margin-top:8px;padding:12px 14px;font:16px/1.4 var(--body);color:var(--ink);background:var(--plate);border:1px solid var(--edge);border-radius:4px}
@media (prefers-color-scheme:dark){input[type=text],input[type=email],input[type=password],textarea{background:var(--paper-2)}}
textarea{min-height:120px;resize:vertical}
input.code{font-size:24px;letter-spacing:.18em;text-transform:uppercase;text-align:center;font-family:var(--body)}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.error{color:#9b3d2e;margin-top:14px}
@media (prefers-color-scheme:dark){.error{color:#e9a08f}}
.notice{color:var(--accent);margin-top:14px}

.answers{display:grid;gap:12px;margin-top:22px;max-width:520px}
.answers form{margin:0}
.answers .btn,.answers a.btn{display:block;width:100%;text-align:left;text-transform:none;letter-spacing:0;font-size:17px;font-weight:500;padding:16px 18px;border-radius:4px}
.answers .btn.ghost{color:var(--ink)}

.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:24px}
@media(min-width:640px){.cards{grid-template-columns:repeat(3,1fr)}}
.cardpic{background:var(--plate);box-shadow:var(--card-shadow-grid);border-radius:3px;aspect-ratio:7/5;overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:center;padding:10px}
.cardpic img{width:100%;height:100%;object-fit:contain}
.cardpic.placeholder{flex-direction:column;gap:6px;background:repeating-linear-gradient(135deg,var(--paper-2) 0 10px,var(--plate) 10px 20px);color:var(--ink-3);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.cardpic.placeholder span{display:block}
.cardpic.placeholder span+span{font-size:10px;color:var(--ink-2)}
.back-mock{position:relative;margin-top:26px;background:var(--plate);box-shadow:var(--card-shadow);border-radius:3px;max-width:620px}
.back-mock img{width:100%;border-radius:3px}
.back-mock svg{position:absolute;inset:0;width:100%;height:100%}
.back-mock .credit{font-family:var(--body);font-weight:500;font-size:17px;letter-spacing:4.2px;fill:#6f746f;text-transform:uppercase}
.back-caption{margin-top:12px}

.pill{display:inline-block;font:600 11px/1 var(--body);letter-spacing:.18em;text-transform:uppercase;padding:7px 10px;border-radius:999px;background:var(--accent-soft);color:var(--accent);vertical-align:middle}
.example{border:1px dashed var(--rule);border-radius:10px;padding:18px 18px 22px;margin-top:24px;background:var(--paper-2)}
.example h3{margin-top:0}
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:16px}
@media(min-width:640px){.tiles{grid-template-columns:repeat(3,1fr)}}
.tile{background:var(--plate);border:1px solid var(--edge);border-radius:10px;padding:14px}
@media (prefers-color-scheme:dark){.tile{background:var(--paper)}}
.tile-label{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.tile-value{font-family:var(--display);font-size:1.6rem;line-height:1.1;margin-top:6px}
.tile-note{font-size:13px;color:var(--ink-2);margin-top:4px}
table{width:100%;border-collapse:collapse;margin-top:16px;font-size:15px}
th,td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--rule);vertical-align:top}
th{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
td.num,th.num{text-align:right;white-space:nowrap}
tbody tr:last-child td{border-bottom:0}

section ul{padding-left:22px;margin:12px 0 0}
section li{margin-top:8px;max-width:var(--measure)}
.code-page{padding-top:48px}
.terms{max-width:var(--measure);margin-top:14px}
.terms summary{list-style:none;cursor:pointer}
.terms summary::-webkit-details-marker{display:none}
.terms-body{margin-top:18px}
.leave{margin-top:48px}
.small-btn{font-size:11px;padding:14px 16px}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:16px}
.table-wrap table{margin-top:0}
@media(max-width:480px){table{font-size:13px}th,td{padding:8px 5px}}
.terms ol,.terms ul{padding-left:22px;margin:10px 0 0}
.terms li{margin-top:6px}
.terms-title{margin-top:6px}
.terms-table th,.terms-table td{font-size:14px}

.site-foot{margin-top:70px;padding:34px 0 60px;border-top:1px solid var(--rule)}
.site-foot .sig{font-family:var(--script);font-size:40px;color:var(--ink);line-height:1;margin:0}
.site-foot .colophon{font-size:12.5px;color:var(--ink-3);max-width:60ch;margin-top:10px}

/* The artist's own page (part 2). */
label.choice{display:flex;align-items:center;gap:10px;text-transform:none;letter-spacing:0;font-size:16px;color:var(--ink);margin-top:12px;cursor:pointer}
label.choice input{width:20px;height:20px;margin:0;accent-color:var(--accent);flex:none}
fieldset.choices{border:0;padding:0;margin:22px 0 0}
fieldset.choices legend{font-size:13.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);padding:0}
.lines{list-style:none;padding:0;margin:12px 0 0}
.lines .line{margin:0;padding:12px 0;border-bottom:1px solid var(--rule);max-width:none}
.line-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.line-what{min-width:0;overflow-wrap:anywhere}
.line-day{color:var(--ink-3);font-size:14px;margin-right:4px}
.line-share{font-family:var(--display);font-size:22px;white-space:nowrap}
.lines .small{margin-top:4px}
.line-total{text-align:right;margin-top:10px}
#statement h3{margin-top:26px}

/* Everything centred, at every width (Filipp, 9 October 2026: "ensure all the text and headings
   are centered"), as marlowren.com's pages are. Blocks with a measure sit on the centre line too.
   The terms' own clauses, once opened, stay left-aligned so the numbered clauses read as a
   document. */
.site-head .wrap,main,.site-foot{text-align:center}
.lede,.letter p,section li,.terms,.answers,.back-mock,.site-foot .colophon{margin-left:auto;margin-right:auto}
.contents,.actions{justify-content:center}
section ul{list-style:none;padding-left:0}
.answers .btn,.answers a.btn{text-align:center}
th,td,td.num,th.num{text-align:center}
input[type=text],input[type=email],textarea{text-align:center}
.terms-body,.terms-body th,.terms-body td{text-align:left}
/* Part 2 on the centre line too: the statement's lines stack (what, then the amount), and the
   choices and their legend sit centred. */
input[type=password]{text-align:center}
label.choice{justify-content:center}
fieldset.choices legend{margin-left:auto;margin-right:auto}
.line-head{flex-direction:column;align-items:center;gap:4px}
.line-total{text-align:center}
.tiles.pairs{grid-template-columns:repeat(2,1fr);max-width:520px;margin-left:auto;margin-right:auto}
/* Tiles wrap as a centred row, so a last tile on its own sits in the middle, not at the left. */
.tiles{display:flex;flex-wrap:wrap;justify-content:center}
.tiles>.tile{flex:0 1 calc((100% - 12px)/2);min-width:0}
@media(min-width:640px){.tiles>.tile{flex-basis:calc((100% - 24px)/3)}}
.tiles.pairs>.tile{flex-basis:calc((100% - 12px)/2)}

/* The invitation as a row of short cards (Filipp, 10 October 2026: "short and bullet pointed",
   "swipe left and right through information cards", less to take in at once). One card fills the
   row with its neighbours peeking in at the sides, as marlowren.com's free sets do, and the row
   snaps card by card. No script: each card's arrows are links to the card beside it, and the row
   takes the arrow keys once it has focus. The row runs to the page's edges on a phone. */
.invite-head{padding-bottom:0}
.swipe-hint{margin-top:8px}
.deck{--sw:min(84vw,460px);--sg:14px;display:flex;gap:var(--sg);overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  margin:4px -20px 0;padding:20px calc(50% - var(--sw) / 2 + 20px) 30px;outline:none}
.deck::-webkit-scrollbar{display:none}
.deck:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.slide{flex:0 0 var(--sw);min-width:0;scroll-snap-align:center;scroll-snap-stop:always;scroll-margin-top:12px;
  display:flex;flex-direction:column;background:var(--plate);border:1px solid var(--edge);border-radius:14px;
  padding:26px 22px 14px;box-shadow:0 1px 2px rgba(26,28,26,.05),0 10px 26px rgba(26,28,26,.08)}
@media (prefers-color-scheme:dark){.slide{background:var(--paper-2)}}
.slide-eyebrow{margin:0;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);font-weight:600}
.slide h2{margin-top:8px;font-size:clamp(26px,6.4vw,32px)}
.points{list-style:none;padding:0;margin:16px auto 0;max-width:34ch}
.points li{margin:0;padding:10px 0;border-top:1px solid var(--rule);line-height:1.5;max-width:none}
.points li:first-child{border-top:0}
.slide-line{margin:14px auto 0;max-width:34ch;color:var(--ink-2)}
.slide-small{margin:12px auto 0;max-width:36ch;font-size:13px;color:var(--ink-3)}
.slide .sign{font-family:var(--script);font-size:38px;line-height:1;color:var(--ink);margin-top:12px}
.slide .cards.compact{grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}
.cards.compact .cardpic{padding:4px;box-shadow:0 1px 3px rgba(26,28,26,.12)}
.cards.compact .cardpic.placeholder{font-size:13px;letter-spacing:0}
.slide .back-mock{margin-top:18px;box-shadow:var(--card-shadow-grid)}
.slide .example{margin-top:16px;padding:14px 12px 14px}
.slide .tile{padding:12px 10px}
.slide .tile-value{font-size:1.5rem}
.slide .actions{margin-top:18px}
.slide-bar{margin-top:auto;padding-top:18px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.slide-arrow{width:44px;height:44px;flex:none;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--edge);border-radius:999px;background:var(--paper);color:var(--ink-2);font-size:18px;
  line-height:1;text-decoration:none}
.slide-arrow:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.slide-arrow.is-off{visibility:hidden}
.slide-num{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-variant-numeric:tabular-nums}
html{scroll-behavior:smooth}
/* Where the browser can tie it to the row's scrolling, the cards either side sit back a little. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .slide{animation:slide-focus linear both;animation-timeline:view(inline)}
    @keyframes slide-focus{0%,100%{opacity:.45}35%,65%{opacity:1}}
  }
}
@media (prefers-reduced-motion:reduce){html,.deck{scroll-behavior:auto}}
.terms-page .terms-body{max-width:var(--measure);margin:26px auto 0}
/* The twelve small tiles keep to a phone's size on a wide screen, so that card is no taller
   than the rest; the example's two figures stack, so a long figure never runs out of its tile;
   and on a wide screen the row fades out at its edges rather than cutting a card off. */
.slide .cards.compact{width:100%;max-width:300px;margin-left:auto;margin-right:auto}
.slide .tiles.pairs{width:100%;max-width:260px}
.slide .tiles.pairs>.tile{flex-basis:100%}
@media(min-width:720px){
  .deck{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
}
/* The Wren Circle on the member's own page (docs/design.md "The Wren Circle"): the code large
   and centred, the link, the QR on white so it scans in dark mode too, and the weekly chart
   drawn as Home's is on the desk: one picture for a phone, one for a wide screen. */
.circle-code{font-family:var(--display);font-size:clamp(36px,10vw,64px);letter-spacing:.06em;line-height:1.05;margin-top:8px;white-space:nowrap;font-variant-numeric:lining-nums}
/* Up to fifteen capitals on one line at phone width. */
.circle-code-long{font-size:clamp(24px,7vw,56px);letter-spacing:.04em}
.share-link{font-size:15px;overflow-wrap:anywhere}
.circle-qr{display:block;width:180px;height:180px;margin:20px auto 0;border-radius:6px;box-shadow:var(--card-shadow-grid)}
.payout-line{font-size:18px;max-width:var(--measure);margin-left:auto;margin-right:auto}
#going h3,#code-statement h3,#statement h3{margin-top:26px}
.chart{display:block;width:100%;max-width:600px;height:auto;margin:12px auto 4px}
.chart-wide{display:none}
@media(min-width:640px){.chart-narrow{display:none}.chart-wide{display:block}}
.chart-bar{fill:var(--accent)}
.chart-empty{fill:var(--rule)}
.chart-grid,.chart-axis{stroke:var(--rule);stroke-width:1;shape-rendering:crispEdges}
.chart-text{fill:var(--ink-3);font-family:var(--body);font-size:12px}
.chart-value{fill:var(--ink);font-family:var(--body);font-size:12px;font-weight:600}
.chart-details{max-width:520px;margin:6px auto 0}
.chart-details summary{color:var(--ink-2);font-size:14px;cursor:pointer;min-height:44px;display:flex;align-items:center;justify-content:center}
.chart-table{font-size:14px}
#wins .lines .line:last-child,#code-statement .lines .line:last-child{border-bottom:0}