.site-header{height:48px}
.icon-button{width:48px;height:48px;min-width:48px;flex-shrink:0}
.icon-button svg{width:16px;height:16px;stroke-width:3}
.join-pill,.rose-button{height:48px;min-height:48px;width:max-content;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.join-pill{min-width:124px;padding:0 22px;gap:14px}
.rose-button{padding:0 24px}
.join-pill:hover,.rose-button:hover{transform:none;box-shadow:inset 0 0 0 1px var(--red60),0 0 22px rgb(230 30 34 / 10%)}
.join-pill:active,.rose-button:active{transform:scale(.975)}
.email-form{height:48px}
.email-form input{height:48px}
.text-button{min-height:48px;display:inline-flex;align-items:center;gap:10px}
.studio-submit{width:100%;justify-content:space-between}
.join-submit{margin-top:6px}
.memory-invitation{
  top:calc(50% + min(20.5vh,27vw,185px) + 26px);
  z-index:3;
  max-width:calc(100vw - 40px);
  opacity:1;
  visibility:visible;
  transition:opacity .55s ease,transform .7s ease,visibility 0s;
}
.memory-invitation h1{
  margin:0;
  font-weight:400;
  line-height:1;
  color:var(--red60);
}
.memory-invitation button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:max-content;
  max-width:100%;
  height:48px;
  min-height:48px;
  margin:0;
  padding:0 8px;
  gap:0;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
  backdrop-filter:none;
  color:var(--red60);
  font:400 clamp(30px,3.2vw,42px)/1.1 var(--serif);
  letter-spacing:-.035em;
  text-transform:none;
  cursor:pointer;
}
.memory-invitation button:hover{
  background:none;
  border:0;
  box-shadow:none;
}
.invitation-type{
  display:block;
  transform-origin:50% 50%;
  animation:invitation-type-breathe 5.5s cubic-bezier(.45,0,.55,1) infinite;
}
.invitation-type i{
  color:var(--red100);
  transition:text-shadow .65s ease;
}
.memory-invitation button:hover i{
  text-shadow:0 0 20px rgb(230 30 34 / 35%);
}
.memory-invitation button:focus-visible{
  outline:none;
}
.memory-invitation button:focus-visible i{
  text-shadow:0 0 10px rgb(230 30 34 / 80%),0 0 28px rgb(230 30 34 / 40%);
}
.memory-invitation.leaving{
  opacity:0;
  transform:translate(-50%,-8px);
  visibility:hidden;
  pointer-events:none;
  transition:opacity .5s ease,transform .7s ease,visibility 0s .7s;
}
.memory-invitation.leaving button{pointer-events:none}
.memory-invitation.leaving .invitation-type,
.memory-page.hidden .invitation-type{animation-play-state:paused}
@keyframes invitation-type-breathe{
  0%,100%{
    transform:translate3d(0,2px,0) scale(.985);
    text-shadow:0 0 18px rgb(230 30 34 / 0%);
  }
  50%{
    transform:translate3d(0,-2px,0) scale(1.015);
    text-shadow:0 0 18px rgb(230 30 34 / 12%);
  }
}
#menu-atmosphere{
  position:fixed;inset:0;width:100%;height:100%;z-index:9;pointer-events:none;
  opacity:0;visibility:hidden;
  transition:opacity .8s ease,visibility 0s .8s;
}
#menu-atmosphere:not(.is-shader){background:radial-gradient(ellipse at 0 18%,#e61e22dd,transparent 70%),radial-gradient(ellipse at 0 100%,#92929288,transparent 55%)}
#menu-atmosphere.is-shader{background:none}
body.menu-open #menu-atmosphere{
  opacity:1;visibility:visible;
  transition:opacity .8s ease,visibility 0s;
}
.nav-backdrop{z-index:10;background:none;backdrop-filter:none;cursor:default}
.site-header{z-index:30}
.navigation{z-index:22;top:clamp(126px,20vh,200px);left:40px;bottom:auto;width:min(360px,calc(100vw - 80px));max-width:none;padding:0;border:0;background:none;transform:translateY(15px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s,transform .6s cubic-bezier(.16,1,.3,1),visibility 0s .6s;display:flex;align-items:flex-start}
.navigation.open{transform:translateY(0);opacity:1;visibility:visible;pointer-events:auto;transition:opacity .7s .1s,transform .9s cubic-bezier(.16,1,.3,1),visibility 0s}
.navigation>.eyebrow{margin-bottom:10px;color:inherit;font-size:8px;letter-spacing:.1em}
.navigation>a{display:flex;align-items:center;min-height:48px;padding:0;border:0;font-size:clamp(30px,3vw,42px);line-height:1;font-style:italic;letter-spacing:-.025em;transform:translateX(-10px);opacity:0;transition:transform .55s,opacity .4s,color .2s}
.navigation.open>a{transform:translateX(0);opacity:1}
.navigation.open>a:nth-of-type(1){transition-delay:.12s}
.navigation.open>a:nth-of-type(2){transition-delay:.18s}
.navigation.open>a:nth-of-type(3){transition-delay:.24s}
.navigation>a:hover{padding-left:0;transform:translateX(6px);color:#000}
.navigation-tools{display:flex;gap:10px;margin-top:28px;opacity:0;transition:opacity .3s}
.navigation.open .navigation-tools{opacity:1;transition-delay:.3s}
body.menu-open .navigation{color:#160607}
:is(#menu-toggle,#back-button,.navigation-tools .icon-button){
  --menu-ink:var(--red100);
  --menu-stroke:var(--red20);
  --menu-hover-stroke:var(--red60);
  color:var(--menu-ink);
  border-color:var(--menu-stroke);
  background:transparent;
  box-shadow:none;
  transition:color .6s ease,border-color .6s ease;
}
:is(#menu-toggle,#back-button,.navigation-tools .icon-button):is(:hover,:focus-visible,:active){
  color:var(--menu-ink);
  border-color:var(--menu-hover-stroke);
  background:transparent;
  box-shadow:none;
}
:is(#menu-toggle,#back-button,.navigation-tools .icon-button):focus-visible{
  outline-color:var(--menu-hover-stroke);
}
body.menu-open :is(#menu-toggle,#back-button,.navigation-tools .icon-button){
  --menu-ink:#000;
  --menu-stroke:rgb(0 0 0 / 20%);
  --menu-hover-stroke:rgb(0 0 0 / 60%);
}
body.menu-open #back-button{opacity:0;pointer-events:none;visibility:hidden}
.home-message{transition:opacity .6s}
body.menu-open .home-message{opacity:.08}
.social-links{position:fixed;right:28px;bottom:20px;z-index:20;display:flex;align-items:center;gap:0}
.social-links a{height:48px;width:48px;display:grid;place-items:center;border-radius:50%;transition:background .25s,transform .25s}
.social-links a:hover{background:var(--red20);transform:translateY(-2px)}
.social-links svg{display:block;width:16px;height:16px;fill:currentColor;stroke:none}
.social-links .social-outline{fill:none;stroke:currentColor;stroke-width:3}
.profile-container{padding-bottom:120px}
.join-layout{padding-bottom:120px}
.story-dialog{width:470px;padding:28px 32px 35px}
.story-dialog h2{font-size:51px;margin:25px 0 18px;font-style:italic}
.story-dialog>p{color:var(--red60);font-size:24px;line-height:1.3;margin-bottom:30px}
.story-dialog .rose-button{margin-top:2px}
@media(max-width:750px){
  .site-header{height:48px;top:20px}
  .header-left{gap:8px}
  .join-pill{height:48px;min-width:108px;padding:0 15px;gap:9px}
  .join-pill svg{width:38px;height:auto}
  .email-form{height:48px}
  .email-form .rose-button{padding:0 15px}
  .navigation{left:24px;top:132px;width:calc(100vw - 48px)}
  .navigation>a{font-size:34px}
  .social-links{right:8px;bottom:12px}
  .memory-invitation{top:calc(50% + min(20.5vh,27vw,185px) + 24px)}
  .story-dialog{padding:24px}
}
@media(max-width:380px){
  .brand svg{width:60px;height:auto}
  .join-pill{min-width:94px;padding:0 12px}
  .header-left{gap:4px}
}
.eyebrow,
.home-message>.eyebrow,
.navigation>.eyebrow,
.collection-heading .eyebrow,
.memory-card .eyebrow,
#join-form>.eyebrow,
.dialog-heading .eyebrow,
.memory-caption>.eyebrow,
.field-label,
.profile-stats,
.preview-notice,
.memory-loading,
.file-divider,
.font-settings summary,
#font-status,
.wander-guide,
.canvas-coordinate,
.canvas-coordinate span+span,
.corner-tools,
.navigation>a span,
.author-link small,
#like-count,
.memory-information #memory-source,
.memory-controls-hint,
.profile-footer,
.join-art-label,
.join-footer{
  font-size:var(--label-sm);
}

.join-pill,
.rose-button,
.text-button,
.join-footer .text-button{
  font-family:var(--serif);
  font-size:var(--button-text-size);
  font-style:italic;
  font-weight:400;
  line-height:1.2;
  letter-spacing:var(--button-text-spacing);
  text-transform:none;
  padding-block:0 4px;
}

.join-pill>svg{transform:translateY(2px)}

.profile-stats{flex-wrap:wrap;row-gap:10px}
.collection-heading{flex-wrap:wrap;gap:16px}

@media(prefers-reduced-motion:reduce){
  .invitation-type{animation:none;transform:none;text-shadow:none}
  .memory-invitation,.invitation-type i{transition:none}
  .navigation,.navigation>a,.navigation-tools{transition:none}
}
/* Remove extra focus rings without removing the controls' own borders. */
:is(a, button, input, select, textarea, [role="button"], [role="link"], .flow-field),
:is(a, button, input, select, textarea, [role="button"], [role="link"], .flow-field):is(:hover, :active, :focus, :focus-visible, :focus-within) {
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent;
}
:is(a, button, input, select, textarea, [role="button"], [role="link"], .flow-field):not(.icon-button),
:is(a, button, input, select, textarea, [role="button"], [role="link"], .flow-field):not(.icon-button):is(:hover, :active, :focus, :focus-visible, :focus-within) {
  border: 0 !important;
}
:is(a, button, [role="button"], [role="link"], .flow-field)::before,
:is(a, button, [role="button"], [role="link"], .flow-field)::after {
  outline: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
/* Circular controls retain one border in every interaction state. */
.icon-button {
  border-width: 1px;
  border-style: solid;
}
/* Keyboard feedback stays inside the control, with no underline or outer ring. */
:is(a, button, [role="button"], [role="link"]):focus-visible {
  text-decoration: none !important;
  background-color: rgb(230 30 34 / 16%);
}
.navigation :is(a, button):is(:focus, :focus-visible) {
  text-decoration: none !important;
}
body.menu-open .navigation :is(a, button):focus-visible {
  background-color: rgb(0 0 0 / 14%);
}
:is(#menu-toggle, #back-button, .navigation-tools .icon-button):focus-visible {
  background-color: rgb(230 30 34 / 16%);
}
body.menu-open :is(#menu-toggle, #back-button, .navigation-tools .icon-button):focus-visible {
  background-color: rgb(0 0 0 / 14%);
}
:is(input, select, textarea):focus-visible {
  background-color: rgb(230 30 34 / 7%) !important;
}
.flow-field:focus-within {
  background-color: #180b0c;
}
@media (forced-colors: active) {
  :is(a, button, input, select, textarea, [role="button"], [role="link"]):focus-visible {
    forced-color-adjust: none;
    background-color: Highlight !important;
    color: HighlightText !important;
  }
}

/* Profile layout controls use the supplied icons at their native size. */
button:has(> svg.profile-view-icon) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  min-width: 48px;
  max-width: 48px;
  height: 48px;
  min-height: 48px;
  flex: 0 0 48px;
  padding: 0;
  gap: 0;
  border-radius: 50%;
}
button > svg.profile-view-icon {
  display: block;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  margin: 0;
  transform: none;
  fill: none;
  stroke: none;
  stroke-width: 0;
  pointer-events: none;
}
button > svg.profile-view-icon path {
  fill: currentColor;
  stroke: none;
}

/* Lock the view icons to the exact center, independent of shared button typography. */
button:has(> svg.profile-view-icon) {
  position: relative;
  box-sizing: border-box;
  padding: 0 !important;
  line-height: 0;
  text-indent: 0;
}
button > svg.profile-view-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
  transform-origin: center;
}