@import url('/assets/tokens.css');
@font-face { font-family: 'Bodoni Moda'; src: url('/assets/fonts/bodoni-moda.woff2') format('woff2'); font-weight: 400 900; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/assets/fonts/inter.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/assets/fonts/inter-italic.woff2') format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; }
* { box-sizing: border-box; }
html { background: var(--canvas); color: var(--ink); }
body { margin: 0; font: 400 var(--text-body)/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; }
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-underline-offset: .2em; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .6; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
h1, h2, p { margin-top: 0; }
h1, h2 { font-weight: 600; }
p { max-width: 65ch; }
::selection { background: var(--ink); color: var(--canvas); }
[hidden] { display: none !important; }
.shell { max-width: 1360px; min-height: 100svh; padding: 0 var(--outer); margin: auto; display: flex; flex-direction: column; }
.masthead { min-height: 84px; border-bottom: 1px solid var(--rule); display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); }
.wordmark { font-size: var(--text-logo); letter-spacing: -.055em; font-weight: 650; text-decoration: none; white-space: nowrap; }
.brand-avec { font-style: italic; font-weight: inherit; }
.header-actions { display: flex; gap: var(--space-7); align-items: center; }
.eyebrow { font-size: var(--text-meta); font-weight: 500; letter-spacing: .08em; line-height: 1.5; margin-bottom: var(--space-5); }
.masthead .eyebrow { margin: 0; color: var(--secondary); }
.text-button { color: var(--secondary); background: transparent; border: 0; border-radius: var(--radius); padding: var(--space-3) 0; min-height: 44px; font-size: var(--text-meta); text-decoration: underline; text-underline-offset: .25em; }
.text-button:hover { color: var(--ink); }
.layout { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); gap: var(--space-7); padding: var(--space-7) 0 var(--space-8); flex: 1; }
.rail { font-size: var(--text-control); }
.identity { padding-bottom: var(--space-7); }
.identity-name { font-size: var(--text-section); margin-bottom: var(--space-1); font-weight: 500; }
.handle { color: var(--secondary); font-size: var(--text-meta); overflow-wrap: anywhere; margin-bottom: var(--space-4); }
.audience { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-meta); color: var(--secondary); white-space: nowrap; }
.privacy-icon { width: var(--privacy-icon-size); height: var(--privacy-icon-size); flex: none; }
nav { display: flex; flex-direction: column; }
nav a { display: flex; justify-content: space-between; align-items: center; min-height: 48px; color: var(--secondary); text-decoration: none; border-top: 1px solid var(--rule); }
nav a:last-child { border-bottom: 1px solid var(--rule); }
nav a[aria-current] { color: var(--ink); font-weight: 600; }
nav a:hover { background: var(--subtle); color: var(--ink); }
.sign-out { margin-top: var(--space-5); }
.intro-rail { color: var(--secondary); }
.intro-rail .eyebrow { color: var(--ink); margin-bottom: var(--space-3); }
main { min-width: 0; }
main:focus { outline: none; }
h1 { font-family: var(--serif); font-size: var(--text-display); font-optical-sizing: auto; line-height: 1; letter-spacing: -.045em; margin-bottom: var(--space-5); overflow-wrap: anywhere; }
.view-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-7); }
.view-heading h1 { margin-bottom: 0; }
.view-heading .button { flex-shrink: 0; margin-bottom: var(--space-2); }
.lede { color: var(--secondary); margin-bottom: var(--space-7); max-width: 55ch; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-5); min-height: 48px; padding: var(--space-3) var(--space-5); color: var(--ink); background: var(--canvas); border: 1px solid var(--control-border); border-radius: var(--radius); text-decoration: none; font-size: var(--text-control); font-weight: 500; }
.button:hover { background: var(--subtle); }
.button.primary { background: var(--ink); color: var(--inverse-ink); border-color: var(--ink); }
.button.primary:hover { background: var(--secondary); }
.empty-state { border-top: 1px solid var(--rule); padding-top: var(--space-6); margin-top: var(--space-8); }
.empty-index { display: block; color: var(--secondary); font-size: var(--text-meta); letter-spacing: .06em; margin-bottom: var(--space-7); }
.empty-state h2 { font: 600 var(--text-empty)/1.1 var(--serif); letter-spacing: -.035em; margin-bottom: var(--space-5); }
.empty-state p { color: var(--secondary); margin-bottom: var(--space-5); }
.text-link { display: inline-flex; align-items: center; gap: var(--space-5); min-height: 44px; font-size: var(--text-control); }
.list-heading { display: flex; justify-content: space-between; gap: var(--space-4); color: var(--secondary); font-size: var(--text-meta); padding-bottom: var(--space-4); }
.work-row { padding: var(--space-6) 0; border-top: 1px solid var(--rule); }
.work-row:last-child { border-bottom: 1px solid var(--rule); }
.work-row-top, .detail-meta { display: flex; gap: var(--space-5); align-items: center; margin-bottom: var(--space-4); }
.status-label { font-size: var(--text-meta); }
.work-row h2 { font: 600 var(--text-work)/1.2 var(--serif); margin-bottom: var(--space-4); overflow-wrap: anywhere; }
.work-row h2 a { display: flex; justify-content: space-between; gap: var(--space-5); text-decoration: none; }
.work-row h2 a:hover { text-decoration: underline; }
.row-arrow { font: 400 var(--text-section)/1.5 var(--sans); flex-shrink: 0; }
.work-excerpt { color: var(--secondary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; margin-bottom: var(--space-4); }
.meta, .hint { font-size: var(--text-meta); color: var(--secondary); }
.meta { margin-bottom: 0; }
.form { max-width: 740px; }
.narrow { max-width: 460px; }
.field { margin-bottom: var(--space-6); min-width: 0; }
.field label { display: block; font-size: var(--text-control); margin-bottom: var(--space-3); font-weight: 500; }
.optional { color: var(--secondary); font-size: var(--text-meta); margin-left: var(--space-2); font-weight: 400; }
input, textarea, select { width: 100%; display: block; color: var(--ink); background: var(--canvas); border: 1px solid var(--control-border); border-radius: var(--radius); min-height: 48px; padding: var(--space-3) var(--space-4); font-size: var(--text-body); }
textarea { resize: vertical; min-height: 176px; }
input::placeholder, textarea::placeholder { color: var(--secondary); opacity: 1; }
input[type='date'] { min-width: 0; }
.field .hint { margin-top: var(--space-3); margin-bottom: 0; }
.date-fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.save-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--rule); }
.form-message { margin-top: var(--space-5); margin-bottom: var(--space-4); font-size: var(--text-control); }
.form-message:empty { display: none; }
.form-message[data-error='true'] { padding: var(--space-4); border: 1px solid var(--control-border); }
.back-link { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: var(--space-5); color: var(--secondary); font-size: var(--text-control); text-decoration: none; }
.back-link:hover { color: var(--ink); text-decoration: underline; }
.work-detail-title { font-size: var(--text-empty); max-width: 18ch; }
.purpose { white-space: pre-wrap; overflow-wrap: anywhere; margin-bottom: var(--space-7); line-height: 1.7; }
.work-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); margin: 0 0 var(--space-6); border-top: 1px solid var(--rule); padding-top: var(--space-5); }
dt { color: var(--secondary); font-size: var(--text-meta); margin-bottom: var(--space-2); }
dd { margin: 0; font-size: var(--text-control); overflow-wrap: anywhere; }
.activity-section { margin-top: var(--space-7); border-top: 1px solid var(--rule); }
summary { min-height: 44px; padding: var(--space-3) 0; cursor: pointer; font-size: var(--text-control); }
.optional-details { margin-bottom: var(--space-5); }
.optional-details[open] summary { margin-bottom: var(--space-4); }
.section-heading { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); }
.section-heading h2 { font: 500 var(--text-section)/1.3 var(--sans); margin-bottom: var(--space-5); }
.activity-list { list-style: none; padding: 0; margin: 0 0 var(--space-4); font-size: var(--text-control); }
.activity-list li { display: flex; justify-content: space-between; gap: var(--space-5); padding: var(--space-4) 0; border-top: 1px solid var(--rule); }
.activity-list time { color: var(--secondary); font-size: var(--text-meta); flex-shrink: 0; }
.saved-notice { margin-bottom: var(--space-5); font-size: var(--text-control); border-left: 2px solid var(--ink); padding-left: var(--space-4); }
.profile-note { border-top: 1px solid var(--rule); margin-top: var(--space-8); padding-top: var(--space-5); padding-bottom: var(--space-7); }
.profile-note p { margin-top: var(--space-6); }
.local-note { margin-top: var(--space-8); padding-top: var(--space-5); border-top: 1px solid var(--rule); color: var(--secondary); font-size: var(--text-meta); }
.local-note .eyebrow { margin-bottom: var(--space-3); }
.mail-list { margin-top: var(--space-7); }
.mail-row { border-top: 1px solid var(--rule); padding: var(--space-5) 0; }
footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-5); padding: var(--space-5) 0; border-top: 1px solid var(--rule); color: var(--secondary); font-size: var(--text-meta); }
footer a { min-height: 24px; }
.skip-link { position: fixed; top: -100px; left: var(--outer); padding: var(--space-4); color: var(--canvas); background: var(--ink); z-index: 1; }
.skip-link:focus { top: var(--space-2); }
.noscript { padding: var(--space-5); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.auth-layout { display: block; padding-top: var(--space-9); }
.auth-layout > .rail { display: none; }
.auth-layout main { max-width: 460px; margin: auto; }
.auth-layout h1 { margin-bottom: var(--space-7); }
.sign-in-method { border: 0; padding: 0; margin: 0 0 var(--space-6); display: flex; gap: var(--space-5); }
.sign-in-method label { position: relative; cursor: pointer; font-size: var(--text-control); }
.sign-in-method input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; }
.sign-in-method span { display: inline-flex; align-items: center; min-height: 44px; color: var(--secondary); border-bottom: 1px solid transparent; }
.sign-in-method input:checked + span { color: var(--ink); border-color: var(--ink); }
.sign-in-method input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 3px; }
.country-field { position: relative; }
#country-options { position: absolute; top: 100%; left: 0; right: 0; max-height: 240px; overflow-y: auto; overscroll-behavior: contain; background: var(--canvas); border: 1px solid var(--control-border); padding: 0; margin: 0; z-index: 2; list-style: none; }
#country-options li { padding: var(--space-3) var(--space-4); min-height: 44px; cursor: pointer; font-size: var(--text-control); }
#country-options li:hover, #country-options li[aria-selected='true'] { background: var(--subtle); }
#country-empty { position: absolute; top: 100%; left: 0; right: 0; padding: var(--space-3) var(--space-4); margin: 0; background: var(--canvas); border: 1px solid var(--control-border); z-index: 2; }
.field-error:empty { display: none; }
.field-error { color: var(--ink); margin: 0 0 var(--space-5); }
[aria-invalid='true'] { border-color: var(--ink); border-width: 2px; }
@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; gap: var(--space-7); padding-top: var(--space-6); }
  .rail { display: grid; grid-template-columns: 1fr auto; gap: var(--space-4); }
  .identity { padding: 0; }
  .identity-name { font-size: var(--text-body); }
  .identity .handle { margin-bottom: var(--space-2); }
  .identity .audience { display: none; }
  nav { grid-column: 1 / -1; flex-direction: row; gap: var(--space-6); border-bottom: 1px solid var(--rule); }
  nav a { gap: var(--space-5); border: 0; min-height: 48px; }
  nav a:last-child { border: 0; }
  nav a[aria-current] { border-bottom: 2px solid var(--ink); }
  .sign-out { grid-column: 2; grid-row: 1; margin: 0; align-self: start; }
  .intro-rail { display: none; }
  .empty-state { margin-top: var(--space-7); }
}
@media (max-width: 680px) {
  .masthead { min-height: 84px; gap: var(--space-4); }
  .beta-label { display: none; }
  .header-actions { gap: 0; }
  .view-heading { align-items: flex-start; flex-direction: column; margin-bottom: var(--space-6); }
  .view-heading .button { margin: 0; }
  .eyebrow { margin-bottom: var(--space-4); }
  .date-fields { grid-template-columns: 1fr; gap: 0; }
  .save-row { gap: var(--space-4); }
  .save-row .hint { flex-basis: 100%; }
  .work-facts { grid-template-columns: 1fr; }
  .work-facts > div { display: flex; justify-content: space-between; gap: var(--space-4); }
  .activity-list li { flex-direction: column; gap: var(--space-2); }
  .activity-section { margin-top: var(--space-8); }
  footer { flex-direction: column; gap: var(--space-2); }
  .desktop-break { display: none; }
  .list-heading span:last-child { display: none; }
}

/* Persistent account destinations; the profile owns its address and privacy label. */
.place-heart { color: var(--place-heart); font-size: .85em; margin-left: 3px; }
@media (max-width: 900px) {
  .rail nav { grid-column: 1; grid-row: 1; gap: var(--space-5); }
  .rail nav a { gap: 0; }
  .sign-out { grid-column: 2; grid-row: 1; align-self: center; }
}