@layer reset, base, components, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { min-width: 320px; background: #f3eee6; }
  body, figure, p, h1 { margin: 0; }
  img { display: block; max-width: 100%; }
  a { color: inherit; text-decoration: none; }
}

@layer base {
  :root {
    --paper: #f3eee6;
    --paper-deep: #e9e0d4;
    --cream: #fbf8f3;
    --ink: #202621;
    --muted: #667069;
    --clay: #bd6e52;
    --line: rgba(32, 38, 33, .14);
    --shell: min(calc(100% - 2rem), 29rem);
    color: var(--ink);
    background: var(--paper);
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
  }
  body { min-width: 320px; min-height: 100vh; background: var(--paper); -webkit-font-smoothing: antialiased; }
  :focus-visible { outline: 2px solid var(--clay); outline-offset: 4px; }
}

@layer components {
  .links-page { width: var(--shell); margin-inline: auto; padding: 1.125rem 0 2rem; }
  .links-hero { text-align: center; }
  .links-portrait { width: min(100%, 19.5rem); margin: 0 auto 1.25rem; padding: 0 .75rem .75rem 0; text-align: left; }
  .links-portrait-frame { position: relative; padding: .5rem; background: var(--paper-deep); }
  .links-portrait-frame::after { content: ''; position: absolute; inset: .625rem -.75rem -.75rem .625rem; border: 1px solid var(--clay); pointer-events: none; }
  .links-portrait-frame img { position: relative; z-index: 1; width: 100%; height: auto; }
  .links-portrait figcaption { position: relative; z-index: 1; margin: .625rem 0 0 .5rem; color: var(--muted); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; }
  .links-brand { display: inline-flex; align-items: center; justify-content: center; margin: .25rem 0 .75rem; }
  .links-brand-logo { position: relative; display: block; width: 11.5rem; height: 2.75rem; overflow: hidden; }
  .links-brand-logo img { position: absolute; left: 0; top: 50%; width: 11.5rem; height: 11.5rem; max-width: none; transform: translateY(-50%); }
  .links-kicker { color: var(--clay); font-size: .59rem; font-weight: 700; letter-spacing: .16em; line-height: 1.3; text-transform: uppercase; }
  .links-hero h1 { margin: .7rem 0 .7rem; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(2.25rem, 10vw, 3.25rem); font-weight: 400; letter-spacing: -.055em; line-height: .98; }
  .links-hero h1 em { color: var(--clay); font-style: italic; }
  .links-intro { max-width: 22rem; margin-inline: auto; color: var(--muted); font-size: .84rem; line-height: 1.55; }
  .links-list { display: grid; gap: .7rem; margin-top: 1.75rem; }
  .links-item { position: relative; display: flex; align-items: center; justify-content: space-between; min-height: 4.65rem; gap: 1.5rem; padding: .9rem 1.15rem; border: 1px solid var(--line); border-radius: 1rem; background: rgba(251, 248, 243, .72); box-shadow: 0 .35rem 1.25rem rgba(56, 43, 37, .04); transition: transform .22s ease, border-color .22s ease, background-color .22s ease; }
  .links-item:hover { transform: translateY(-2px); border-color: rgba(32, 38, 33, .3); background: var(--cream); }
  .links-item-copy { display: grid; gap: .22rem; min-width: 0; text-align: left; }
  .links-item strong { font-family: Georgia, 'Times New Roman', serif; font-size: 1.18rem; font-weight: 400; letter-spacing: -.025em; line-height: 1.1; }
  .links-item small { color: var(--muted); font-size: .69rem; line-height: 1.35; }
  .links-arrow { flex: 0 0 auto; color: var(--clay); font-size: 1.25rem; line-height: 1; transition: transform .22s ease; }
  .links-item:hover .links-arrow { transform: translate(2px, -2px); }
  .links-item-primary { border-color: var(--ink); background: var(--ink); color: var(--paper); }
  .links-item-primary:hover { border-color: var(--ink); background: #303830; }
  .links-item-primary small, .links-item-primary .links-arrow { color: var(--paper-deep); }
  .links-footer { display: grid; justify-items: center; gap: .65rem; margin-top: 2rem; color: var(--muted); text-align: center; }
  .links-footer-symbol { display: block; width: 1.9rem; height: 1.9rem; overflow: hidden; }
  .links-footer-symbol img { width: 100%; height: 100%; object-fit: contain; }
  .links-footer p { font-size: .62rem; letter-spacing: .06em; line-height: 1.55; }
  @media (min-width: 600px) {
    :root { --shell: min(calc(100% - 3rem), 31rem); }
    .links-page { padding-top: 2rem; }
    .links-portrait { width: min(100%, 20rem); }
  }
  @media (min-width: 768px) {
    .links-page { padding-top: 3rem; }
    .links-portrait { width: min(100%, 18rem); }
    .links-list { margin-top: 2rem; }
  }
  @media (min-width: 1440px) { .links-page { padding-top: 4rem; } }
  @media (prefers-reduced-motion: reduce) { .links-item, .links-arrow { transition: none; } }
}