/* Local design study. Original content, headings and behaviour stay in index.html. */
:root {
  --bg: #f5f2ec;
  --ink: #1d1e1a;
  --muted: #6b6b62;
  --rule: #d6d3ca;
  --accent: #ce4b2e;
  --max: 1680px;
  --pad: clamp(1.25rem, 3.5vw, 4rem);
}

html { scroll-padding-top: 110px; }
body { display: flex; flex-direction: column; }
.nav { order: 1; }
.hero-copy { order: 2; }
.hero { order: 3; }
.seo-strip { order: 4; }
#work { order: 5; }
#about { order: 6; }
.cta { order: 7; }
#contact { order: 8; }
#services { order: 9; }
.footer { order: 10; }

/* A compact glass navigation sits above a typographic masthead. */
.nav {
  top: 12px;
  width: calc(100% - var(--pad) * 2);
  max-width: calc(var(--max) - var(--pad) * 2);
  margin: 12px auto 0;
  border: 1px solid rgba(255, 255, 255, .65);
  border-radius: 5px;
  box-shadow: 0 2px 14px rgba(29, 30, 26, .045);
}
.nav-inner { padding: .9rem 1.25rem; }
.brand { font-size: clamp(1.35rem, 1.65vw, 1.7rem); }
.nav a { text-shadow: none; }

/* A quiet, device-like language control with equal, stable segments. */
.lang-toggle {
  width: 88px;
  min-width: 88px;
  flex: 0 0 88px;
  height: 36px;
  padding: 4px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid rgba(29, 30, 26, .06);
  border-radius: 999px;
  background: rgba(29, 30, 26, .065);
  color: var(--muted);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .025em;
  box-shadow: inset 0 1px 2px rgba(29, 30, 26, .035);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: background 180ms var(--ease);
}
.lang-toggle:hover { background: rgba(29, 30, 26, .085); }
.lang-thumb {
  inset: 4px auto 4px 4px;
  width: calc(50% - 4px);
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 1px 3px rgba(29, 30, 26, .13), 0 0 0 .5px rgba(29, 30, 26, .025);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transform: translateX(0);
  transition: transform 260ms cubic-bezier(.22, .75, .25, 1);
}
.lang-toggle .lang-option {
  grid-row: 1;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}
.lang-toggle:has(.lang-option:focus-visible) { outline: 2px solid rgba(29, 30, 26, .4); outline-offset: 3px; }
.lang-toggle .lang-option:focus-visible { outline: none; }
.lang-option[data-language="en"] { grid-column: 1; }
.lang-option[data-language="el"] { grid-column: 2; }
body[data-lang] .lang-toggle .lang-option { color: var(--muted); text-shadow: none; transform: none; }
body[data-lang] .lang-toggle .lang-option:hover,
body[data-lang] .lang-toggle .lang-option[aria-pressed="true"] { color: var(--ink); }
body[data-lang="el"] .lang-thumb { transform: translateX(100%); }

