/* ==========================================================================
   IN LOVING MEMORY — Tersoo Macikpah
   Design: Editorial Letterpress — human, textured, asymmetric, warm
   ========================================================================== */

/* --------------------------------------------------------------------------
   TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Ink & Paper */
  --ink:            #1C1A18;
  --ink-light:      #3D3A37;
  --ink-muted:      #6B6560;
  --ink-subtle:     #9E9892;
  --paper:          #F8F5F0;
  --paper-warm:     #F3EFE8;
  --surface:        #FEFCF9;
  --surface-warm:   #FBF7F2;

  /* Accents */
  --aubergine:      #4A2C3E;
  --aubergine-light:#6D4559;
  --dusty-rose:     #C49B8C;
  --dusty-rose-light:#D9B8AB;
  --olive:          #6B7B5E;
  --olive-light:    #859878;
  --copper:         #B8754E;
  --copper-light:   #CF956E;

  /* Functional */
  --error:          #B13B3B;
  --error-bg:       #FDF5F5;
  --success:        #4A7C59;

  /* Lines & Borders */
  --rule:           #E4DED5;
  --rule-light:     #EDE8E1;
  --rule-strong:    #D5CDC2;

  /* Typography */
  --font-display:   'Playfair Display', 'Times New Roman', serif;
  --font-body:      'Lora', 'Georgia', serif;
  --font-ui:        'Inter', system-ui, sans-serif;

  /* Type Scale */
  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-lg:    1.125rem;
  --text-xl:    1.25rem;
  --text-2xl:   1.5rem;
  --text-3xl:   2rem;
  --text-4xl:   2.75rem;
  --text-5xl:   3.5rem;
  --text-6xl:   4.5rem;

  /* Spacing */
  --space-xs:   0.25rem;
  --space-sm:   0.5rem;
  --space-md:   1rem;
  --space-lg:   1.5rem;
  --space-xl:   2rem;
  --space-2xl:  3rem;
  --space-3xl:  4.5rem;
  --space-4xl:  7rem;

  /* Misc */
  --radius-sm:  3px;
  --radius-md:  6px;
  --radius-lg:  12px;
  --radius-full:9999px;
  --ease:       cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1);
  --nav-h:      64px;
}

/* --------------------------------------------------------------------------
   RESET
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:var(--nav-h);-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);
  font-size:var(--text-base);
  line-height:1.7;
  color:var(--ink);
  background-color:var(--paper);
  background-image:
    linear-gradient(rgba(248,245,240,0.75), rgba(248,245,240,0.75)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cdefs%3E%3Cg id='f'%3E%3Ccircle cx='5' cy='5' r='2.5' fill='%23C49B8C'/%3E%3Ccircle cx='5' cy='0' r='2' fill='%23D9B8AB'/%3E%3Ccircle cx='9.3' cy='1.5' r='2' fill='%23D9B8AB'/%3E%3Ccircle cx='9.3' cy='8.5' r='2' fill='%23D9B8AB'/%3E%3Ccircle cx='5' cy='10' r='2' fill='%23D9B8AB'/%3E%3Ccircle cx='0.7' cy='8.5' r='2' fill='%23D9B8AB'/%3E%3Ccircle cx='0.7' cy='1.5' r='2' fill='%23D9B8AB'/%3E%3C/g%3E%3Cg id='s'%3E%3Ccircle cx='3' cy='3' r='1.5' fill='%23C49B8C'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23f' x='18' y='22'/%3E%3Cuse href='%23s' x='78' y='45'/%3E%3Cuse href='%23f' x='135' y='18'/%3E%3Cuse href='%23s' x='165' y='62'/%3E%3Cuse href='%23f' x='52' y='95'/%3E%3Cuse href='%23s' x='8' y='112'/%3E%3Cuse href='%23f' x='92' y='78'/%3E%3Cuse href='%23s' x='148' y='108'/%3E%3Cuse href='%23f' x='178' y='132'/%3E%3Cuse href='%23s' x='38' y='158'/%3E%3Cuse href='%23f' x='72' y='148'/%3E%3Cuse href='%23s' x='118' y='172'/%3E%3Cuse href='%23f' x='22' y='182'/%3E%3Cuse href='%23s' x='162' y='180'/%3E%3Cuse href='%23f' x='108' y='26'/%3E%3Cuse href='%23s' x='52' y='52'/%3E%3Cuse href='%23f' x='182' y='48'/%3E%3Cuse href='%23s' x='32' y='82'/%3E%3Cuse href='%23f' x='148' y='68'/%3E%3Cuse href='%23s' x='88' y='122'/%3E%3Cuse href='%23f' x='128' y='142'/%3E%3Cuse href='%23s' x='62' y='112'/%3E%3Cuse href='%23f' x='48' y='178'/%3E%3Cuse href='%23s' x='142' y='32'/%3E%3C/svg%3E");
  background-repeat:repeat;
  background-size:200px 200px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--aubergine);text-decoration:none;transition:color .2s var(--ease)}
a:hover{color:var(--aubergine-light)}
:focus-visible{outline:2px solid var(--copper);outline-offset:3px;border-radius:2px}
::selection{background:rgba(196,155,140,.25);color:var(--ink)}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* --------------------------------------------------------------------------
   SPLASH — welcome overlay
   -------------------------------------------------------------------------- */
