/* ==========================================================================
   Layout and components. Values come from tokens.css.
   Logical properties only (inline = left/right, block = top/bottom),
   so the same CSS works for right-to-left Hebrew.
   ========================================================================== */

/* ---- Base ---- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-block-size: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-text);
  font-weight: var(--weight-regular);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* The page area grows to fill the window, so the footer always sits at the
   bottom: below the content, or at the bottom of the screen on short pages */
main,
.layout {
  flex: 1 0 auto;
}

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

h1, h2, h3, p, ul, ol, dl, dd, figure {
  margin: 0;
}

/* One weight everywhere: regular (400). Stops browsers making headings,
   strong, b and table headers bold by default. */
h1, h2, h3, h4, h5, h6, strong, b, th {
  font-weight: var(--weight-regular);
}

ul[role="list"],
ol[role="list"] {
  list-style: none;
  padding: 0;
}

/* No underlines anywhere on the site, including on hover. The hover effect
   (the same for every link and button) is at the end of this file. */
a,
a:hover,
a:focus {
  color: inherit;
  text-decoration: none;
}

:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 3px;
}

/* Selected text: pale yellow highlight, same colour as the favicon.
   Separate rules: a browser drops a whole rule if it doesn't know one of its selectors. */
::-moz-selection {
  background: #FFFF99;
  color: var(--color-text);
}

::selection {
  background: #FFFF99;
  color: var(--color-text);
}

.visually-hidden {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Text inside [lang] spans that differs from the page language keeps its own direction */
[dir="auto"] {
  unicode-bidi: isolate;
}

/* ---- Layout helpers ---- */

.wrap {
  inline-size: 100%;
  max-inline-size: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.label {
  font-family: var(--font-text);
  font-weight: var(--weight-regular);
  font-size: var(--step--1);
  letter-spacing: var(--tracking-label);
  line-height: var(--leading-snug);
}

.muted {
  color: var(--color-text-muted);
}

/* Placeholder text for content still to be added — visible on purpose */
.todo {
  font-style: normal;
  color: var(--color-text-muted);
  background: var(--color-placeholder);
  padding-inline: 0.2em;
}

/* ---- Skip link ---- */

.skip-link {
  position: absolute;
  inset-inline-start: var(--gutter);
  inset-block-start: var(--space-xs);
  z-index: 10;
  padding: var(--space-xs) var(--space-s);
  background: var(--color-ink);
  color: var(--color-paper);
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

/* ---- Header (About page) ---- */

.site-header {
  padding-block: var(--space-m);
}

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

.site-name {
  text-decoration: none;
}



.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-m);
  margin: 0;
}

.site-nav a {
  padding-block: var(--space-2xs);
}

/* ---- Footer ---- */

.site-footer {
  margin-block-start: var(--space-2xl);
  padding-block: var(--space-m) var(--space-l);
}

.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-l);
}

/* Wide screens: the footer row uses the page's 5 columns, so "Back to top"
   starts where the content area starts (column 2) */
@media (min-width: 64em) {
  .site-footer .wrap {
    display: grid;
    grid-template-columns: var(--page-columns);
    column-gap: var(--grid-gap);
  }
}

/* ---- Page headings ----
   All headings match the running text: 16px, regular weight, text font.
   No size or weight difference between headings and body copy. */

.page-title {
  font-family: var(--font-text);
  font-weight: var(--weight-regular);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  letter-spacing: normal;
}

/* ---- Layout: sidebar on the left, content on the right ----
   Used by the home page and every project page.
   Mobile: sidebar on top, content below.
   Wide screens: sidebar stays in view while the content scrolls. */

.layout {
  display: grid;
  gap: var(--space-l);
  align-content: start;   /* extra height goes below the content, not between rows */
  padding-block-start: var(--page-top);
}

.sidebar {
  display: grid;
  gap: var(--space-l);
  align-content: start;
}

/* Top row: name on the left, "i" on the right (menu button after it on
   small screens) */
.sidebar-top {
  display: flex;
  align-items: baseline;
  gap: var(--space-m);
}

.sidebar-i {
  margin-inline-start: auto;
}

.sidebar-name {
  margin: 0;
  margin-block-end: 0.7em;   /* same extra space as under the project title */
  font: inherit;   /* same size and weight as the name on other pages */
}

