/* Estela — hoja de estilo única. Sin dependencias, sin CDN. */

@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/eb-garamond-latin-400-normal.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: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/eb-garamond-latin-ext-400-normal.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: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/eb-garamond-cyrillic-400-normal.woff2') format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/eb-garamond-cyrillic-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/eb-garamond-greek-400-normal.woff2') format('woff2');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/eb-garamond-latin-500-normal.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: 'EB Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/eb-garamond-latin-ext-500-normal.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: 'EB Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/eb-garamond-cyrillic-500-normal.woff2') format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/eb-garamond-cyrillic-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/eb-garamond-greek-500-normal.woff2') format('woff2');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/eb-garamond-latin-400-italic.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: 'EB Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/eb-garamond-latin-ext-400-italic.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: 'EB Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/eb-garamond-cyrillic-400-italic.woff2') format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/eb-garamond-cyrillic-ext-400-italic.woff2') format('woff2');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/eb-garamond-greek-400-italic.woff2') format('woff2');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-latin-wght-normal.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: 'Inter Variable';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-latin-ext-wght-normal.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: 'Inter Variable';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-cyrillic-wght-normal.woff2') format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-cyrillic-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-greek-wght-normal.woff2') format('woff2');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* ---------- tokens ---------- */
:root {
  color-scheme: light dark;
  --bone: #F2EEE6;
  --stone: #E4DED2;
  --ink: #1B1917;
  --graphite: #5C574F;
  --hair: #CFC8BB;
  --oxide: #9C3B25;
  --serif: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Inter Variable', Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --measure: 44rem;
  --gutter: clamp(1.25rem, 5vw, 4rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bone: #141311;
    --stone: #1C1A17;
    --ink: #EDE8DE;
    --graphite: #A39C90;
    --hair: #2B2825;
    --oxide: #D3654A;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { font-size: 112.5%; }

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

/* grain */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9;
  opacity: .045;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

@media (prefers-color-scheme: dark) {
  body::after { mix-blend-mode: screen; opacity: .07; }
}

/* ---------- layout ---------- */
.wrap {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

main.wrap > section + section,
main.wrap > h1 + *,
main.wrap > * + h2 { margin-top: 0; }

main.wrap > section { margin-block: 5rem; }
main.wrap > section:first-child { margin-top: 3.5rem; }

@media (max-width: 640px) {
  main.wrap > section { margin-block: 3.5rem; }
}

.skip {
  position: absolute;
  left: -10000px;
  top: 0;
  background: var(--ink);
  color: var(--bone);
  padding: .75rem 1rem;
  z-index: 20;
}
.skip:focus { left: 0; }

/* ---------- header ---------- */
header.site { border-bottom: 1px solid var(--hair); }

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  flex-wrap: wrap;
  padding-block: 1.25rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: inherit;
  text-decoration: none;
  min-height: 44px;
}

.brand span {
  font-family: var(--serif);
  font-weight: 500;
  font-size: .875rem;
  text-transform: uppercase;
  letter-spacing: .32em;
}

nav.top { display: flex; gap: 1rem 1.5rem; flex-wrap: wrap; }

nav.top a {
  font-family: var(--sans);
  font-size: .9375rem;
  color: var(--graphite);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  transition: color 150ms;
}

nav.top a:hover, nav.top a:focus-visible { color: var(--oxide); }

@media (max-width: 520px) {
  .bar { flex-direction: column; align-items: flex-start; }
}

/* ---------- type ---------- */
h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.25rem, 6vw, 4rem);
  line-height: 1.05;
  letter-spacing: -.01em;
  margin: 0 0 1.5rem;
}

h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.2;
  margin: 0 0 1rem;
}

.prose {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1.45;
  max-width: 34em;
  margin: 0 0 1rem;
}

.label, .counter, .num, .help {
  font-family: var(--sans);
  font-weight: 500;
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
  color: var(--graphite);
}

.help { text-transform: none; letter-spacing: normal; font-weight: 400; max-width: 34em; }

.price {
  font-family: var(--serif);
  font-size: 1.1rem;
  line-height: 1.45;
  margin: .35rem 0 1.75rem;
}

main a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-color: var(--hair);
  transition: text-decoration-color 150ms, color 150ms;
}
main a:hover, main a:focus-visible { text-decoration-color: var(--oxide); }

.vh {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- form ---------- */
form { margin: 0; }

label {
  display: block;
  font-family: var(--sans);
  font-weight: 500;
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--graphite);
  margin-top: 1.75rem;
}

textarea, input[type="email"], input[type="password"], input[type="text"], input:not([type]) {
  width: 100%;
  background: transparent;
  color: var(--ink);
  border: 0;
  border-bottom: 1px solid var(--hair);
  border-radius: 0;
  padding: .6rem 0;
  font-family: var(--sans);
  font-size: 1rem;
  transition: border-color 150ms;
}