.c-splash{
  position:fixed;inset:0;z-index:10001;
  background:var(--paper);
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  transition:opacity .6s var(--ease),visibility .6s;
}
.c-splash--hidden{opacity:0;visibility:hidden;pointer-events:none}
.c-splash__inner{max-width:400px;padding:var(--space-2xl)}
.c-splash__candle{margin-bottom:var(--space-xl)}
.c-splash__kicker{
  font-family:var(--font-ui);font-size:var(--text-xs);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--copper);
  margin-bottom:var(--space-lg);
}
.c-splash__name{
  font-family:var(--font-display);font-size:var(--text-3xl);font-weight:600;
  color:var(--ink);line-height:1.2;margin-bottom:var(--space-lg);
}
.c-splash__name em{font-style:italic;color:var(--aubergine)}
.c-splash__dates{
  font-family:var(--font-display);font-size:var(--text-lg);font-style:italic;
  color:var(--ink-muted);margin-bottom:var(--space-2xl);
}
.c-splash__btn{
  font-family:var(--font-ui);font-size:var(--text-sm);font-weight:500;letter-spacing:.06em;
  color:var(--surface);background:var(--aubergine);
  border:none;padding:var(--space-md) var(--space-3xl);border-radius:var(--radius-full);
  cursor:pointer;transition:background .3s var(--ease),transform .3s var(--ease);
}
.c-splash__btn:hover{background:var(--aubergine-light);transform:translateY(-1px)}
.c-splash__btn:active{transform:translateY(0)}

/* --------------------------------------------------------------------------
   PAPER TEXTURE
   -------------------------------------------------------------------------- */
body::before{
  content:'';
  position:fixed;inset:0;z-index:9999;pointer-events:none;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}


/* --------------------------------------------------------------------------
   CONTAINER (varied widths for editorial rhythm)
   -------------------------------------------------------------------------- */
.o-container         {max-width:1120px;margin-inline:auto;padding-inline:var(--space-xl)}
.o-container--narrow {max-width:720px}
.o-container--wide   {max-width:1280px}
.o-container--flush  {padding-inline:0}
@media(min-width:768px){
  .o-container{padding-inline:var(--space-2xl)}
  .o-container--narrow{padding-inline:var(--space-2xl)}
}

/* --------------------------------------------------------------------------
   NAV — understated
   -------------------------------------------------------------------------- */
.c-nav{
  position:fixed;inset:0 0 auto 0;z-index:100;
  height:var(--nav-h);
  background:rgba(248,245,240,.88);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .35s var(--ease),box-shadow .35s var(--ease);
}
.c-nav--scrolled{border-bottom-color:var(--rule);box-shadow:0 1px 0 var(--rule-light)}
.c-nav__inner{
  display:flex;align-items:center;justify-content:space-between;
  height:100%;max-width:1120px;margin-inline:auto;padding-inline:var(--space-xl);
}
.c-nav__brand{
  font-family:var(--font-display);font-style:italic;
  font-size:var(--text-lg);color:var(--aubergine);
}
.c-nav__music{
  background:none;border:none;color:var(--ink-muted);cursor:pointer;
  padding:4px 6px;display:flex;align-items:center;transition:color .2s;
}
.c-nav__music:hover{color:var(--copper)}
.c-nav__music--playing{color:var(--copper)}
.c-nav__cta{
  font-family:var(--font-ui);font-size:var(--text-xs);font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--aubergine);border-bottom:1px solid var(--dusty-rose);
  padding-bottom:2px;transition:border-color .2s var(--ease),color .2s var(--ease);
}
.c-nav__cta:hover{color:var(--ink);border-bottom-color:var(--copper)}

/* --------------------------------------------------------------------------
   HERO — editorial typography + photo
   -------------------------------------------------------------------------- */
.c-hero{
  min-height:100vh;min-height:100dvh;
  display:flex;align-items:center;
  padding:calc(var(--nav-h) + var(--space-4xl)) var(--space-xl) var(--space-3xl);
  position:relative;overflow:hidden;
}

/* Subtle warm radial glow behind hero text */
.c-hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 40% 50% at 25% 55%,rgba(196,155,140,.08) 0%,transparent 70%),
    radial-gradient(ellipse 50% 40% at 70% 40%,rgba(74,44,62,.04) 0%,transparent 70%);
}