/* Phones and tablets: no menu button. The sidebar (name, "+", contact
   details) is a plain block stacked above the page content and scrolls with
   it; "+" opens the bio in place exactly as on desktop. */
@media (max-width: 63.99em) {
  /* only the About block's own blank line separates it from the name */
  .sidebar {
    gap: 0;
  }
}

/* Page grid (wide screens): 5 columns.
   Column 1 = sidebar, 1.5× wider so project names wrap less.
   Columns 2–5 = content, equal to each other.
   Every grid inside the content area (home cards, project text, gallery
   pairs) uses the same --grid-gap, so its edges land on these column lines. */
@media (min-width: 64em) {
  .layout {
    grid-template-columns: var(--page-columns);
    column-gap: var(--grid-gap);
  }

  .sidebar {
    grid-column: 1;
    grid-row: 1;
    position: sticky;
    inset-block-start: 0;
    align-self: start;
    block-size: 100vh;
    block-size: 100dvh;
    overflow: visible;   /* the sidebar never scrolls on its own */
    padding-block: var(--page-top);
    margin-block-start: calc(-1 * var(--page-top));
  }

  /* Name + "i" row: fixed to the screen, so it never scrolls away — not
     even at the end of a page. Same left edge and width as the sidebar column. */
  .sidebar-top {
    position: fixed;
    inset-block-start: var(--page-top);
    left: var(--sidebar-left, var(--gutter));
    inline-size: var(--sidebar-width, 15rem);
    z-index: 10;
  }

  /* "+" and the contact details: fixed right under the name */
  .sidebar-about {
    position: fixed;
    inset-block-start: calc(var(--page-top) + var(--sidebar-top-h, 1.25rem));
    left: var(--sidebar-left, var(--gutter));
    inline-size: var(--sidebar-width, 15rem);
    z-index: 10;
  }

  .layout-main {
    grid-column: 2 / -1;
    grid-row: 1;
  }
}

/* ---- Project page ---- */

.project-head {
  padding-block: 0 var(--space-m);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-m);
}

.project-head-text {
  display: grid;
  gap: var(--space-xs);
}

.project-head .project-nav {
  padding-block-start: 0.2em;   /* line up with the title's first line */
}

.project-title {
  font-family: var(--font-text);
  font-weight: var(--weight-regular);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  letter-spacing: normal;
}

/* Category/date above the details, with one blank line between them */
.project-facts {
  display: grid;
  gap: 1lh;
  margin-block-start: var(--space-l);   /* below the description on narrow screens */
}

.project-facts .project-details {
  margin-block-start: 0;
  max-inline-size: none;
}

.project-meta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-m);
}

/* Hero: the full image, uncropped */
.project-hero {
  background: var(--color-placeholder);
}

.project-hero img {
  inline-size: 100%;
  block-size: auto;
}

/* Description sits between the title and the first image/video */
.project-info {
  display: grid;
  gap: 0 0;
  padding-block: 0 var(--space-l);
}

.project-video video {
  display: block;
  inline-size: 100%;
  block-size: auto;
  background: var(--color-ink);
}

.project-hero,
.project-video {
  margin-block-end: var(--grid-gap);
}

/* Project text on the page grid (content area = page columns 2–5):
     details      → page column 2
     title        → page columns 3–5 (Previous / Next at the right edge)
     description  → page columns 3–4; column 5 left empty
   On narrow screens: title, description, details, stacked. */
@media (min-width: 64em) {
  .project-info {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--grid-gap);
    row-gap: 0;
  }

  .project-info > .project-head {
    grid-column: 2 / -1;
    grid-row: 1;
  }

  .project-body {
    grid-column: 2 / 4;
    grid-row: 2;
    max-inline-size: none;
  }

  .project-info > .project-details {
    grid-column: 1;
    grid-row: 2;
    max-inline-size: none;
    margin-block-start: 0;
    /* Same line-height as the description, but smaller text sits 1px higher
       in the line; this lines up the first baselines (measured in Chrome) */
    padding-block-start: 1px;
  }
}

.project-body {
  display: grid;
  gap: 1em;
  font-size: var(--step-0);
  line-height: var(--line-text);   /* same as the details beside it */
  max-inline-size: var(--measure);
}

