/* Hallmark · shape: Manifesto · genre: editorial · theme: Studio (deal 1/3, seed mehmet-isel-tasla-foto-4230·f4763add·2026-11-14·r0) · job: hire · draw: 6c987b
 * hero: Ledge · nav: slab · footer: index columns · imagery: none · signature: Mehmet set as a full-width printed signature
 * axes: light/roman-serif/warm · posture: restrained · contrast: checked · fold: checked at 1280 · v2.0.0 */
/* Hallmark · pre-emit critique: P3 H5 E4 S3 R5 V4 · weakest: S, only Mehmet is known; made the name the visual and omitted invented projects */
@import url("./tokens.css");
@import url("./base.css");

.skip { position: absolute; z-index: var(--z-toast); top: var(--space-md); left: var(--space-md); padding: var(--space-sm) var(--space-lg); background: var(--color-ink); color: var(--color-paper); transform: translateY(-200%); }
.skip:focus-visible { transform: none; }
.site-header { display: flex; align-items: center; justify-content: space-between; min-height: 104px; gap: var(--space-lg); }
.wordmark { font-family: var(--font-display); font-size: 27px; letter-spacing: -0.04em; text-decoration: none; }
nav { display: flex; gap: var(--space-xl); }
nav a { font-size: var(--text-sm); min-height: 48px; display: inline-flex; align-items: center; text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-color: var(--color-focus); }
a:active { color: var(--color-ink-2); }
.hero { padding-top: var(--space-2xl); padding-bottom: var(--space-lg); }
.hero-intro { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xl); }
.hero-intro p { font-size: var(--text-lead); max-width: 29ch; }
.primary { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: var(--space-sm) var(--space-lg); border: 1px solid var(--color-ink); border-radius: var(--radius-card); background: var(--color-accent); color: var(--color-accent-ink); text-decoration: none; font-size: var(--text-sm); font-weight: 500; white-space: nowrap; }
.primary:hover { background: var(--color-paper-3); text-decoration: none; }
.primary:active { background: var(--color-paper-2); }
.name-sheet { position: relative; margin-top: var(--space-2xl); padding-block: var(--space-xl); border-top: 1px solid var(--color-rule); border-bottom: 1px solid var(--color-rule); }
.name-sheet::before, .name-sheet::after { content: ""; position: absolute; width: 14px; height: 14px; border-top: 1px solid var(--color-focus); top: -7px; pointer-events: none; }
.name-sheet::before { left: 0; border-left: 1px solid var(--color-focus); }
.name-sheet::after { right: 0; border-right: 1px solid var(--color-focus); }
h1 { font-size: clamp(5.5rem, 18.8vw, 17rem); line-height: 1.05; letter-spacing: -0.065em; max-width: none; }
.hero-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); padding-top: var(--space-lg); color: var(--color-muted); font-size: var(--text-sm); }
.about { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--gap-columns); padding-block: var(--section-gap-l); }
.section-side { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-xl); }
.side-note { color: var(--color-muted); font-size: var(--text-sm); }
.about-copy { display: grid; gap: var(--space-lg); }
.statement { font-family: var(--font-display); font-size: clamp(2.3rem, 4.4vw, 4.2rem); line-height: 1.12; letter-spacing: var(--tracking-display); }
.about-copy > p:not(.statement) { max-width: 50ch; }
.draft-note { color: var(--color-muted); font-size: var(--text-sm); }
.notebook { background: var(--color-paper-2); padding-block: var(--section-gap-s); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: var(--space-xl); margin-bottom: var(--space-2xl); }
.section-heading > p { font-size: var(--text-sm); color: var(--color-muted); }
.entries { border-top: 1px solid var(--color-ink); }
details { border-bottom: 1px solid var(--color-rule); }
summary { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 24px; align-items: center; gap: var(--gap-columns); padding-block: var(--space-xl); cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary:hover { color: var(--color-ink-2); }
summary:active { background: var(--color-paper-3); }
.entry-title { font-family: var(--font-display); font-size: clamp(1.8rem, 2.5vw, 2.5rem); letter-spacing: var(--tracking-display); }
.entry-caption { color: var(--color-muted); font-size: var(--text-sm); }
.toggle { position: relative; width: 24px; height: 24px; }
.toggle::before, .toggle::after { content: ""; position: absolute; background: currentColor; }
.toggle::before { width: 18px; height: 1px; top: 12px; left: 3px; }
.toggle::after { width: 1px; height: 18px; top: 3px; left: 12px; }
details[open] .toggle::after { display: none; }
.entry-body { padding-bottom: var(--space-xl); padding-right: var(--space-2xl); }
.entry-body p { max-width: 65ch; color: var(--color-ink-2); }
.contact { padding-block: var(--section-gap-l); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap-columns); align-items: end; }
.contact h2 { font-size: clamp(3.5rem, 6.7vw, 6rem); }
.contact-copy { display: grid; justify-items: start; gap: var(--space-lg); }
.text-link { min-height: 48px; display: inline-flex; align-items: center; font-size: var(--text-sm); }
.site-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); padding-block: var(--space-xl); position: relative; }
.site-footer::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); border-top: 1px solid var(--color-rule); }
.site-footer > span { color: var(--color-muted); font-size: var(--text-sm); }
@media (max-width: 60rem) {
  .site-header { min-height: 88px; }
  nav { gap: var(--space-lg); }
  .hero { padding-top: var(--space-xl); }
  .about { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); }
  .section-side { flex-direction: row; align-items: end; }
  .about h2 br { display: none; }
  .contact { gap: var(--space-xl); }
}
@media (max-width: 40rem) {
  nav { gap: var(--space-md); }
  nav a { font-size: 13px; }
  .wordmark { font-size: 24px; }
  .hero-intro { align-items: start; flex-direction: column; gap: var(--space-lg); }
  .hero-intro p { max-width: 28ch; }
  .name-sheet { margin-top: var(--space-xl); padding-block: var(--space-xl); }
  h1 { font-size: 18.8vw; }
  .hero-foot { align-items: start; gap: var(--space-xl); font-size: 12px; }
  .section-side { display: block; }
  .side-note { display: block; margin-top: var(--space-md); }
  .statement { font-size: clamp(2.2rem, 8vw, 3.2rem); }
  .section-heading { display: block; margin-bottom: var(--space-xl); }
  .section-heading > p { margin-top: var(--space-md); }
  summary { grid-template-columns: minmax(0, 1fr) 24px; gap: var(--space-md); padding-block: var(--space-lg); }
  .entry-caption { grid-column: 1; grid-row: 2; }
  .toggle { grid-column: 2; grid-row: 1 / 3; }
  .entry-body { padding-right: 0; }
  .contact { grid-template-columns: minmax(0, 1fr); }
  .site-footer { flex-wrap: wrap; }
  .site-footer .wordmark { flex-basis: 100%; }
}
@media (max-width: 360px) {
  .site-header { gap: var(--space-sm); }
  .wordmark { font-size: 20px; }
  nav { gap: var(--space-sm); }
  nav a { font-size: 12px; }
}