.c-hero__grid{
  display:grid;grid-template-columns:1fr;gap:var(--space-3xl);
  align-items:center;max-width:1120px;margin-inline:auto;width:100%;position:relative;z-index:1;
}
@media(min-width:860px){
  .c-hero__grid{grid-template-columns:1fr 1fr;gap:var(--space-4xl)}
}

/* --- Hero Text --- */
.c-hero__text{max-width:540px}

.c-hero__kicker{
  font-family:var(--font-ui);font-size:var(--text-xs);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--copper);
  margin-bottom:var(--space-xl);
}

.c-hero__name{
  font-family:var(--font-display);font-size:clamp(3rem,8vw,var(--text-6xl));
  font-weight:700;color:var(--ink);line-height:1.08;letter-spacing:-.015em;
  margin-bottom:var(--space-md);
}
.c-hero__name em{font-style:italic;color:var(--aubergine)}

.c-hero__dates{
  font-family:var(--font-display);font-size:var(--text-xl);font-style:italic;
  color:var(--ink-muted);margin-bottom:var(--space-xl);
}

/* Ornamental rule — wavy */
.c-hero__rule{
  width:60px;height:12px;margin-bottom:var(--space-xl);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 12'%3E%3Cpath d='M0 6 Q7.5 1 15 6 Q22.5 11 30 6 Q37.5 1 45 6 Q52.5 11 60 6' fill='none' stroke='%23B8754E' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center;
}

.c-hero__quote{
  font-family:var(--font-body);font-size:var(--text-lg);font-style:italic;
  line-height:1.65;color:var(--ink-muted);margin-bottom:var(--space-2xl);
  max-width:420px;
}

.c-hero__action{
  display:inline-flex;align-items:center;gap:var(--space-md);
  font-family:var(--font-ui);font-size:var(--text-sm);font-weight:500;
  color:var(--surface);background:var(--aubergine);
  padding:var(--space-md) var(--space-2xl);border-radius:var(--radius-full);
  transition:background .25s var(--ease),transform .25s var(--ease);
}
.c-hero__action:hover{background:var(--aubergine-light);color:var(--surface);transform:translateY(-1px)}
.c-hero__action:active{transform:translateY(0)}

/* Hero arrow */
.c-hero__arrow{display:inline-block;transition:transform .25s var(--ease)}
.c-hero__action:hover .c-hero__arrow{transform:translateY(3px)}

/* --- Hero Photo --- */
.c-hero__photo-wrap{position:relative}
.c-hero__photo{
  position:relative;z-index:2;
  border-radius:4px;
  overflow:hidden;
  box-shadow:
    0 2px 20px rgba(28,26,24,.08),
    0 8px 40px rgba(28,26,24,.06);
}
.c-hero__photo img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}

/* Photo back-paper — like a print slightly misaligned on paper */
.c-hero__photo-back{
  position:absolute;inset:-10px -10px -14px 10px;z-index:1;
  background:var(--surface);border-radius:3px;
  box-shadow:0 1px 4px rgba(28,26,24,.06);
  transform:rotate(-1deg);
}

/* Empty photo state */
.c-hero__photo--empty{
  aspect-ratio:4/5;background:var(--paper-warm);
  display:flex;align-items:center;justify-content:center;
  border:1px dashed var(--rule-strong);
}
.c-hero__photo--empty .c-hero__photo-back{display:none}

/* Scroll line */
.c-hero__scroll{
  position:absolute;bottom:var(--space-2xl);left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:var(--space-sm);
}
.c-hero__scroll-line{
  width:1px;height:40px;background:var(--rule-strong);
  animation:scrollLine 2.5s ease-in-out infinite;
}
.c-hero__scroll-label{
  font-family:var(--font-ui);font-size:.625rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-subtle);
}
@keyframes scrollLine{
  0%,100%{transform:scaleY(1);transform-origin:top}
  50%{transform:scaleY(.4);transform-origin:top}
}

/* --------------------------------------------------------------------------
   REMEMBRANCE — editorial two-column
   -------------------------------------------------------------------------- */
/* --- Ornamental section dividers — asymmetric flourishes --- */
.c-remembrance{
  padding-block:var(--space-4xl);
  background:var(--surface);
  position:relative;
}
.c-remembrance::before{
  content:'';position:absolute;top:-1px;right:12%;width:200px;height:40px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40'%3E%3Cpath d='M200 0 Q170 12 150 8 Q120 2 100 12 Q80 22 60 18 Q35 12 0 20' fill='none' stroke='%23D5CDC2' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M200 0 Q170 12 150 8 Q120 2 100 12 Q80 22 60 18 Q35 12 0 20' fill='none' stroke='%23E4DED5' stroke-width='3' stroke-linecap='round' opacity='0.5'/%3E%3C/svg%3E") no-repeat;
}
.c-remembrance__grid{
  display:grid;grid-template-columns:1fr;gap:var(--space-3xl);
}
@media(min-width:768px){
  .c-remembrance__grid{grid-template-columns:5fr 7fr;gap:var(--space-4xl)}
}

