@layer reset,base,layout,components,utilities;@layer reset{*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  html {
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    hanging-punctuation: first last;
  }

  img, video, svg {
    display: block;
    max-inline-size: 100%;
  }

  p, h1, h2, h3, h4 {
    overflow-wrap: break-word;
  }
}@layer base{:root {
    
    --font-display: 'Cormorant Garamond', Georgia, serif;
    --font-body:    'Jost', system-ui, sans-serif;

    
    --step--1: clamp(1rem,    0.96rem + 0.20vw, 1.06rem);
    --step-0:  clamp(1rem,    0.98rem + 0.28vw, 1.13rem);
    --step-1:  clamp(1.13rem, 1.05rem + 0.46vw, 1.38rem);
    --step-2:  clamp(1.35rem, 1.21rem + 0.71vw, 1.75rem);
    --step-3:  clamp(1.62rem, 1.40rem + 1.10vw, 2.25rem);
    --step-4:  clamp(2.00rem, 1.63rem + 1.85vw, 3.00rem);
    --step-5:  clamp(2.80rem, 2.00rem + 4.00vw, 5.50rem);

    
    --space-xs:  0.5rem;
    --space-s:   1rem;
    --space-m:   1.5rem;
    --space-l:   2.5rem;
    --space-xl:  4rem;
    --space-2xl: 7rem;

    
    --measure:   68ch;
    --container: min(860px, 100% - var(--space-l) * 2);

    
    --ease:     cubic-bezier(0.25, 0, 0.3, 1);
    --duration: 200ms;

    
    --color-bg:         #f9f8f5;
    --color-surface:    #f1efe9;
    --color-text:       #181714;
    --color-text-mid:   #46443e;
    --color-text-muted: #8c8a84;
    --color-border:     oklch(30% 0.01 80 / 0.12);
    --color-border-mid: oklch(30% 0.01 80 / 0.22);
    --color-accent:     #181714;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --color-bg:         #131210;
      --color-surface:    #1e1d1a;
      --color-text:       #f0ede6;
      --color-text-mid:   #c8c4bb;
      --color-text-muted: #9a9690;
      --color-border:     oklch(90% 0.01 80 / 0.14);
      --color-border-mid: oklch(90% 0.01 80 / 0.26);
      --color-accent:     #f0ede6;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
    }
  }

  html {
    font-family: var(--font-body);
    font-size: var(--step-0);
    font-weight: 400;
    line-height: 1.7;
    color: var(--color-text);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
  }

  :focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
    border-radius: 2px;
  }
}@layer layout{.container {
    inline-size: var(--container);
    margin-inline: auto;
  }

  .skip-link {
    position: absolute;
    inset-block-start: var(--space-s);
    inset-inline-start: var(--space-s);
    padding: var(--space-xs) var(--space-s);
    background: var(--color-bg);
    color: var(--color-text);
    font-size: var(--step--1);
    text-decoration: none;
    border: 1px solid var(--color-border-mid);
    border-radius: 4px;
    translate: 0 -200%;
    transition: translate var(--duration) var(--ease);
    z-index: 100;

    &:focus-visible { translate: 0; }
  }

  .site-header {
    border-block-end: 0.5px solid var(--color-border);
    padding-block: var(--space-m);

    .container {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: var(--space-m);
      flex-wrap: wrap;
    }
  }

  .site-name {
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-weight: 400;
    letter-spacing: 0.02em;
    color: var(--color-text);
    text-decoration: none;
  }

  .site-header nav {
    display: flex;
    gap: var(--space-m);
    flex-wrap: wrap;

    a {
      font-size: var(--step--1);
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--color-text-muted);
      text-decoration: none;
      transition: color var(--duration) var(--ease);

      &:hover { color: var(--color-text); }

      &[aria-current="page"] {
        color: var(--color-text);
        border-block-end: 0.5px solid currentColor;
      }
    }
  }

  .site-footer {
    border-block-start: 0.5px solid var(--color-border);
    padding-block: var(--space-m);

    .container {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: var(--space-s);
      font-size: var(--step--1);
      color: var(--color-text-muted);
      letter-spacing: 0.04em;
    }
  }

  hr {
    border: none;
    border-block-start: 0.5px solid var(--color-border);
    inline-size: var(--container);
    margin-inline: auto;
  }
}@layer components{.eyebrow,
  .section-label {
    font-size: var(--step--1);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-block-end: var(--space-m);
  }

  .section-link {
    display: inline-block;
    margin-block-start: var(--space-m);
    font-size: var(--step--1);
    letter-spacing: 0.1em;
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color var(--duration) var(--ease);

    &:hover { color: var(--color-text); }
  }

  
  .cta-primary {
    font-size: var(--step--1);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text);
    text-decoration: none;
    border-block-end: 0.5px solid var(--color-accent);
    padding-block-end: 2px;
    transition: opacity var(--duration) var(--ease);

    &:hover { opacity: 0.55; }
  }

  .cta-ghost {
    font-size: var(--step--1);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color var(--duration) var(--ease);

    &:hover { color: var(--color-text); }
  }

  
  .hero {
    padding-block: var(--space-2xl) var(--space-xl);

    h1 {
      font-family: var(--font-display);
      font-size: var(--step-5);
      font-weight: 300;
      line-height: 1;
      letter-spacing: -0.02em;
      margin-block: var(--space-s) var(--space-l);
    }
  }

  .hero-body {
    max-inline-size: 52ch;
    font-size: var(--step-0);
    line-height: 1.85;
    color: var(--color-text-mid);
    margin-block-end: var(--space-l);
  }

  .hero-cta {
    display: flex;
    gap: var(--space-l);
    align-items: center;
    flex-wrap: wrap;
  }

  
  .home-section {
    padding-block: var(--space-xl);
  }

  
  .works-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background-color: var(--color-border);
    border: 0.5px solid var(--color-border);

    @media (max-width: 560px) {
      grid-template-columns: 1fr;
    }
  }

  .work-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-m);
    background-color: var(--color-bg);
    color: inherit;
    text-decoration: none;
    transition: background-color var(--duration) var(--ease);

    &:hover { background-color: var(--color-surface); }
  }

  .work-status {
    font-size: var(--step--1);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-muted);
  }

  .work-title {
    font-family: var(--font-display);
    font-size: var(--step-2);
    font-weight: 400;
    line-height: 1.2;
    color: var(--color-text);
  }

  .work-detail {
    font-size: var(--step--1);
    color: var(--color-text-muted);
  }

  .works-note {
    max-inline-size: 58ch;
    margin-block-start: var(--space-m);
    font-size: var(--step--1);
    color: var(--color-text-mid);
    line-height: 1.8;
  }

  
  .journal-list {
    list-style: none;
    display: flex;
    flex-direction: column;
  }

  .journal-item {
    display: grid;
    grid-template-columns: 7ch 1fr auto;
    align-items: baseline;
    gap: var(--space-m);
    padding-block: var(--space-s);
    border-block-end: 0.5px solid var(--color-border);
    color: inherit;
    text-decoration: none;
    transition: opacity var(--duration) var(--ease);

    &:hover { opacity: 0.6; }

    time {
      font-size: var(--step--1);
      color: var(--color-text-muted);
      letter-spacing: 0.04em;
    }
  }

  .ji-title {
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-weight: 400;
  }

  .ji-tag {
    font-size: var(--step--1);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-muted);
  }

  
  .contact-strip {
    padding-block: var(--space-xl);
    border-block-start: 0.5px solid var(--color-border);

    .container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: var(--space-l);
      flex-wrap: wrap;
    }

    p {
      font-family: var(--font-display);
      font-size: var(--step-3);
      font-weight: 300;
      font-style: italic;
      color: var(--color-text-mid);
    }
  }

  
  .single {
    padding-block: var(--space-xl);

    .single-header {
      padding-block-end: var(--space-l);
      border-block-end: 0.5px solid var(--color-border);
      margin-block-end: var(--space-l);

      h1 {
        font-family: var(--font-display);
        font-size: var(--step-4);
        font-weight: 300;
        line-height: 1.1;
        letter-spacing: -0.01em;
        margin-block: var(--space-xs) var(--space-s);
      }
    }
  }

  .single-detail {
    font-size: var(--step--1);
    color: var(--color-text-muted);
  }

  .single-date {
    display: block;
    font-size: var(--step--1);
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    margin-block-start: var(--space-xs);
  }

  
  .list-page {
    padding-block: var(--space-xl);

    .list-header {
      padding-block-end: var(--space-l);
      border-block-end: 0.5px solid var(--color-border);
      margin-block-end: var(--space-l);

      h1 {
        font-family: var(--font-display);
        font-size: var(--step-4);
        font-weight: 300;
        letter-spacing: -0.01em;
        margin-block-start: var(--space-xs);
      }
    }
  }

  
  .prose {
    max-inline-size: var(--measure);
    font-size: var(--step-0);
    line-height: 1.9;
    color: var(--color-text-mid);

    & > * + * { margin-block-start: var(--space-s); }

    h2 {
      font-family: var(--font-display);
      font-size: var(--step-2);
      font-weight: 400;
      color: var(--color-text);
      margin-block-start: var(--space-xl);
    }

    h3 {
      font-size: var(--step-1);
      font-weight: 500;
      color: var(--color-text);
      margin-block-start: var(--space-l);
    }

    ul, ol {
      padding-inline-start: var(--space-m);

      li + li { margin-block-start: var(--space-xs); }
    }

    a {
      color: var(--color-text);
      text-underline-offset: 3px;
      transition: opacity var(--duration) var(--ease);

      &:hover { opacity: 0.6; }
    }

    strong {
      font-weight: 500;
      color: var(--color-text);
    }

    hr {
      inline-size: 100%;
      margin-block: var(--space-l);
    }
  }

  
  .contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
    max-inline-size: 52ch;
    margin-block: var(--space-l);
  }

  .form-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);

    label {
      font-size: var(--step--1);
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--color-text-muted);
    }

    input,
    textarea {
      font-family: var(--font-body);
      font-size: var(--step-0);
      font-weight: 400;
      color: var(--color-text);
      background-color: var(--color-bg);
      border: 0.5px solid var(--color-border-mid);
      border-radius: 2px;
      padding: var(--space-s);
      inline-size: 100%;
      transition: border-color var(--duration) var(--ease);
      appearance: none;

      &:focus-visible {
        outline: none;
        border-color: var(--color-accent);
      }
    }

    textarea {
      resize: vertical;
      min-block-size: 10rem;
      line-height: 1.7;
    }
  }

  .contact-form button {
    align-self: flex-start;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
  }

}@layer utilities{.visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    block-size: 1px;
    inline-size: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
  }
}@layer components{.bio-photo {
    float: right;
    margin-inline-start: var(--space-l);
    margin-block-end: var(--space-m);
    max-inline-size: min(260px, 100%);
    border-radius: 2px;

    @media (max-width: 560px) {
      float: none;
      margin-inline-start: 0;
      margin-block-end: var(--space-l);
      max-inline-size: 100%;
    }
  }
}