.wordmark {
  display:inline-flex;
  gap:7px;
  align-items:center;
  min-block-size:48px;
  font-size:27px;
  font-weight:700;
  letter-spacing:-.07em;
  line-height:1;
}
.wordmark-square {
  inline-size:7px;
  block-size:7px;
  background:var(--vermilion);
  align-self:flex-start;
  margin-block-start:13px;
}
.navigation a {
  font-size:13px;
  min-block-size:44px;
  display:flex;
  align-items:center;
  position:relative;
}
.navigation a::after {
  content:'';
  position:absolute;
  inset-inline:0;
  inset-block-end:8px;
  block-size:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:0% 50%;
  transition:transform 180ms var(--ease);
}
.language-switch {
  display:flex;
  align-items:center;
  gap:15px;
  font-size:13px;
  min-block-size:44px;
  padding-inline:16px 0;
  border-inline-start:1px solid var(--rule);
}
.language-icon {
  font-size:18px;
}
.menu-toggle {
  display:none;
  min-block-size:44px;
  gap:16px;
  align-items:center;
  font-size:13px;
  padding-inline:4px;
}
.hero h1 {
  font-size:clamp(3rem,7.5vw,8rem);
  line-height:1.02;
  letter-spacing:-.065em;
}
.hero-line {
  display:block;
}
.expressive {
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  letter-spacing:-.035em;
}
.hero-description {
  font-size:17px;
  line-height:1.75;
  color:var(--muted);
  max-inline-size:42ch;
  margin-block:30px 26px;
}
.hero-actions {
  display:flex;
  gap:28px;
  align-items:center;
  flex-wrap:wrap;
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  padding:14px 20px;
  min-block-size:52px;
  background:var(--ink);
  color:var(--paper);
  font-size:13px;
  transition:background 180ms,transform 160ms var(--ease);
}
.text-link {
  font-size:13px;
}
.hero-portrait-frame {
  position:relative;
  padding:10px;
  border:1px solid var(--rule);
  background:var(--paper);
}
.hero-portrait-frame::after {
  content:'';
  position:absolute;
  inset-inline-end:-3px;
  inset-block-end:32px;
  inline-size:5px;
  block-size:64px;
  background:var(--vermilion);
}
.hero-portrait {
  inline-size:100%;
  aspect-ratio:4 / 5;
  object-fit:cover;
  object-position:center;
}
.hero-art figcaption {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding-block:16px 0;
}
.portrait-name { font-size:20px; font-weight:500; }
.portrait-signature { font-size:30px; line-height:1; color:var(--accent); }
.hero-art figcaption p {
  font-size:12px;
  color:var(--muted);
  margin-block-start:2px;
}
.scroll-cue {
  display:flex;
  gap:20px;
  align-items:center;
  font-size:12px;
  min-block-size:44px;
}
.hero-bottom .meta {
  font-size:12px;
}
.project-visual {
  min-inline-size:0;
}
.project-window {
  overflow:hidden;
  border:1px solid var(--rule);
  border-radius:8px;
  background:#f4f3ee;
  box-shadow:0 12px 28px -20px #17171750;
}
.project-browser {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border-block-end:1px solid var(--rule);
  font-family:var(--mono);
  font-size:clamp(9px,.8vw,11px);
  color:var(--muted);
  direction:ltr;
}
.project-browser>bdi {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.browser-dots {
  display:flex;
  gap:5px;
  flex-shrink:0;
}
.browser-dots i {
  inline-size:6px;
  block-size:6px;
  border-radius:50%;
  background:var(--rule);
}
.browser-mark { color:var(--accent); }
html[lang=ar] .project-browser [data-copy] { font-family:var(--sans); }
.project-actions { margin-block-end:24px; }
.project-visit { min-block-size:48px; padding:12px 20px; font-size:13px; }
.project-privacy {
  border-inline-start:2px solid var(--rule);
  padding-inline-start:14px;
  color:var(--muted);
  font-size:13px;
  line-height:1.8;
}
.project-visual img {
  inline-size:100%;
  aspect-ratio:16 / 9;
  object-fit:contain;
  transition:transform 600ms var(--ease);
}
.project-visual figcaption {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  font-family:var(--mono);
  font-size:12px;
  color:var(--muted);
  padding-block-start:4px;
}
.project-visual figcaption a {
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-block-size:44px;
  flex-shrink:0;
  text-decoration:underline;
  text-underline-offset:4px;
}
.project-visual figcaption .arrow { font-size:16px; }
.project-meta {
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-block-start:1px solid var(--rule);
  padding-block:16px 30px;
}
.index {
  font-size:15px;
}
.project-status {
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:var(--accent);
}
.project-status::before {
  content:'';
  inline-size:5px;
  block-size:5px;
  border-radius:50%;
  background:currentColor;
}
.project-status.is-private { color:var(--muted); }
.project-copy>.meta {
  font-size:12px;
  color:var(--muted);
  margin-block-end:12px;
}
.project h3 {
  font-size:clamp(1.8rem,3.2vw,3.1rem);
  max-inline-size:14ch;
  text-wrap:balance;
  margin-block-end:18px;
}
.project-description {
  font-size:16px;
  color:var(--muted);
  line-height:1.75;
}
.technologies {
  display:flex;
  flex-wrap:wrap;
  gap:7px 16px;
  padding:0;
  list-style:none;
  margin-block:24px;
  font-family:var(--mono);
  font-size:12px;
  line-height:1.8;
  color:var(--muted);
}
summary {
  list-style:none;
  display:flex;
  justify-content:space-between;
  gap:24px;
  align-items:center;
  border-block:1px solid var(--rule);
  padding-block:15px;
  cursor:pointer;
  font-size:12px;
  min-block-size:52px;
}
summary::-webkit-details-marker {
  display:none;
}
.detail-symbol {
  font-size:24px;
  line-height:1;
  transition:transform 200ms var(--ease);
}
details[open] .detail-symbol {
  transform:rotate(45deg);
}
.case-study {
  padding-block:24px 0;
}
.case-study h4 {
  font-size:15px;
  margin-block-end:8px;
}
.case-study p {
  font-size:14px;
  color:var(--muted);
  margin-block-end:24px;
}
.about {
  background:var(--ink);
  color:var(--paper);
}
.about .section-heading>.meta {
  align-self:end;
  justify-self:end;
  max-inline-size:24ch;
  color:#bdbeb4;
  font-size:12px;
}
.portrait img {
  inline-size:100%;
  aspect-ratio:5/6;
  object-fit:cover;
}
.portrait figcaption {
  font-family:var(--mono);
  font-size:12px;
  color:#bdbeb4;
  margin-block-start:14px;
}
.about-statement {
  font-size:clamp(1.5rem,2.5vw,2.25rem);
  line-height:1.4;
  letter-spacing:-.025em;
  margin-block-end:28px;
}
.about-copy>p:not(.about-statement),.interests p {
  font-size:16px;
  color:#bdbeb4;
  margin-block-end:20px;
}
.interests {
  border-block-start:1px solid #50514b;
  margin-block-start:32px;
  padding-block-start:24px;
}
.interests h3 {
  font-size:12px;
  color:var(--paper);
  margin-block-end:12px;
}
.interests p {
  font-size:14px;
  margin:0;
}
.expertise-row h3 {
  font-size:21px;
}
.expertise-row p {
  font-size:14px;
  color:var(--muted);
}
.expertise-row>.meta {
  color:var(--accent);
}
.process-list li {
  border-block-start:1px solid var(--rule);
  padding-block-start:24px;
  position:relative;
}
.process-index {
  display:block;
  font-family:var(--serif);
  font-style:italic;
  font-size:46px;
  line-height:1;
  color:var(--accent);
  margin-block-end:40px;
}
.process-list h3 {
  font-size:25px;
  margin-block-end:18px;
}
.process-list p {
  font-size:14px;
  color:var(--muted);
  line-height:1.8;
}
.contact {
  background:#deddd4;
  border-block-start:1px solid var(--rule);
}
.contact h2 {
  font-size:clamp(2.75rem,4.8vw,4.75rem);
  line-height:1.03;
}
.contact-invitation {
  font-family:var(--serif);
  font-size:clamp(1.8rem,3vw,3rem);
  font-style:italic;
  margin-block-start:14px;
}
.contact-copy>p {
  font-size:16px;
  color:var(--muted);
  margin-block-end:32px;
}
.contact-lead,.contact-compose { min-inline-size:0; }
.contact .contact-grid { grid-template-columns:1fr 1fr; align-items:start; }
.contact-lead .contact-copy { margin-block-start:32px; max-inline-size:46ch; }
.contact-channels { display:grid; gap:12px; }
.contact-channel {
  display:block;
  padding:16px 20px;
  border:1px solid var(--rule);
  transition:background-color 180ms,border-color 180ms;
}
.contact-channel:hover { background:var(--paper); border-color:var(--muted); }
.contact-channel-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; font-size:12px; color:var(--muted); }
.contact-channel-number { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-block:4px; }
.contact-channel-number bdi { font-family:var(--mono); font-size:clamp(22px,2.3vw,30px); letter-spacing:-.04em; }
.contact-channel-number .arrow { color:var(--accent); font-size:24px; }
.contact-channel-action { color:var(--accent); font-size:12px; }
.contact-form { border:1px solid var(--rule); padding:clamp(20px,2.5vw,36px); background:var(--paper); }
.contact-form h3 { font-size:clamp(23px,2vw,28px); line-height:1.45; letter-spacing:-.025em; }
.form-hint { font-size:13px; color:var(--muted); margin-block:12px 28px; }
.contact-fields { display:grid; grid-template-columns:1fr; gap:20px; }
.contact-field { min-inline-size:0; }
.contact-field-message { grid-column:1/-1; }
.contact-form label { display:block; font-size:14px; margin-block-end:8px; }
.contact-form input:not([type=radio]),.contact-form textarea {
  display:block;
  inline-size:100%;
  min-inline-size:0;
  border:1px solid var(--rule);
  border-radius:2px;
  background:#f4f3ee;
  color:var(--ink);
  padding:12px 14px;
  min-block-size:48px;
  font-size:16px;
  line-height:1.7;
}
.contact-form textarea { resize:vertical; min-block-size:140px; max-block-size:600px; }
.contact-form :is(input,textarea)::placeholder { color:var(--muted); opacity:1; }
html[lang=ar] .contact-field :is(input,textarea):not([type=email]):placeholder-shown { direction:rtl; }
.contact-form [aria-invalid=true] { border-color:var(--accent); }
.field-error { font-size:13px; color:var(--accent); margin-block-start:6px; }
.field-error:empty { display:none; }
.contact-form-actions { display:flex; flex-wrap:wrap; gap:16px 24px; margin-block-start:24px; }
.contact-form-actions .text-link { min-block-size:44px; padding:0; text-decoration:underline; text-underline-offset:5px; }
.contact-recipients { min-inline-size:0; border:0; padding:0; margin:24px 0 0; }
.contact-recipients legend { font-size:14px; padding:0; margin-block-end:10px; }
.recipient-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.contact-form .recipient-option { display:flex; align-items:center; justify-content:center; gap:8px; padding:12px 8px; margin:0; border:1px solid var(--rule); cursor:pointer; min-block-size:48px; }
.recipient-option:has(input:checked) { border-color:var(--ink); background:#deddd4; }
.recipient-option input { inline-size:16px; block-size:16px; flex-shrink:0; margin:0; accent-color:var(--accent); }
.recipient-option bdi { font-family:var(--mono); font-size:13px; }
.contact-form .whatsapp-hint { margin-block:16px 0; line-height:1.8; }
.contact-feedback { font-size:14px; margin-block-start:16px; }
.contact-feedback:empty { display:none; }
#contact-prepared { margin-block-start:20px; }
#contact-prepared textarea { padding:12px; border:1px solid var(--muted); }
@media(max-width:900px) {
  .contact .contact-grid { grid-template-columns:1fr; gap:48px; }
  .contact-compose { max-inline-size:700px; inline-size:100%; }
}
@media(max-width:480px) {
  .contact-fields { grid-template-columns:1fr; gap:20px; }
  .contact-field-message { grid-column:auto; }
  .recipient-options { grid-template-columns:1fr; }
  .contact-form .recipient-option { justify-content:flex-start; padding-inline:14px; }
  .contact-form-actions .button { inline-size:100%; }
}
.contact-status {
  font-size:20px;
  border-block-end:1px solid var(--rule);
  padding-block-end:20px;
}
.contact-note {
  font-size:12px!important;
  max-inline-size:46ch;
  line-height:1.8;
  margin-block:14px 0!important;
}
.contact-email {
  font-size:clamp(18px,2.3vw,28px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  overflow-wrap:anywhere;
  text-decoration:underline;
  text-underline-offset:8px;
  min-block-size:56px;
}
.social-links {
  display:flex;
  gap:24px;
  flex-wrap:wrap;
}
.social-links:not(:empty) {
  margin-block-start:24px;
}
.social-links a {
  display:flex;
  align-items:center;
  gap:16px;
  font-size:13px;
  min-block-size:44px;
  text-decoration:underline;
  text-underline-offset:5px;
}
.site-footer {
  font-size:12px;
  color:var(--muted);
}
.site-footer nav a,.footer-language {
  display:inline-flex;
  gap:16px;
  align-items:center;
  min-block-size:44px;
  font-size:12px;
  padding:0;
}
.site-footer p {
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}
.site-footer a {
  text-decoration:underline;
  text-underline-offset:4px;
}
.button:active,button:active {
  transform:scale(.98);
}
html[lang=ar] .hero h1 {
  font-size:clamp(2.5rem,6.5vw,6.5rem);
  line-height:1.3;
}
html[lang=ar] .hero-description {
  max-inline-size:38ch;
}
html[lang=ar] .project h3 {
  max-inline-size:none;
  line-height:1.5;
}
html[lang=ar] .project-visual figcaption {
  font-family:var(--sans);
  font-size:12px;
}
html[lang=ar] .contact-invitation {
  font-family:var(--sans);
  font-style:normal;
  font-size:clamp(1.7rem,2.8vw,2.8rem);
}
html[lang=ar] .process-index {
  font-family:'IBM Plex Mono',monospace;
  font-size:32px;
  font-style:normal;
}
html[lang=ar] .contact h2 {
  line-height:1.3;
}
@media(hover:hover) and (pointer:fine) {
  .navigation a:hover::after {
    transform:scaleX(1);
  }
  .button:hover {
    background:var(--accent);
    color:var(--paper);
  }
  .project-visual:hover img {
    transform:scale(1.025);
  }
  .text-link:hover,.scroll-cue:hover,summary:hover {
    color:var(--accent);
  }
  button:hover {
    color:var(--accent);
  }
  button.button:hover { color:var(--paper); }
}

html[dir=rtl] .navigation a::after { transform-origin:100% 50%; }
.case-permalink {
  display:inline-flex;
  align-items:center;
  min-block-size:44px;
  font-size:13px;
  text-decoration:underline;
  text-underline-offset:4px;
}
@media(hover:hover) and (pointer:fine) {
  .case-permalink:hover { color:var(--accent); }
}