/* --- Photo side --- */
.c-remembrance__visual{
  display:flex;flex-direction:column;gap:var(--space-lg);
}
.c-remembrance__frame{
  position:relative;border-radius:3px;overflow:hidden;
  box-shadow:0 4px 24px rgba(28,26,24,.07);
}
.c-remembrance__frame img{width:100%;aspect-ratio:3/4;object-fit:cover}
.c-remembrance__frame--empty{
  aspect-ratio:3/4;background:var(--paper-warm);
  display:flex;align-items:center;justify-content:center;
  color:var(--ink-subtle);
}
.c-remembrance__caption{
  font-family:var(--font-display);font-style:italic;font-size:var(--text-sm);
  color:var(--ink-muted);text-align:center;
}

/* --- Text side --- */
.c-remembrance__text{display:flex;flex-direction:column;gap:var(--space-xl)}

.c-section-eyebrow{
  font-family:var(--font-ui);font-size:var(--text-xs);font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--copper);
}
.c-section-title{
  font-family:var(--font-display);font-size:var(--text-4xl);font-weight:700;
  line-height:1.15;letter-spacing:-.01em;color:var(--ink);
}
@media(max-width:767px){.c-section-title{font-size:var(--text-3xl)}}

.c-remembrance__lead{
  font-size:var(--text-xl);line-height:1.6;color:var(--ink-light);
}
.c-remembrance__body{
  columns:1;column-gap:var(--space-2xl);color:var(--ink-muted);line-height:1.75;
}
@media(min-width:560px){.c-remembrance__body{columns:2}}

.c-remembrance__body p + p{margin-top:var(--space-lg)}

/* Tribute count */
.c-remembrance__count{
  display:inline-flex;align-items:baseline;gap:var(--space-xs);
  padding:var(--space-sm) 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
.c-remembrance__count-num{
  font-family:var(--font-display);font-size:var(--text-4xl);font-weight:700;
  color:var(--aubergine);line-height:1;
}
.c-remembrance__count-label{font-size:var(--text-sm);color:var(--ink-muted)}

/* --------------------------------------------------------------------------
   TRIBUTE FORM — guest book aesthetic
   -------------------------------------------------------------------------- */
.c-form-section{
  padding-block:var(--space-4xl);
  background:
    linear-gradient(180deg,var(--paper) 0%,var(--paper-warm) 40%,var(--paper) 100%);
  position:relative;
}
.c-form-section::before{
  content:'';position:absolute;top:-1px;left:8%;width:180px;height:36px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 36'%3E%3Cpath d='M0 18 Q30 6 60 16 Q90 26 120 10 Q150 -4 180 8' fill='none' stroke='%23D5CDC2' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M0 18 Q30 6 60 16 Q90 26 120 10 Q150 -4 180 8' fill='none' stroke='%23E4DED5' stroke-width='3' stroke-linecap='round' opacity='0.5'/%3E%3C/svg%3E") no-repeat;
}
}

.c-form-section__header{text-align:center;margin-bottom:var(--space-3xl)}
.c-form-section__header .c-section-eyebrow{margin-bottom:var(--space-md)}
.c-form-section__header .c-section-title{margin-bottom:var(--space-md)}
.c-form-section__sub{
  font-size:var(--text-lg);color:var(--ink-muted);max-width:500px;margin-inline:auto;
  line-height:1.6;
}

/* --- Form card — like a fine stationery sheet --- */
.c-form{
  max-width:680px;margin-inline:auto;
  background:var(--surface);
  padding:var(--space-2xl) var(--space-xl);
  box-shadow:
    0 1px 0 var(--rule),
    0 4px 24px rgba(28,26,24,.04);
  border-radius:2px;
}
@media(min-width:768px){.c-form{padding:var(--space-3xl) var(--space-3xl)}}

/* --- Field --- */
.c-field{margin-bottom:var(--space-2xl)}
.c-field--last{margin-bottom:var(--space-2xl)}

.c-field__label{
  display:block;font-family:var(--font-ui);font-size:var(--text-xs);
  font-weight:500;letter-spacing:.04em;color:var(--ink-light);
  margin-bottom:var(--space-sm);text-transform:uppercase;
}
.c-field__hint{font-weight:400;color:var(--ink-subtle);text-transform:none;letter-spacing:0}
.c-field__required{color:var(--error)}