textarea {
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1.35;
  resize: vertical;
  field-sizing: content;
}

textarea:focus, input:focus {
  border-color: var(--ink);
  outline: 2px solid var(--oxide);
  outline-offset: 6px;
}

.counter { text-align: right; margin: .4rem 0 0; }
.counter.over { color: var(--oxide); }

button {
  margin-top: 2rem;
  background: var(--ink);
  color: var(--bone);
  border: 0;
  border-radius: 0;
  padding: .95rem 1.6rem;
  font: 500 .9375rem var(--sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  min-height: 44px;
  transition: background-color 150ms;
}
button:hover, button:focus-visible { background: var(--oxide); }
button[disabled] { opacity: .5; cursor: wait; }

@media (max-width: 520px) { button { width: 100%; } }

.hp { position: absolute; left: -10000px; }

#form-error:not(:empty), #note:not(:empty) {
  color: var(--oxide);
  font-family: var(--sans);
  font-size: .9375rem;
  margin-top: 1rem;
}

/* ---------- wall ---------- */
ul.stones { list-style: none; margin: 0; padding: 0; }

ul.stones li { border-top: 1px solid var(--hair); }

ul.stones a {
  display: block;
  padding: 1.5rem 0;
  color: inherit;
  text-decoration: none;
}

ul.stones .num { color: var(--graphite); transition: color 150ms; }
ul.stones a:hover .num, ul.stones a:focus-visible .num { color: var(--oxide); }

ul.stones time {
  font-family: var(--sans);
  font-size: .8125rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--graphite);
  margin-left: .75rem;
}

ul.stones .s {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.35;
  margin: .5rem 0 0;
}

@media (max-width: 640px) { ul.stones .s { font-size: 1.3rem; } }

.retired { color: var(--graphite); }

.more { margin-top: 2rem; font-family: var(--sans); font-size: .9375rem; }

.pager { display: flex; gap: 2rem; margin: 2.5rem 0; font-family: var(--sans); font-size: .9375rem; }

/* ---------- one sentence ---------- */
h1.carve {
  font-size: clamp(1.75rem, 4.5vw, 2.75rem);
  line-height: 1.2;
  letter-spacing: 0;
}

.siblings {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  margin: 2.5rem 0;
  font-family: var(--sans);
  font-size: .9375rem;
}
.siblings a { display: inline-flex; align-items: center; min-height: 44px; }

.carved {
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  padding: 2rem 0;
  margin-bottom: 3rem;
}
.carved .big { font-family: var(--serif); font-size: 2rem; line-height: 1.1; margin: 0 0 .75rem; }
.carved code { font-family: var(--sans); font-size: .875rem; color: var(--graphite); word-break: break-all; }

@media (prefers-reduced-motion: no-preference) {
  .carved { animation: fade 400ms ease-out; }
  @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
}

#share-status:not(:empty) {
  font-family: var(--sans);
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--oxide);
}

/* ---------- pending ---------- */
.pulse {
  height: 1px;
  background: var(--ink);
  margin: 2.5rem 0;
  opacity: .3;
}

@media (prefers-reduced-motion: no-preference) {
  .pulse { animation: pulse 2s ease-in-out infinite; }
  @keyframes pulse { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
}

/* ---------- rules ---------- */
ol.rules { padding-left: 1.4em; }
ol.rules li { margin-bottom: .9rem; }

/* ---------- footer ---------- */
footer.site {
  border-top: 1px solid var(--hair);
  margin-top: 5rem;
  padding: 3rem 0 4rem;
  font-family: var(--sans);
  font-size: .8125rem;
  color: var(--graphite);
}
footer.site p { margin: 0 0 .5rem; }
footer.site a { color: inherit; text-decoration: none; }
footer.site a:hover, footer.site a:focus-visible { color: var(--oxide); }
footer.site .links { display: flex; flex-wrap: wrap; gap: 0 .35rem; }
footer.site .test { color: var(--oxide); }

/* ---------- admin ---------- */
body.admin { padding-block: 3rem; }
body.admin h2 { margin-top: 3rem; }
body.admin table { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: .8125rem; }
body.admin td { border-bottom: 1px solid var(--hair); padding: .6rem .5rem; vertical-align: top; text-align: left; }
body.admin tr:nth-child(even) td { background: var(--stone); }
body.admin button { margin-top: 0; padding: .45rem .8rem; font-size: .75rem; }
body.admin input { font-size: .8125rem; }
body.admin label { margin-top: 1rem; }

:focus-visible { outline: 2px solid var(--oxide); outline-offset: 3px; }