.hero-copy {
  padding-block: clamp(1.5rem, 2.8vw, 3rem) 1.5rem;
  border: 0;
}
.hero-copy-grid {
  container-type: inline-size;
  gap: clamp(.85rem, 1.3vw, 1.35rem);
  justify-items: stretch;
}
.name-masthead {
  position: relative;
  isolation: isolate;
  min-width: 0;
  font-family: var(--font);
  font-weight: 600;
  font-size: clamp(3rem, 12vw, 13.5rem);
  font-size: clamp(3rem, 13.8cqw, 13.5rem);
  line-height: .95;
  letter-spacing: -.073em;
}
/* A warm studio light passes behind the name, without adding a larger canvas. */
.name-masthead::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  inset: -.12em auto -.1em 0;
  width: 45%;
  background: radial-gradient(ellipse at center, rgba(244, 135, 66, .42), rgba(255, 186, 108, .18) 42%, transparent 72%);
  filter: blur(22px);
  opacity: .65;
  animation: name-backlight 13s ease-in-out infinite alternate paused;
}
.name-masthead.is-illuminated::before { animation-play-state: running; }
@keyframes name-backlight {
  0% { transform: translateX(0) scale(.94); opacity: .55; }
  45% { opacity: .8; }
  100% { transform: translateX(115%) scale(1.1); opacity: .65; }
}
.hero-copy h1.visually-hidden {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
  font: inherit;
  letter-spacing: inherit;
}
.name-glitch {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
  color: var(--ink);
  opacity: 0;
}
.name-masthead.is-glitching h1 { opacity: 0; }
.name-masthead.is-glitching .name-glitch { opacity: 1; }
.name-glyph {
  position: absolute;
  display: block;
  font: inherit;
}
.name-letter {
  position: relative;
  display: block;
  white-space: pre;
  letter-spacing: 0;
  transform: scaleX(var(--glyph-fit, 1));
  transform-origin: left top;
}
.name-letter::after {
  content: attr(data-echo);
  position: absolute;
  inset: 0;
  clip-path: inset(44% 0 38% 0);
  transform: translateX(.025em);
  opacity: 0;
}
.name-glyph.is-swapped .name-letter {
  color: #a94a2e;
  text-shadow: 0 0 .12em rgba(238, 130, 68, .28);
  animation: letter-light 780ms linear;
}
.name-glyph.is-swapped .name-letter::after { animation: letter-slice 780ms steps(1, end); }
@keyframes letter-light {
  0%, 28%, 53%, 72%, 100% { filter: opacity(1); }
  9%, 18% { filter: opacity(.4); }
  59%, 65% { filter: opacity(.75); }
}
@keyframes letter-slice {
  0%, 28%, 53%, 72%, 100% { opacity: 0; }
  9%, 18%, 59%, 65% { opacity: .3; }
}
.hero-sub {
  max-width: 78ch;
  justify-self: start;
  font-size: clamp(.95rem, 1.1vw, 1.1rem);
  line-height: 1.55;
  text-align: left;
  color: var(--ink);
  margin: 0;
}
.hero {
  width: calc(100% - var(--pad) * 2);
  max-width: calc(var(--max) - var(--pad) * 2);
  align-self: center;
  flex-shrink: 0;
  background: var(--bg);
}
#top { scroll-margin-top: max(100vh, 40rem); }
.hero-video { background: var(--bg); }
.hero-video-media { object-fit: contain; }
.seo-strip { padding-block: 2rem 0; border: 0; }
.seo-strip-grid { gap: 2rem; }
.seo-strip-grid > a { border-color: var(--rule); padding-top: 1rem; }
.seo-strip-grid > a strong {
  font-family: var(--font);
  font-style: normal;
  font-size: .98rem;
  font-weight: 550;
  letter-spacing: -.025em;
}
.seo-strip-grid > a span { font-size: .83rem; line-height: 1.55; }