/* --- Underline inputs (guest book style) --- */
.c-input{
  width:100%;padding:.7rem 0;
  font-family:var(--font-body);font-size:var(--text-base);color:var(--ink);
  background:transparent;
  border:none;border-bottom:1px solid var(--rule-strong);
  border-radius:0;
  transition:border-color .25s var(--ease);
  appearance:none;
}
.c-input::placeholder{color:var(--ink-subtle);font-style:italic}
.c-input:hover{border-bottom-color:var(--ink-subtle)}
.c-input:focus{outline:none;border-bottom-color:var(--aubergine);border-bottom-width:2px;padding-bottom:calc(.7rem - 1px)}
.c-input--error{border-bottom-color:var(--error)}
.c-input--error:focus{border-bottom-color:var(--error)}
.c-input:disabled{opacity:.45;cursor:not-allowed}

/* --- Select (custom arrow) --- */
.c-select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B6560' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 4px center;
  padding-right:24px;cursor:pointer;
}

/* --- Textarea --- */
.c-textarea{resize:vertical;min-height:120px;line-height:1.75;padding-top:.7rem}

.c-field__footer{display:flex;justify-content:space-between;align-items:flex-start;margin-top:var(--space-xs)}
.c-field__error{font-family:var(--font-ui);font-size:var(--text-xs);color:var(--error);min-height:1.3em;line-height:1.4}
.c-field__count{font-family:var(--font-ui);font-size:var(--text-xs);color:var(--ink-subtle);white-space:nowrap}

/* --- Upload — photo drop zone --- */
.c-upload{
  border:1px dashed var(--rule-strong);border-radius:2px;
  padding:var(--space-2xl) var(--space-xl);text-align:center;cursor:pointer;
  background:var(--paper);transition:border-color .25s var(--ease),background .25s var(--ease);
}
.c-upload:hover,.c-upload--dragover{border-color:var(--copper);background:rgba(184,117,78,.04)}
.c-upload__input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.c-upload__wrap{position:relative}
.c-upload__icon{color:var(--ink-subtle);margin-bottom:var(--space-md)}
.c-upload__title{font-size:var(--text-sm);color:var(--ink);margin-bottom:var(--space-xs)}
.c-upload__title strong{color:var(--aubergine);font-weight:600}
.c-upload__hint{font-size:var(--text-xs);color:var(--ink-subtle)}

/* Upload preview — multi-image grid */
.c-upload__preview-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
  gap:var(--space-sm);margin-top:var(--space-lg);
}
.c-upload__thumb{
  position:relative;aspect-ratio:1;border-radius:2px;overflow:hidden;
  background:var(--paper-warm);
}
.c-upload__thumb img{width:100%;height:100%;object-fit:cover}
.c-upload__thumb-remove{
  position:absolute;top:4px;right:4px;
  width:22px;height:22px;border-radius:50%;background:rgba(28,26,24,.7);border:none;
  color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .2s var(--ease);
  z-index:2;
}
.c-upload__thumb-remove:hover{background:rgba(28,26,24,.9)}
.c-upload__add-more{
  display:flex;align-items:center;justify-content:center;
  aspect-ratio:1;border:1px dashed var(--rule-strong);border-radius:2px;
  cursor:pointer;color:var(--ink-subtle);transition:border-color .2s,color .2s;
  font-size:var(--text-xs);
}
.c-upload__add-more:hover{border-color:var(--copper);color:var(--copper)}

/* --- Submit --- */
.c-submit{
  width:100%;display:flex;align-items:center;justify-content:center;gap:var(--space-sm);
  padding:var(--space-md) var(--space-2xl);
  font-family:var(--font-ui);font-size:var(--text-sm);font-weight:500;letter-spacing:.03em;
  color:var(--surface);background:var(--aubergine);
  border:none;border-radius:var(--radius-full);cursor:pointer;
  transition:background .25s var(--ease),transform .2s var(--ease),box-shadow .25s var(--ease);
}
.c-submit:hover{background:var(--aubergine-light);transform:translateY(-1px);box-shadow:0 6px 20px rgba(74,44,62,.2)}
.c-submit:active{transform:translateY(0)}
.c-submit:disabled{opacity:.55;cursor:not-allowed;transform:none}
.c-submit--loading .c-submit__label{display:none}
.c-submit__spinner{display:none;align-items:center;gap:var(--space-sm)}
.c-submit--loading .c-submit__spinner{display:flex}

/* --- Success --- */
.c-form-success{text-align:center;padding:var(--space-2xl) var(--space-xl)}
.c-form-success__icon{color:var(--success);margin-bottom:var(--space-lg)}
.c-form-success h3{font-family:var(--font-display);font-size:var(--text-2xl);margin-bottom:var(--space-md)}
.c-form-success p{color:var(--ink-muted);line-height:1.7;margin-bottom:var(--space-xl);max-width:400px;margin-inline:auto}
.c-form-success__again{
  font-family:var(--font-ui);font-size:var(--text-xs);font-weight:500;letter-spacing:.04em;
  color:var(--aubergine);background:transparent;border:1px solid var(--aubergine);
  padding:var(--space-sm) var(--space-xl);border-radius:var(--radius-full);cursor:pointer;
  transition:all .2s var(--ease);
}
.c-form-success__again:hover{background:var(--aubergine);color:var(--surface)}