.project-details {
  margin-block-start: var(--space-l);   /* below the description on narrow screens */
  max-inline-size: 50%;                 /* half the width of its column */
  display: grid;
  gap: var(--space-m);
  align-content: start;
}

.project-details div {
  display: grid;
  gap: 0;   /* the detail lines read as one paragraph: line-height only, no extra space */
}

.project-details dt {
  color: var(--color-text-muted);
}

.project-details dd {
  font-size: var(--step--1);
  line-height: var(--line-text);   /* same as the description beside it */
  max-inline-size: 30em;
}

.gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gap);
}

@media (min-width: 40em) {
  .gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gallery > * {
    grid-column: 1 / -1;
  }

  .gallery > .is-half {
    grid-column: auto;
  }
}

.gallery figure {
  background: var(--color-placeholder);
}

.gallery img,
.gallery video {
  inline-size: 100%;
}

.gallery video {
  background: var(--color-ink);
}

/* ---- Project pages on the 12-column grid ----
   Same grid as the homepage: 12 columns, 1.25rem (20px) margins
   left, right and top, 1.25rem gutters; columns stretch with the window.
     sidebar       columns 1–2   (fixed while scrolling)
     text          columns 3 to the middle of 6 (3.5 columns)
     images        columns 7–12  (video / hero, then the gallery, in order) */
body[data-page="project"] {
  --gutter: 1.25rem;
  --grid-gap: 1.25rem;
  --page-top: 1.25rem;
}

body[data-page="project"] .wrap {
  max-inline-size: none;
}

/* Text column: title, blank line, description, blank line, category/date —
   the same one-blank-line rhythm (1lh = 17.5px at 14px / 125%) as
   the homepage, on every screen size */
body[data-page="project"] .project-info {
  row-gap: 1lh;
}

body[data-page="project"] .project-info > .project-head,
body[data-page="project"] .project-info > .project-facts {
  padding-block: 0;
  margin-block: 0;
}

/* Under the project title: 0.7em instead of the blank line (cancels the
   row-gap for this one gap only). In em, so it follows the text size.
   Same as under the name. */
body[data-page="project"] .project-info > .project-head {
  margin-block-end: calc(0.7em - 1lh);
}



.project-link {
  margin: 0;
}


@media (min-width: 64em) {
  body[data-page="project"] .layout,
  body[data-page="project"] .site-footer .wrap {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
  }

  body[data-page="project"] .sidebar {
    grid-column: 1 / span 2;
  }

  body[data-page="project"] .layout-main {
    grid-column: 3 / -1;
  }

  /* The content area (columns 3–12) split into the same 10 columns */
  body[data-page="project"] #project {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    column-gap: var(--grid-gap);
    align-items: start;
  }

  /* Text column: everything stacked, filling its 3.5 columns. It stays in
     place while the images scroll (like the sidebar) */
  body[data-page="project"] .project-info {
    grid-column: 1 / span 4;
    inline-size: calc(87.5% + var(--grid-gap) * 3 / 8);   /* 3.5 columns: ends halfway through column 6 */
    justify-self: start;
    grid-row: 1;
    position: sticky;
    inset-block-start: var(--page-top);
    grid-template-columns: minmax(0, 1fr);
    padding-block-end: 0;
  }

  body[data-page="project"] .project-info > * {
    grid-column: 1;
    grid-row: auto;
    max-inline-size: none;
    margin-block-start: 0;
    padding-block-start: 0;
  }

  body[data-page="project"] .project-info > .project-head {
    padding-block-end: 0;
  }

  /* Image column: one image per row, full column width, 1.25rem apart */
  body[data-page="project"] .project-media {
    grid-column: 5 / span 6;
    grid-row: 1;
    display: grid;
    gap: var(--grid-gap);
  }

  body[data-page="project"] .project-media > .project-hero,
  body[data-page="project"] .project-media > .project-video {
    margin-block-end: 0;
  }

  body[data-page="project"] .project-media .gallery {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-page="project"] .project-media .gallery > * {
    grid-column: 1;
  }

  /* Footer: © under the sidebar; Previous / Next at page column 3 (the text
     column's left edge) and "Back to top" at the start of page column 5 */
  body[data-page="project"] .site-footer .wrap > :first-child {
    grid-column: 1 / span 2;
  }

  body[data-page="project"] .site-footer .back-to-top {
    grid-column: 5 / span 2;       /* starts at page column 5 (the text column's 3rd and last) */
    justify-self: start;
  }

  body[data-page="project"] .site-footer .footer-nav {
    grid-column: 3 / span 2;       /* page column 3: the text column's left edge */
    grid-row: 1;
    justify-self: start;
    margin-inline: -0.5em 0;       /* the background patch's padding; text starts on the column line */
  }

  /* pinned: the measured position already includes that offset */
  body[data-page="project"] .site-footer .footer-nav.is-pinned {
    margin: 0;
  }

  body[data-page="project"] .site-footer .back-to-top {
    grid-row: 1;
  }
}

