/* Your space: who you are, what you've kept, then the quieter settings.
   One column of sections, each with its label on the left, so everything
   lines up on a single edge instead of floating around the page. */
.screen--me {width:100%!important;max-width:none;}
.me-page {--me-accent:var(--world-accent,var(--ink-2));width:min(1040px,100%);margin:0 auto;padding:calc(104px + env(safe-area-inset-top,0px)) clamp(20px,5vw,56px) 40px;}

/* ---- who ---- */
.me-hero {display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:clamp(20px,3.5vw,36px);}
.me-hero__avatar.avatar {width:clamp(84px,11vw,124px);height:auto;aspect-ratio:1;border:1px solid var(--line);box-shadow:none;}
.me-hero__kicker {font-family:var(--font-script);font-size:24px;line-height:1;color:var(--me-accent);}
.me-hero__name {margin-top:6px;font-family:var(--font-serif);font-weight:400;font-size:clamp(46px,7vw,84px);line-height:.98;letter-spacing:-.03em;color:var(--ink);overflow-wrap:anywhere;}
.me-hero__line {margin-top:12px;font-family:var(--font-serif);font-style:italic;font-size:clamp(19px,2vw,23px);line-height:1.35;color:var(--ink-2);}
.me-hero__line::before {content:'“';}
.me-hero__line::after {content:'”';}
.me-hero__meta {display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin-top:14px;font-size:13px;color:var(--ink-3);}
.me-hero__edit {display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 14px;border:1px solid var(--line-soft);border-radius:999px;font-size:13px;color:var(--ink-2);transition:border-color 160ms ease,color 160ms ease;}
.me-hero__edit:hover {border-color:var(--line-strong);color:var(--ink);}

/* ---- the numbers ---- */
.me-numbers {margin-top:clamp(36px,5vw,56px);border-block:1px solid var(--line-soft);}
.me-stats {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));}
.me-stat {display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:8px;padding:24px 24px 22px;border-left:1px solid var(--line-soft);}
.me-stat:first-child {border-left:0;padding-left:0;}
.me-stat dt {font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);}
.me-stat dd {font-family:var(--font-serif);font-size:clamp(40px,5vw,56px);font-weight:400;line-height:1;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums lining-nums;}
.me-stat small {margin-left:5px;font-family:var(--font-sans);font-size:13px;letter-spacing:0;color:var(--ink-3);}
.me-numbers__note {padding:16px 0 18px;border-top:1px solid var(--line-soft);font-family:var(--font-serif);font-style:italic;font-size:18px;line-height:1.4;color:var(--ink-3);}

/* ---- your corners ---- */
.me-corners {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:28px;}
.me-corner {position:relative;display:flex;flex-direction:column;gap:16px;min-height:150px;padding:18px 18px 20px;border:1px solid var(--line-soft);border-radius:12px;background:color-mix(in srgb,var(--ink) 2%,transparent);color:var(--ink);transition:border-color 180ms ease,transform 180ms var(--ease-out),background-color 180ms ease;}
.me-corner:hover {border-color:var(--line-strong);background:color-mix(in srgb,var(--me-accent) 6%,transparent);transform:translateY(-2px);}
.me-corner:focus-visible {outline:2px solid var(--me-accent);outline-offset:3px;}
.me-corner__icon {display:grid;place-items:center;width:40px;height:40px;border-radius:50%;color:var(--me-accent);background:color-mix(in srgb,var(--me-accent) 12%,transparent);}
.me-corner__text {display:flex;flex-direction:column;gap:4px;margin-top:auto;padding-right:22px;}
.me-corner__title {font-family:var(--font-serif);font-size:23px;line-height:1.1;}
.me-corner__sub {font-size:12.5px;line-height:1.45;color:var(--ink-3);}
.me-corner__count {position:absolute;top:18px;right:18px;min-width:28px;padding:3px 9px;border-radius:999px;border:1px solid var(--line-soft);font-size:12px;text-align:center;color:var(--ink-2);font-variant-numeric:tabular-nums;}
.me-corner__arrow {position:absolute;right:16px;bottom:20px;color:var(--ink-3);opacity:.6;transition:transform 180ms var(--ease-out),opacity 180ms ease;}
.me-corner:hover .me-corner__arrow {opacity:1;transform:translateX(3px);}

/* ---- labelled sections ---- */
.me-section {display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:clamp(24px,5vw,64px);padding:40px 0;border-top:1px solid var(--line-soft);}
.me-corners + .me-section {margin-top:56px;}
.me-section__label h2 {font-family:var(--font-serif);font-weight:400;font-size:32px;line-height:1.05;color:var(--ink);}
.me-section__label p {margin-top:10px;max-width:34ch;font-size:13.5px;line-height:1.6;color:var(--ink-3);}