/* --- Error banner --- */
.c-form-error{
  display:flex;align-items:center;gap:var(--space-md);
  padding:var(--space-md) var(--space-lg);margin-top:var(--space-xl);
  background:var(--error-bg);border-left:3px solid var(--error);
  font-family:var(--font-ui);font-size:var(--text-sm);color:var(--error);
}

/* --------------------------------------------------------------------------
   TRIBUTES WALL — editorial mixed layout
   -------------------------------------------------------------------------- */
.c-tributes{
  padding-block:var(--space-4xl);
  background:var(--surface);
  position:relative;
}
.c-tributes::before{
  content:'';position:absolute;top:-1px;right:15%;width:220px;height:34px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 34'%3E%3Cpath d='M220 6 Q190 -4 160 10 Q130 24 100 14 Q70 4 40 18 Q20 28 0 16' fill='none' stroke='%23D5CDC2' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M220 6 Q190 -4 160 10 Q130 24 100 14 Q70 4 40 18 Q20 28 0 16' fill='none' stroke='%23E4DED5' stroke-width='3' stroke-linecap='round' opacity='0.5'/%3E%3C/svg%3E") no-repeat;
}
}

.c-tributes__header{text-align:center;margin-bottom:var(--space-3xl)}
.c-tributes__header .c-section-eyebrow{margin-bottom:var(--space-md)}
.c-tributes__header .c-section-title{margin-bottom:var(--space-md)}
.c-tributes__sub{font-size:var(--text-lg);color:var(--ink-muted);max-width:480px;margin-inline:auto}

/* --- Grid — asymmetric, masonry feel --- */
.c-tributes-grid{
  columns:1;column-gap:var(--space-xl);
  margin-top:var(--space-2xl);
}
@media(min-width:600px){.c-tributes-grid{columns:2}}
@media(min-width:960px){.c-tributes-grid{columns:3}}

/* --- Card — like a personal note --- */
.c-tribute{
  break-inside:avoid;margin-bottom:var(--space-xl);
  background:var(--paper);padding:var(--space-xl);
  border:1px solid var(--rule-light);border-radius:2px;
  transition:box-shadow .3s var(--ease),transform .3s var(--ease);
  animation:cardIn .55s var(--ease) both;
}
.c-tribute:hover{box-shadow:0 4px 20px rgba(28,26,24,.05)}
.c-tribute--featured{columns:auto;column-span:all}

@keyframes cardIn{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:translateY(0)}
}

/* Card header */
.c-tribute__top{display:flex;align-items:flex-start;gap:var(--space-md);margin-bottom:var(--space-lg)}
.c-tribute__avatar{
  width:40px;height:40px;border-radius:50%;flex-shrink:0;
  background:var(--paper-warm);color:var(--aubergine);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:var(--text-base);font-weight:600;
}
.c-tribute__who{min-width:0}
.c-tribute__name{font-size:var(--text-sm);font-weight:600;color:var(--ink);line-height:1.3}
.c-tribute__rel{
  display:inline-block;font-family:var(--font-ui);font-size:.6875rem;font-weight:500;
  letter-spacing:.05em;text-transform:uppercase;
  color:var(--copper);margin-top:2px;
}
.c-tribute__date{font-family:var(--font-ui);font-size:.6875rem;color:var(--ink-subtle);margin-top:1px}

/* Card body — clickable */
.c-tribute{cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.c-tribute:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(28,26,24,.08)}
.c-tribute:active{transform:translateY(0)}
.c-tribute__preview{
  font-size:var(--text-sm);line-height:1.75;color:var(--ink-light);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:0;
}
.c-tribute__thumb{position:relative;margin-top:var(--space-md);border-radius:2px;overflow:hidden;aspect-ratio:3/2}
.c-tribute__thumb img{width:100%;height:100%;object-fit:cover}
.c-tribute__thumb-badge{
  position:absolute;bottom:4px;right:4px;
  background:rgba(28,26,24,.65);color:var(--paper);
  font-family:var(--font-ui);font-size:10px;padding:2px 6px;border-radius:3px;
}

/* --- Loading --- */
.c-tributes-loader{
  display:flex;flex-direction:column;align-items:center;gap:var(--space-lg);
  padding:var(--space-3xl);color:var(--ink-muted);
}
.c-tributes-loader__spin{animation:spin 2s linear infinite;opacity:.5}

/* --- Empty --- */
.c-tributes-empty{
  text-align:center;padding:var(--space-3xl);
  color:var(--ink-muted);
}
.c-tributes-empty__icon{margin-bottom:var(--space-lg);opacity:.35}
.c-tributes-empty h3{font-family:var(--font-display);font-size:var(--text-xl);margin-bottom:var(--space-sm);color:var(--ink)}
.c-tributes-empty p{margin-bottom:var(--space-lg)}
.c-tributes-empty__link{font-family:var(--font-ui);font-size:var(--text-sm);font-weight:500;color:var(--aubergine)}