/* Prev / next: small links at the top right of project pages */

.project-nav {
  display: flex;
  gap: var(--space-m);
  white-space: nowrap;
}


/* Back to top: lives in the footer row (column 2 on wide screens). While you
   scroll a project page it's pinned to the bottom of the screen at the same
   spot (set by setupBackToTop in main.js). A small patch of background keeps
   it readable over images passing underneath. */
.back-to-top,
.footer-nav {
  margin: 0;
  margin-inline-start: -0.5em;
  padding: 0.35em 0.5em;
  margin-block: -0.35em;
  inline-size: max-content;
  background: var(--color-bg);
  transition: opacity 200ms;
}

.back-to-top.is-pinned,
.footer-nav.is-pinned {
  position: fixed;
  left: var(--pin-left);
  bottom: var(--pin-bottom);
  margin: 0;   /* the measured position already includes the offsets */
  z-index: 5;
}

/* Previous / Next: the right end of the footer row */
.footer-nav {
  margin-inline: auto -0.5em;
}

@media (prefers-reduced-motion: reduce) {
  .back-to-top,
  .footer-nav {
    transition: none;
  }
}

/* Phones and tablets, project pages: "© Niv Yagur" gets its own line, so
   "Back to top" (left) and Previous / Next (right) share the next one, each
   20px from its edge of the screen (the page margin); pinned to the bottom
   of the screen they stay on that same line */
@media (max-width: 63.99em) {
  body[data-page="project"] .site-footer .wrap > :first-child {
    flex-basis: 100%;
  }
}

/* Hidden while you're still at the top of the page */
.back-to-top.is-hidden {
  opacity: 0;
  pointer-events: none;
}


/* Focus lands here after "Back to top"; no outline box around the whole page */
#main:focus {
  outline: none;
}

/* ---- About + contact (sidebar, every page) ----
   Name, blank line, "+", blank line, contact details. "+" opens the bio
   below it and becomes "−"; the contact details move down. The bio's
   height animates to --bio-h (set by setupAbout in main.js).
   Spacing: lines inside a group use the sidebar's line height, and each
   group is separated by exactly one blank line (1lh) of that height. */
.sidebar-about {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-block-start: 0;   /* no blank line under the name: only its 0.7em margin */
}

.sidebar-bio {
  align-self: stretch;
  block-size: var(--bio-h, 0px);
  overflow: hidden;
  visibility: hidden;
  transition: block-size 350ms var(--ease-out), visibility 0s 350ms;
}

.sidebar-about.is-open .sidebar-bio {
  visibility: visible;
  transition: block-size 350ms var(--ease-out), visibility 0s;
}

.sidebar-bio-inner {
  padding-block-start: 1lh;          /* blank line between "−" and the bio */
}

/* The bio and contact details use the sidebar's own size and line height */
.sidebar-about .bio,
.sidebar-about .contact-list {
  font-size: inherit;
  line-height: inherit;
}

.sidebar-about .bio {
  gap: 1lh;                          /* blank line between paragraphs */
}

/* Wide screens: the bio is 1.6 columns wide. The sidebar spans 2 columns
   (100% = 2 columns + 1 gutter), so 80% + 1/5 gutter = 1.6 columns +
   1 gutter: it ends 60% of the way through column 2. Same method
   as the 3.5-column text on the home and project pages. */
@media (min-width: 64em) {
  .sidebar-about .bio {
    inline-size: calc(80% + var(--grid-gap) / 5);
  }
}

/* "+" / "−": looks like the text around it, regular weight */
.about-toggle {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: var(--weight-regular);
  letter-spacing: inherit;
  cursor: pointer;
}