/* the light */
.me-themes {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 14px;}
.me-theme {display:flex;flex-direction:column;gap:9px;text-align:left;border-radius:12px;}
.me-theme:focus-visible {outline:none;}
.me-theme__swatch {position:relative;display:block;aspect-ratio:2/1;border-radius:10px;box-shadow:inset 0 0 0 1px rgb(0 0 0 / .12);outline:2px solid transparent;outline-offset:3px;transition:transform 180ms var(--ease-out),outline-color 180ms ease;}
.me-theme:hover .me-theme__swatch {transform:translateY(-2px);}
.me-theme:focus-visible .me-theme__swatch {outline-color:var(--line-strong);}
.me-theme.is-active .me-theme__swatch {outline-color:var(--ink);}
.me-theme__check {position:absolute;top:8px;right:8px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--ink);color:var(--bg);opacity:0;transform:scale(.6);transition:opacity 160ms ease,transform 200ms var(--ease-out);}
.me-theme.is-active .me-theme__check {opacity:1;transform:none;}
.me-theme__name {font-size:13px;color:var(--ink-3);text-transform:capitalize;}
.me-theme.is-active .me-theme__name {color:var(--ink);font-weight:600;}

/* small habits */
.me-switches .switch-row {padding:16px 0;border-bottom:1px solid var(--line-soft);}
.me-switches .switch-row:first-child {padding-top:4px;}
.me-switches .switch-row:last-child {border-bottom:0;padding-bottom:0;}
.me-switches .switch-row__title {font-size:15px;color:var(--ink);}

/* the daily line offer keeps its own card, aligned to the content column */
.me-offer {padding:0 0 40px calc(min(260px,100%) + clamp(24px,5vw,64px));}
.me-offer .daily-offer {margin:0;}

/* your data */
.me-data {display:flex;flex-direction:column;align-items:flex-start;gap:14px;}
.me-data__row {display:flex;flex-wrap:wrap;gap:10px;}
.me-data__row .btn {min-width:140px;}
.me-data .legacy-notice {width:100%;}
.me-data__quiet,.me-data__danger {display:inline-flex;align-items:center;gap:8px;min-height:40px;font-size:13px;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;transition:text-decoration-color 160ms ease,color 160ms ease;}
.me-data__quiet {color:var(--ink-2);}
.me-data__danger {margin-top:10px;padding-top:16px;border-top:1px solid var(--line-soft);width:100%;color:var(--rose);}
.me-data__quiet:hover,.me-data__danger:hover {text-decoration-color:currentColor;}

.me-colophon {margin-top:24px;padding-top:32px;border-top:1px solid var(--line-soft);text-align:center;font-size:12px;line-height:1.8;color:var(--ink-4);}

/* paper squares its corners and drops the glow */
[data-theme='gouache'] .me-corner,
[data-theme='gouache'] .me-theme__swatch {border-radius:3px;}
[data-theme='gouache'] .me-corner {background:var(--bg-raised);}

@media (min-width:900px) {
  .me-page {padding-top:calc(132px + env(safe-area-inset-top,0px));}
}
@media (max-width:899px) {
  .me-corners {grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:760px) {
  .me-section {grid-template-columns:minmax(0,1fr);gap:20px;padding:32px 0;}
  .me-section__label h2 {font-size:28px;}
  .me-offer {padding-left:0;}
  .me-stats {grid-template-columns:repeat(2,minmax(0,1fr));}
  .me-stat {padding:20px 0 18px 20px;}
  .me-stat:nth-child(odd) {border-left:0;padding-left:0;}
  .me-stat:nth-child(n+3) {border-top:1px solid var(--line-soft);}
}
@media (max-width:520px) {
  .me-hero {grid-template-columns:minmax(0,1fr);gap:18px;}
  .me-hero__avatar.avatar {width:76px;}
  .me-corners {grid-template-columns:minmax(0,1fr);gap:10px;}
  .me-corner {flex-direction:row;align-items:center;min-height:0;padding:14px 16px;gap:14px;}
  .me-corner__text {margin-top:0;flex:1;padding-right:0;}
  .me-corner__title {font-size:21px;}
  .me-corner__count,.me-corner__arrow {position:static;}
  .me-themes {gap:14px 10px;}
  .me-data__row,.me-data__row .btn {width:100%;}
  .me-data__row .btn {flex:1;min-width:0;}
}
@media (prefers-reduced-motion:reduce) {
  .me-corner,.me-corner__arrow,.me-theme__swatch,.me-theme__check {transition:none;}
  .me-corner:hover,.me-theme:hover .me-theme__swatch {transform:none;}
}