/* --- Load more --- */
.c-tributes-more{text-align:center;margin-top:var(--space-2xl)}
.c-load-more{
  font-family:var(--font-ui);font-size:var(--text-xs);font-weight:500;letter-spacing:.06em;
  color:var(--aubergine);background:transparent;border:1px solid var(--rule-strong);
  padding:var(--space-md) var(--space-2xl);border-radius:var(--radius-full);
  cursor:pointer;transition:all .25s var(--ease);
}
.c-load-more:hover{border-color:var(--aubergine);background:var(--aubergine);color:var(--surface)}
.c-load-more:disabled{opacity:.4;cursor:not-allowed}

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */
.c-footer{
  background:var(--ink);color:rgba(255,255,255,.55);
  padding-block:var(--space-3xl);text-align:center;
  border-top:none;
  position:relative;
}
.c-footer::before{
  content:'';position:absolute;top:-1px;left:50%;transform:translateX(-50%);width:160px;height:30px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 30'%3E%3Cpath d='M0 22 Q30 8 60 16 Q90 24 120 10 Q140 -2 160 6' fill='none' stroke='rgba(255,255,255,0.12)' stroke-width='1.2' stroke-linecap='round'/%3E%3Cpath d='M0 22 Q30 8 60 16 Q90 24 120 10 Q140 -2 160 6' fill='none' stroke='rgba(255,255,255,0.06)' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat;
}
.c-footer__ornament{
  width:28px;height:36px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 36'%3E%3Cdefs%3E%3CradialGradient id='g' cx='50%25' cy='30%25' r='50%25'%3E%3Cstop offset='0%25' stop-color='%23CF956E' stop-opacity='0.5'/%3E%3Cstop offset='80%25' stop-color='%23CF956E' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='14' cy='3' r='12' fill='url(%23g)'/%3E%3Cpath d='M13.5 11 C13 9 12 6 14 3 C16 6 15 9 14.5 11' fill='%23CF956E' opacity='0.6'/%3E%3Cpath d='M13 12 L13 30' stroke='rgba(255,255,255,0.15)' stroke-width='1.5'/%3E%3Cline x1='11' y1='14' x2='17' y2='14' stroke='rgba(255,255,255,0.1)' stroke-width='0.8'/%3E%3Cline x1='10' y1='18' x2='18' y2='18' stroke='rgba(255,255,255,0.08)' stroke-width='0.8'/%3E%3Cline x1='10.5' y1='22' x2='17.5' y2='22' stroke='rgba(255,255,255,0.06)' stroke-width='0.8'/%3E%3Crect x='12' y='30' width='4' height='2' rx='1' fill='rgba(255,255,255,0.08)'/%3E%3Crect x='11' y='32' width='6' height='1.5' rx='0.75' fill='rgba(255,255,255,0.05)'/%3E%3C/svg%3E") no-repeat center;
  margin-inline:auto;margin-bottom:var(--space-xl);
}
.c-footer__text{
  font-family:var(--font-display);font-size:var(--text-xl);font-style:italic;
  color:rgba(255,255,255,.85);margin-bottom:var(--space-sm);
}
.c-footer__verse{
  font-family:var(--font-display);font-style:italic;font-size:var(--text-sm);
  color:rgba(255,255,255,.35);margin-bottom:var(--space-xl);
}
.c-footer__note{
  font-size:var(--text-xs);color:rgba(255,255,255,.25);
  max-width:440px;margin-inline:auto;line-height:1.6;
}