.sidebar-about .contact-list {
  margin-block-start: 1lh;           /* blank line above the contact details */
}

@media (prefers-reduced-motion: reduce) {
  .sidebar-bio,
  .sidebar-about.is-open .sidebar-bio {
    transition: none;
  }
}

.bio {
  display: grid;
  gap: 1em;
  font-size: var(--step-0);
  line-height: var(--leading-body);
}

/* Email, phone, Instagram and CV: all the same size and colour */
.contact-list {
  display: grid;
  gap: 0;   /* tight group: same line spacing as running text */
  margin: 0;
  font-size: var(--step-0);
}



.contact-list a {
  overflow-wrap: anywhere;
}

/* ---- Motion: gentle fade-up, only when the visitor allows motion ---- */

@media (prefers-reduced-motion: no-preference) {
  /* Lazy-loaded images fade in as they finish loading (fadeInOnLoad in
     main.js): 200ms, like the image viewer's fade */
  .js img.fade-in {
    opacity: 0;
    transition: opacity 200ms var(--ease-out);
  }

  .js img.fade-in.is-loaded {
    opacity: 1;
  }

  /* Moving between pages (Previous / Next, View project, the name): a short
     cross-fade instead of a jump. Browsers without it just load the page. */
  @view-transition {
    navigation: auto;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 200ms;
  }

  .js .reveal {
    opacity: 0;
    transform: translateY(1.25rem);
    transition:
      opacity var(--duration) var(--ease-out),
      transform var(--duration) var(--ease-out);
  }

  .js .reveal.is-visible {
    opacity: 1;
    transform: none;
  }

}

/* ---- Typography (Figma spec): the homepage and project pages ----
   Every piece of text: the text family, regular weight (55 Roman), 14px,
   line height 125%, letter spacing 1%, left/top aligned, one ink colour.
   Headings (project titles) are the same, but bold and indented.
   Links show hover as a slight fade. */
:root {
  --title-indent: 24px;     /* project titles' indent (tune here) */
}

body:is([data-page="home"], [data-page="project"]) {
  font-family: var(--font-text);
  font-weight: var(--weight-regular);
  font-size: 14px;
  line-height: 1.25;
  letter-spacing: 0.01em;
  text-align: start;
  color: var(--color-text);
}

body:is([data-page="home"], [data-page="project"]) :is(h1, h2, h3, p, li, dt, dd, a, span, button, .label, .project-body, .project-details, .bio, .contact-list):not(:where(.amiri-regular, .amiri-bold, .amiri-regular-italic, .amiri-bold-italic)) {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  font-weight: var(--weight-regular);
  color: var(--color-text);
}

body:is([data-page="home"], [data-page="project"]) :is(.scroll-title, .project-title) {
  font-weight: var(--weight-bold);
  padding-inline-start: var(--title-indent);
}

/* Hover, the same for every link and button on the site (text, "+",
   project images and videos, the image viewer's ×): fades to 70% */
body:is([data-page="home"], [data-page="project"]) :is(a, .about-toggle, .viewer-close) {
  transition: opacity 150ms;
}

body:is([data-page="home"], [data-page="project"]) :is(a, .about-toggle, .viewer-close):hover {
  opacity: 0.7;
}

/* ---- Image viewer (project pages; built by setupViewer in main.js) ----
   Covers the description + image columns, from the top margin to the bottom
   margin; the sidebar stays visible. Page background behind the image.
   The image sits at the top (level with the name), as large as fits; ×
   beside it, top right. The image's left / right half goes to the previous
   / next image: the mouse pointer becomes < or > there. "5/15" sits where
   Previous / Next usually are (placed by script), the image stops one
   blank line above it. */
.viewer-trigger {
  cursor: zoom-in;
}

.viewer {
  position: fixed;
  inset-block: 0;
  left: var(--viewer-left, 0px);
  right: var(--viewer-right, 0px);
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: minmax(0, 1fr);
  column-gap: var(--grid-gap);
  padding-block: var(--page-top) var(--count-space, var(--page-top));
  background: var(--color-bg);
  opacity: 0;
  transition: opacity 200ms var(--ease-out);
}

/* Closed: really gone, not just invisible (display: grid above would
   otherwise beat the hidden attribute and leave it over the page,
   catching every click) */
.viewer[hidden] {
  display: none;
}

