Master CSS 2.0

@font-face {  font-family: 'Geist';  font-style: normal;  font-weight: 100 900;  font-display: swap;  src: url('/fonts/GeistVariable.woff2') format('woff2');}@theme {  --color-brand: light-dark(#665442, #d7c2a6);  --spacing-story: 1.5rem;}@theme {  --font-sans: 'Geist';}@layer components {  .journal { font-family: var(--font-family-sans); font-size: 13px; line-height: 1.6; font-weight: 350; }  .journal :where(h2, h3, p) { margin: 0; }  .journal a { color: inherit; text-decoration: none; }  .journal a:hover { text-decoration: underline; text-underline-offset: .2em; }  .journal :focus-visible { outline: 2px solid var(--color-brand); outline-offset: 4px; }  .journal-head { padding: 20px 24px; border-bottom: 1px solid var(--color-line-subtle); }  .journal-brand { font-size: 25px; line-height: 1; font-weight: 500; letter-spacing: -.06em; }  .journal-edition { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }  .journal-nav { display: flex; flex-wrap: wrap; gap: 12px 20px; font-size: 12px; }  .journal-main { min-width: 0; }  .journal-photo { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; outline: 1px solid light-dark(rgb(0 0 0 / .08), rgb(255 255 255 / .08)); outline-offset: -1px; }  .journal-kicker { font-size: 11px; line-height: 1.5; letter-spacing: .09em; text-transform: uppercase; }  .journal-title { max-width: 12ch; font-size: clamp(28px, 4.8vw, 36px); line-height: 1.08; font-weight: 400; letter-spacing: -.04em; }  .journal-deck { max-width: 44ch; font-size: 14px; line-height: 1.7; }  .journal-meta { font-size: 11px; line-height: 1.5; }  .journal-read { border-top: 1px solid var(--color-line-subtle); padding-top: 4px; }  .journal-read > summary { width: fit-content; padding: 10px 0; cursor: pointer; font-size: 13px; }  .journal-copy { display: grid; gap: 12px; padding-top: 6px; font-size: 14px; line-height: 1.8; }  .journal-aside { min-width: 0; border-top: 1px solid var(--color-line-subtle); }  .journal-aside-title { font-size: 23px; line-height: 1.2; letter-spacing: -.03em; font-weight: 400; }  .journal-story { border-top: 1px solid var(--color-line-subtle); }  .journal-story > summary { display: flex; align-items: start; justify-content: space-between; gap: 12px; padding-block: 20px; cursor: pointer; list-style: none; }  .journal-story > summary::-webkit-details-marker { display: none; }  .journal-story-title { margin-top: 7px; font-size: 16px; line-height: 1.4; font-weight: 400; letter-spacing: -.015em; }  .journal-story-image { display: block; width: 64px; height: 76px; object-fit: cover; border-radius: 3px; }  .journal-story-arrow { font-size: 20px; line-height: 1; }  .journal-story[open] .journal-story-arrow { transform: rotate(45deg); }  .journal-story > p { padding-bottom: 20px; font-size: 13px; line-height: 1.8; }  .journal-about { display: grid; gap: 8px; padding: 20px 24px; border-top: 1px solid var(--color-line-subtle); font-size: 12px; line-height: 1.7; }  .journal-about p { max-width: 48ch; }  @media (width >= 38rem) {    .journal-grid { display: grid; grid-template-columns: 1.6fr 1fr; }    .journal-aside { border-top: 0; border-left: 1px solid var(--color-line-subtle); }    .journal-about { grid-template-columns: 1fr auto; align-items: center; gap: 24px; }  }  @media (width < 24rem) {    .journal-head { padding: 20px; }    .journal-edition-label { display: none; }    .journal-nav { gap: 16px; }  }}

<article class="journal r-lg overflow-hidden bg-surface-raised fg-text-body shadow-sm" aria-label="Fieldwork journal">  <header class="journal-head grid gap-md">    <div class="flex flex-wrap items-center justify-between gap-md">      <span class="journal-brand fg-text-strong">Fieldwork<span class="fg-brand">.</span></span>      <span class="journal-edition fg-text-muted"><span class="journal-edition-label">An independent journal · </span>Issue 04</span>    </div>    <nav class="journal-nav fg-text-muted" aria-label="Journal sections">      <a href="#fieldwork-lead">Featured story</a>      <a href="#fieldwork-notes">Field notes</a>      <a href="#fieldwork-about">About</a>    </nav>  </header>  <div class="journal-grid">    <section id="fieldwork-lead" class="journal-main grid gap-md p-story" aria-labelledby="fieldwork-title">      <img class="journal-photo" src="/images/blog/v2/white-oak-room.webp" alt="White oak chairs and a dining table beside sheer linen curtains" width="1672" height="941" />      <p class="journal-kicker fg-brand">Spaces / Quiet interiors</p>      <h2 id="fieldwork-title" class="journal-title fg-text-strong">The everyday, considered.</h2>      <p class="journal-deck fg-text-muted">On slowing down, looking closer, and finding a little more in the spaces we inhabit.</p>      <p class="journal-meta fg-text-muted">Field note 01 — At home</p>      <details class="journal-read">        <summary class="fg-brand">Read the field note</summary>        <div class="journal-copy">          <p>Morning light moves across the oak table. A cup, a book, a chair pulled close. The room asks for very little, and gives something back: space to read, to think, to begin again.</p>          <p>Its character lives in small decisions. The soft edge of a tabletop. Linen that lets the light through. A place for the objects we reach for every day. Nothing needs to compete for attention.</p>          <p>A good home makes room for the everyday.</p>        </div>      </details>    </section>    <aside id="fieldwork-notes" class="journal-aside p-story" aria-labelledby="fieldwork-notes-title">      <div class="grid gap-sm pb-lg">        <p class="journal-kicker fg-brand">The art of noticing</p>        <h2 id="fieldwork-notes-title" class="journal-aside-title fg-text-strong">Quiet spaces.<br>Everyday rituals.</h2>        <p class="journal-deck fg-text-muted">Thoughtful spaces and useful objects. A little less, made with care.</p>      </div>      <details class="journal-story">        <summary>          <span><span class="journal-meta fg-text-muted">02 / Objects</span><span class="journal-story-title block fg-text-strong">Room to make something.</span></span>          <img class="journal-story-image" src="/images/blog/v2/ceramic-study.webp" alt="A ceramic pitcher and bowl on a white oak table" width="1536" height="1024" />        </summary>        <p>Clay keeps a record of the hand. A slightly uneven rim, a glaze that settles into the surface, a handle shaped to be held. Useful objects can make a daily ritual feel considered.</p>      </details>      <details class="journal-story">        <summary>          <span><span class="journal-meta fg-text-muted">03 / In practice</span><span class="journal-story-title block fg-text-strong">The things we choose to keep.</span></span>          <span class="journal-story-arrow fg-text-muted" aria-hidden="true">+</span>        </summary>        <p>A room takes shape through what stays. Start with the pieces you use, give each one a place, and leave a little space between them. The goal is a home that works for the life inside it.</p>      </details>    </aside>  </div>  <footer id="fieldwork-about" class="journal-about fg-text-muted">    <p>Fieldwork is an illustrative journal about thoughtful spaces and everyday rituals, created for the Master CSS 2.0 release.</p>    <span>Good spaces. Considered living.</span>  </footer></article>