/* Projects read as photographic spreads, with a persistent short introduction. */
#work { padding-top: 4.5rem; padding-bottom: 0; }
.series {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.85fr);
  align-items: start;
  column-gap: clamp(2rem, 4vw, 4.5rem);
  padding-block: 3rem 5rem;
  border-top: 1px solid var(--rule);
}
.series + .series { padding-top: 3rem; }
.series:first-of-type { padding-top: 3rem; }
.series-head {
  position: sticky;
  top: 108px;
  display: block;
  margin: 0;
}
.series-top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  padding: 0;
  border: 0;
}
.series-num {
  font-family: var(--font);
  font-style: normal;
  font-size: .73rem;
  font-weight: 550;
  letter-spacing: .04em;
  color: var(--accent);
}
.series-meta {
  font-size: .61rem;
  line-height: 1.5;
  letter-spacing: .1em;
  max-width: 32ch;
  text-align: left;
}
.series-title {
  max-width: 13ch;
  font-family: var(--font);
  font-size: clamp(1.75rem, 2.65vw, 2.8rem);
  font-style: normal;
  font-weight: 550;
  letter-spacing: -.055em;
  line-height: 1.05;
  padding-top: 1.5rem;
}
.series-body {
  max-width: 36ch;
  padding-top: 1.5rem;
  font-size: .9rem;
  line-height: 1.65;
}
.series-body em { font-size: 1.08em; }
.series-service-link { margin-top: 1rem; }
.series-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(.75rem, 1.3vw, 1.4rem);
  column-count: auto;
  align-items: start;
}
.series-grid > .work-item { margin: 0; min-width: 0; }
.series-grid > .work-item:first-child { grid-column: 1 / -1; }
.series-grid > .work-item:last-child:nth-child(even) { grid-column: 1 / -1; }
.series-grid .work-item img,
.series-grid .work-item video { height: auto; object-fit: contain; }
.series-grid--sbd,
#nymfes .series-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.series-grid--sbd > .work-item,
#nymfes .series-grid > .work-item {
  grid-column: auto !important;
  aspect-ratio: 1;
}
.series-grid--sbd .work-item img,
.series-grid--sbd .work-item video,
#nymfes .series-grid .work-item img { width: 100%; height: 100%; object-fit: cover; }
#baransu .series-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#baransu .series-grid > .work-item { grid-column: auto; }
#tsatalakia .series-grid > .work-item,
#yume .series-grid > .work-item { grid-column: auto; }
#tsatalakia .series-grid { align-items: center; }
#tsatalakia video { aspect-ratio: auto 3 / 2; }
.work-item { background: #e9e5dd; }
.work-item:hover img,
.work-item:hover video { transform: scale(1.008); }

@media (min-width: 1200px) {
  .series:nth-child(even) { grid-template-columns: minmax(0, 2.85fr) minmax(0, 1fr); }
  .series:nth-child(even) .series-head { grid-column: 2; grid-row: 1; }
  .series:nth-child(even) .series-grid { grid-column: 1; grid-row: 1; }
}

/* An editorial portrait and a precise studio dossier. */
#about { padding-block: 5rem 6rem; border-top: 1px solid var(--rule); }
.about-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(3rem, 7vw, 8rem); }
.about-portrait-wrap { max-width: none; }
.about-portrait { border-radius: 0; }
.about-portrait img { filter: none; }
.portrait-caption { margin-top: 1rem; font-size: .65rem; }
.about-quote { font-size: clamp(2rem, 3.6vw, 4.25rem); line-height: 1.03; letter-spacing: -.025em; }
.about-quote em { color: var(--accent); }
.about-dossier { margin-top: 2rem; }
.dossier-row { grid-template-columns: 95px minmax(0, 1fr); font-size: .85rem; }
.dossier-row dt { font-size: .67rem; }
.about-copy { font-size: .94rem; margin-top: 2rem; }
.about-copy p { font-size: .94rem; }
.about-details { gap: 2rem; margin-top: 2rem; }
.detail h4 { font-family: var(--font); font-style: normal; font-size: .78rem; font-weight: 550; }
.detail-list { font-size: .85rem; }
.detail-list li { font-size: .85rem; }