.viewer.is-visible {
  opacity: 1;
}

.viewer button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}

.viewer-figure {
  grid-column: 1;
  margin: 0;
  min-block-size: 0;
}

/* Sized by script to exactly the image's shown size */
.viewer-frame {
  position: relative;
}

.viewer-frame img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

.viewer-close {
  grid-column: 2;
  align-self: start;
}

/* The image's two halves: invisible buttons. The system cursor is hidden
   there; instead the characters < and > (typed text, the site's font and
   size) follow the mouse. White with mix-blend-mode: difference, so the
   character shows dark on light areas and light on dark ones. The .viewer
   prefix beats the button reset's cursor: pointer above. */
.viewer .viewer-zone {
  position: absolute;
  inset-block: 0;
  inline-size: 50%;
  cursor: none;
}

.viewer .viewer-zone-prev {
  inset-inline-start: 0;
}

.viewer .viewer-zone-next {
  inset-inline-end: 0;
}

.viewer-pointer {
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: none;
  color: #fff;
  mix-blend-mode: difference;
  line-height: 1;
}

.viewer-pointer[hidden] {
  display: none;
}

.viewer-zone:focus-visible {
  outline-offset: -4px;
}

/* Touch screens: swipe instead (a tap on the image does nothing) */
@media (hover: none) {
  .viewer .viewer-zone {
    display: none;
  }
}

.viewer-count {
  position: fixed;
  left: var(--count-left, 0px);
  top: var(--count-top, auto);
  margin: 0;
}

/* No page scrolling behind the viewer */
.viewer-open,
.viewer-open body {
  overflow: hidden;
}

/* Phones and tablets: the whole screen, with the page's side margins.
   × on its own line above the image (right), the image centred in the
   space below it, "5/15" at the bottom left (where "Back to top" sits).
   × gets a 44px touch area (transparent padding, pulled back with negative
   margins, so it looks and sits exactly as on desktop). */
@media (max-width: 63.99em) {
  .viewer {
    padding-inline: var(--gutter);
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    row-gap: 1lh;
  }

  .viewer-close {
    grid-column: 1;
    grid-row: 1;
    justify-self: end;
    min-inline-size: 44px;
    min-block-size: 44px;
    margin: -13px;
    margin-inline-end: -17px;   /* the × glyph stays at the right margin */
    touch-action: manipulation;
  }

  .viewer-figure {
    grid-column: 1;
    grid-row: 2;
    display: grid;
    place-items: center;
  }

  /* × twice the text size on phones (28px). The longer selector beats the
     shared type rule, which keeps buttons at the text size. */
  body[data-page="project"] .viewer .viewer-close {
    font-size: 2em;
    margin-block-start: -5px;   /* the larger × still starts at the top margin */
    margin-inline-end: -14px;   /* …and ends at the right margin */
  }
}

@media (prefers-reduced-motion: reduce) {
  .viewer {
    transition: none;
  }
}

/* Category/date + details: 12px, line height 140% (16.8px), letter
   spacing 1%; on wide screens exactly two grid columns wide
   (two columns and the gutter between them, within the 3.5-column text area) */
body:is([data-page="home"], [data-page="project"]) .project-facts {
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.01em;
}

@media (min-width: 64em) {
  body[data-page="project"] .project-facts {
    inline-size: calc((400% - 5 * var(--grid-gap)) / 7);   /* 2 columns + 1 gutter, of a 3.5-column area */
  }
}

/* ---- Arabic text (e.g. "مكتوب"): Amiri, from Google Fonts ----
   Wrapped in <span lang="ar"> by js/main.js and js/home.js: amiri-bold where
   the text around it is bold (titles), amiri-regular everywhere else.
   The global type rule above skips these spans (:not(:where(...)), no extra
   specificity), so they keep the size, line height and colour around them. */
.amiri-regular {
  font-family: "Amiri", serif;
  font-weight: 400;
  font-style: normal;
}

.amiri-bold {
  font-family: "Amiri", serif;
  font-weight: 700;
  font-style: normal;
}

.amiri-regular-italic {
  font-family: "Amiri", serif;
  font-weight: 400;
  font-style: italic;
}

.amiri-bold-italic {
  font-family: "Amiri", serif;
  font-weight: 700;
  font-style: italic;
}