/* Admin download */
.c-footer__admin{margin-top:var(--space-xl);display:flex;justify-content:center;gap:var(--space-md)}
.c-footer__admin-btn{
  background:none;border:1px solid rgba(255,255,255,.15);color:rgba(255,255,255,.3);
  width:36px;height:36px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.c-footer__admin-btn:hover{border-color:rgba(255,255,255,.4);color:rgba(255,255,255,.6)}
.c-footer__download{
  font-family:var(--font-ui);font-size:var(--text-xs);font-weight:500;letter-spacing:.04em;
  background:var(--copper);color:#fff;border:none;padding:var(--space-sm) var(--space-lg);
  border-radius:var(--radius-full);cursor:pointer;
}
.c-footer__download:hover{background:var(--copper-light)}
.c-footer__download:disabled{opacity:.5;cursor:not-allowed}

/* --------------------------------------------------------------------------
   MODAL — full tribute view + image carousel
   -------------------------------------------------------------------------- */
.c-modal{
  position:fixed;inset:0;z-index:10000;
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;
  transition:opacity .3s var(--ease),visibility .3s;
}
.c-modal--open{opacity:1;visibility:visible}
.c-modal__backdrop{
  position:absolute;inset:0;
  background:rgba(248,245,240,.4);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.c-modal__close{
  position:absolute;top:var(--space-md);right:var(--space-md);z-index:10;
  background:none;border:none;color:var(--ink-muted);
  font-size:1.8rem;line-height:1;cursor:pointer;padding:var(--space-sm);
  font-family:var(--font-ui);opacity:.7;transition:opacity .2s;
}
.c-modal__close:hover{opacity:1;color:var(--ink)}

/* Carousel */
.c-modal__carousel{display:none;margin-bottom:var(--space-xl)}
.c-modal__img-wrap{border-radius:3px;overflow:hidden;background:rgba(0,0,0,.2)}
.c-modal__img{width:100%;max-height:50vh;object-fit:contain;display:block}

/* Nav arrows */
.c-modal__nav{display:none;align-items:center;justify-content:center;gap:var(--space-lg);margin-bottom:var(--space-xl)}
.c-modal__arrow{
  background:rgba(255,255,255,.08);border:none;color:var(--paper);
  font-size:2rem;line-height:1;width:44px;height:44px;border-radius:50%;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);transition:background .2s;
}
.c-modal__arrow:hover{background:rgba(255,255,255,.18)}
.c-modal__counter{font-family:var(--font-ui);font-size:var(--text-xs);color:rgba(255,255,255,.4);min-width:48px;text-align:center}

/* Modal card */
.c-modal__card{
  position:relative;z-index:1;
  background:var(--surface);
  max-width:640px;width:94vw;max-height:90vh;overflow-y:auto;
  padding:var(--space-2xl);padding-top:var(--space-3xl);
  box-shadow:0 8px 48px rgba(28,26,24,.12);
  scrollbar-width:thin;
  scrollbar-color:var(--dusty-rose) transparent;
}
.c-modal__card::-webkit-scrollbar{width:5px}
.c-modal__card::-webkit-scrollbar-track{background:transparent}
.c-modal__card::-webkit-scrollbar-thumb{background:var(--dusty-rose-light);border-radius:10px}
.c-modal__card::-webkit-scrollbar-thumb:hover{background:var(--dusty-rose)}
.c-modal__header{text-align:center;margin-bottom:var(--space-xl)}
.c-modal__avatar{
  width:52px;height:52px;border-radius:50%;margin:0 auto var(--space-md);
  background:var(--paper-warm);color:var(--aubergine);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:var(--text-lg);font-weight:600;
}
.c-modal__name{font-family:var(--font-display);font-size:var(--text-xl);color:var(--ink);margin-bottom:var(--space-xs)}
.c-modal__rel{
  display:inline-block;font-family:var(--font-ui);font-size:.6875rem;font-weight:500;
  letter-spacing:.05em;text-transform:uppercase;color:var(--copper);margin-bottom:var(--space-sm);
}
.c-modal__date{font-family:var(--font-ui);font-size:var(--text-xs);color:var(--ink-subtle)}
.c-modal__msg{
  font-size:var(--text-base);line-height:1.8;color:var(--ink-light);
  white-space:pre-wrap;
}

/* --------------------------------------------------------------------------
   KEYFRAMES
   -------------------------------------------------------------------------- */
@keyframes spin{to{transform:rotate(360deg)}}

/* --------------------------------------------------------------------------
   RESPONSIVE FINESSE
   -------------------------------------------------------------------------- */
@media(max-width:599px){
  /* Hero */
  .c-hero{justify-content:center;padding:calc(var(--nav-h) + var(--space-2xl)) var(--space-lg) var(--space-2xl)}
  .c-hero__grid{place-items:center;text-align:center}
  .c-hero__text{max-width:100%;display:flex;flex-direction:column;align-items:center}
  .c-hero__quote{margin-inline:auto}
  .c-hero__rule{margin-inline:auto}
  .c-hero__photo-back{display:none}

  /* Splash */
  .c-splash__name{font-size:var(--text-2xl)}
  .c-splash__dates{font-size:var(--text-base)}
  .c-splash__inner{padding:var(--space-xl)}

  /* Modal */
  .c-modal__card{max-width:100%;width:100%;max-height:100vh;padding:var(--space-xl);padding-top:var(--space-3xl)}
  .c-modal__close{top:var(--space-sm);right:var(--space-sm)}
  .c-modal__arrow{width:40px;height:40px;font-size:1.5rem}

  /* Music toggle */
  .c-nav__music{padding:6px 8px}
  .c-nav__inner{gap:var(--space-sm)}

  .c-form{padding:var(--space-xl) var(--space-lg)}
  .c-upload{padding:var(--space-xl) var(--space-lg)}

  /* Nav: center brand, keep music visible, hide CTA on mobile */
  .c-nav__inner{justify-content:center}
  .c-nav__music{margin-left:auto}
  .c-nav__cta{display:none}
}