/* The contact invitation becomes a full, quiet closing statement. */
.cta { background: var(--ink); padding-block: clamp(3.5rem, 7vw, 7rem); border: 0; }
.cta-kicker { color: #babbb1; }
.cta-title {
  font-family: var(--font);
  font-style: normal;
  font-weight: 500;
  font-size: clamp(3.1rem, 7.7vw, 8.6rem);
  max-width: 17ch;
  line-height: .99;
  letter-spacing: -.065em;
  color: var(--bg);
}
.cta-title .soft {
  background: none;
  color: #e17b5b;
  -webkit-text-fill-color: #e17b5b;
  padding: 0;
}
.cta-body { color: #c7c8be; max-width: 60ch; }
.cta-body em { color: var(--bg); }
.cta .cta-button { background: var(--bg); color: var(--ink); border-color: var(--bg); padding: 1.15rem 1.6rem; }
.cta .cta-call { background: transparent; color: var(--bg); }
.cta .cta-button:hover { background: #e17b5b; border-color: #e17b5b; color: var(--ink); }
.cta .cta-call:hover { background: var(--bg); border-color: var(--bg); }
#contact { padding-block: 4.5rem; }
.contact-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; }
.contact-lead { font-family: var(--font); font-style: normal; font-weight: 500; font-size: clamp(2rem, 3.4vw, 3.75rem); letter-spacing: -.055em; }
.contact-list { min-width: 0; }
.contact-list a { overflow-wrap: anywhere; }
.contact-row { grid-template-columns: 110px minmax(0, 1fr); }
.contact-row .contact-email {
  display: grid;
  grid-template-columns: minmax(0, max-content) auto;
  align-items: center;
  column-gap: .55rem;
  min-width: 0;
  cursor: auto;
}
.contact-email-link {
  min-width: 0;
  justify-self: start;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  user-select: text;
  -webkit-user-select: text;
  cursor: pointer;
}
.email-copy-button {
  display: inline-flex;
  justify-self: start;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(29, 30, 26, .09);
  border-radius: 50%;
  background: rgba(29, 30, 26, .025);
  color: var(--muted);
  cursor: pointer;
  transition: background 160ms, color 160ms;
}
.email-copy-button[hidden] { display: none; }
.email-copy-button:hover { color: var(--ink); background: rgba(29, 30, 26, .075); }
.email-copy-button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.email-copy-button svg { width: 16px; height: 16px; }
.email-copy-check { display: none; }
.email-copy-button.is-copied { color: var(--ink); }
.email-copy-button.is-copied .email-copy-icon { display: none; }
.email-copy-button.is-copied .email-copy-check { display: block; }
.email-copy-status {
  grid-column: 1 / -1;
  min-height: 1.4em;
  font-size: .7rem;
  line-height: 1.4;
  color: var(--muted);
}
.cursor-action-icon { display: none; }
@media (hover: hover) and (pointer: fine) {
  .lang-toggle,
  .lang-toggle .lang-option { cursor: none; }
  .contact-row .contact-email,
  .contact-list a,
  .contact-list button { cursor: none; }
  .email-copy-button:hover svg { visibility: hidden; }
  .cursor.action {
    width: 24px;
    height: 24px;
    color: var(--ink);
    mix-blend-mode: normal;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    overflow: visible;
    transition: none;
  }
  .cursor.action .cursor-label { display: none; }
  .cursor.action .cursor-action-icon { display: flex; pointer-events: none; }
  .cursor-action-icon svg { display: none; width: 18px; height: 18px; }
  .cursor.action[data-action="external"] .cursor-action-external,
  .cursor.action[data-action="copy"] .cursor-action-copy { display: block; }
  body:has(.email-copy-button.is-copied:hover) .cursor.action[data-action="copy"] .cursor-action-copy { display: none; }
  body:has(.email-copy-button.is-copied:hover) .cursor.action[data-action="copy"] .cursor-action-check { display: block; }
}
#services { padding-top: clamp(1.5rem, 2.5vw, 2.5rem); padding-bottom: 4.5rem; }
.notes-head { padding-bottom: 1rem; margin-bottom: 2rem; }
.notes-label { font-family: var(--font); font-style: normal; font-weight: 550; font-size: 1.2rem; letter-spacing: -.035em; }
.notes-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 4rem; }
.note { grid-template-columns: 1fr; gap: .5rem; padding-bottom: 1.5rem; }
.note:last-child { border-bottom: 1px solid var(--rule); padding-bottom: 1.5rem; }
.note-date { font-size: .6rem; }
.note-date em { display: inline; margin-left: .5rem; font-size: .95rem; }
.note-body { font-size: .85rem; line-height: 1.6; }
.note-body strong { font-family: var(--font); font-style: normal; font-weight: 550; font-size: 1.1rem; letter-spacing: -.03em; }
.footer { padding-block: 2rem; font-size: .7rem; }
.footer-services { gap: .65rem 1.35rem; padding-top: 1.5rem; }

@media (max-width: 1199px) {
  .series { grid-template-columns: 1fr; gap: 2rem; }
  .series-head { position: static; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 2rem; row-gap: 0; }
  .series-top { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; gap: 1rem; }
  .series-meta { max-width: none; text-align: right; }
  .series-title { max-width: 18ch; font-size: clamp(2rem, 4vw, 3rem); }
  .series-body { max-width: 48ch; }
}

@media (max-width: 699px) {
  html { scroll-padding-top: 95px; }
  .nav { top: 8px; margin-top: 8px; width: calc(100% - 1.5rem); max-width: none; }
  .nav-inner { padding: .75rem .85rem; gap: .5rem; }
  .nav-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: .15rem; }
  .brand { grid-column: 1; grid-row: 1; }
  .lang-toggle { grid-column: 2; grid-row: 1; }
  .nav-links { grid-column: 1 / -1; grid-row: 2; gap: 1.75rem; }
  .nav-links a { font-size: .78rem; padding-block: .35rem; }
  .brand { font-size: 1.3rem; }
  .hero-copy { padding-block: 1.75rem 1.25rem; }
  .hero-copy-grid { gap: 1rem; }
  .name-masthead {
    font-size: clamp(3rem, 24vw, 8rem);
    font-size: clamp(3rem, 26cqw, 8rem);
    letter-spacing: -.065em;
    line-height: .97;
  }
  .name-masthead::before { width: 68%; filter: blur(16px); animation-name: name-backlight-mobile; }
  .hero-copy h1.visually-hidden { max-width: 11ch; }
  .hero-sub { justify-self: start; max-width: none; font-size: .92rem; }
  .hero { width: calc(100% - var(--pad) * 2); }
  .hero-video-control {
    width: max-content;
    min-width: 96px;
    height: 40px;
    padding-inline: .75rem;
    gap: .5rem;
    justify-content: center;
    white-space: nowrap;
    bottom: .7rem;
    right: .7rem;
  }
  .hero-video-label { flex: 0 0 auto; }
  .seo-strip { padding-top: 1.5rem; }
  .seo-strip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
  .seo-strip-grid > a strong { font-size: .84rem; }
  .seo-strip-grid > a span { font-size: .75rem; line-height: 1.5; }
  #work { padding-top: 2.75rem; }
  .series, .series + .series, .series:first-of-type { padding-block: 1.75rem 3rem; gap: 1.5rem; }
  .series-head { grid-template-columns: 1fr; }
  .series-top { align-items: baseline; }
  .series-num { flex-shrink: 0; font-size: .64rem; }
  .series-meta { font-size: .52rem; max-width: 28ch; }
  .series-title { max-width: 20ch; font-size: 2rem; padding-top: 1.25rem; }
  .series-body { font-size: .84rem; max-width: none; padding-top: 1rem; }
  .series-grid { gap: .6rem; }
  .series-grid--sbd { grid-template-columns: 1fr; gap: .75rem; }
  #nymfes .series-grid { grid-template-columns: 1fr; gap: .75rem; }
  #baransu .series-grid { grid-template-columns: 1fr; gap: .75rem; }
  #about { padding-block: 3rem; }
  .about-grid { grid-template-columns: 1fr; gap: 2rem; }
  .about-portrait-wrap { max-width: 420px; }
  .about-quote { font-size: 2.5rem; }
  .about-details { gap: 1.25rem; }
  .cta-title { font-size: clamp(3rem, 12vw, 5rem); }
  .cta-kicker { font-size: .6rem; letter-spacing: .14em; }
  .cta-body { font-size: .9rem; }
  .cta-actions { align-items: stretch; gap: .7rem; }
  .cta .cta-button { flex: 1 0 100%; justify-content: center; font-size: .72rem; }
  #contact { padding-block: 3rem; }
  .contact-grid { grid-template-columns: 1fr; gap: 2rem; }
  .contact-lead { font-size: 2.25rem; }
  .contact-list > div { grid-template-columns: 65px minmax(0, 1fr); }
  .email-copy-button { width: 44px; height: 44px; }
  .notes-list { grid-template-columns: 1fr; gap: 1.5rem; }
  .notes-head { gap: .75rem; }
  .notes-count { font-size: .58rem; }
  .footer-services { gap: .75rem 1rem; }
}

@keyframes name-backlight-mobile {
  0% { transform: translateX(0) scale(.95); opacity: .5; }
  100% { transform: translateX(35%) scale(1.1); opacity: .75; }
}

@media (prefers-reduced-motion: reduce) {
  .work-item img, .work-item video { transition: none; }
  .lang-thumb, .lang-option { transition: none; }
  .name-glyph.is-swapped .name-letter,
  .name-glyph.is-swapped .name-letter::after { animation: none; }
  .name-masthead.is-glitching h1 { opacity: 1; }
  .name-masthead.is-glitching .name-glitch { opacity: 0; }
  .name-masthead::before { animation: none; opacity: .45; }
}