:root{
  /* Surfaces — the Archive ground: a warm-neutral off-white, near paper but not white. */
  --paper:#fbfbfa;
  --wash:#f8f8f6;
  --panel:#fff;
  --panel-2:#f4f4f1;
  --chip:#f1f1ee;
  --line:#eaeae6;
  --line-strong:#e4e4e0;
  --line-input:#e0e0da;
  --line-dash:#d4d4ce;
  --paper-rgb:251,251,250;

  /* Ink — a single near-black carries the whole interface. Buttons, nav pills and the
     photograph plate are all this colour; the accent is deliberately rationed. */
  --ink:#131316;
  --text:#4d4d53;
  --muted:#5d5d63;
  --faint:#8a8a8f;
  --fainter:#a5a59f;
  --ink-inverse:#fbfbfa;

  /* Accent — one quiet clay. It marks the eyebrow, prose links and legal notices, and
     nothing that would compete with a photograph. */
  --brick:#9c4a3c;
  --brick-hover:#833b30;
  --brick-soft:rgba(156,74,60,.08);
  --brick-ink:#fbfbfa;
  --clay:#9c4a3c;

  --red:#b4342a;
  --ok:#4f7a3c;

  /* The flow feed is a fixed overlay pinned directly under the header, so both read this.
     They were two separate hard-coded 62s, which meant any change to one left a black gap
     or a covered navbar in the other. */
  --header-h:66px;

  /* Photographs sit in 12px cards; heroes and dark plates take 14px; controls are fully
     round. Inputs keep 10px so a text cursor still reads as a field. */
  --radius:12px;
  --radius-lg:14px;
  --radius-sm:10px;
  --radius-xs:8px;
  --pill:100px;

  --shadow-1:0 1px 2px rgba(19,19,22,.04);
  --shadow-2:0 4px 10px rgba(19,19,22,.06),0 12px 28px rgba(19,19,22,.06);
  --shadow-3:0 18px 44px rgba(19,19,22,.14);

  --font-body:"Archivo","IBM Plex Sans Arabic",system-ui,-apple-system,sans-serif;
  --font-display:"Archivo","IBM Plex Sans Arabic",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;

  /* Back-compat aliases for the previous token names, so any rule or inline style still
     referencing them keeps resolving instead of falling back to an initial value. */
  --gold:var(--brick);
  --gold-soft:var(--brick-soft);
  --gold-hover:var(--brick-hover);
  --gold-ink:var(--brick-ink);
  --sun:var(--brick);
  --sun-soft:var(--brick-soft);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;color-scheme:light}
/* break-word, not anywhere: only splits a word that cannot fit on its own line, which
   stops long URLs in a bio or description from widening the whole page on a phone. */
body{background:var(--paper);color:var(--text);font-family:var(--font-body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-wrap:break-word;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
/* Short pages (login, verify, 404) would otherwise leave the footer floating mid-screen. */
main{flex:1 0 auto}
.site-footer{flex-shrink:0}
/* The flow feed is a fixed full-screen overlay, so it needs no page height reserved. */
body:has(.flow){min-height:0}
[dir="rtl"] body{letter-spacing:0}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
a:hover{color:var(--ink)}
::selection{background:var(--brick-soft);color:var(--ink)}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:4px}
.wrap{max-width:1180px;margin-inline:auto;padding-inline:24px}
.wrap-narrow{max-width:980px}
.wrap-form{max-width:480px}
/* The mono face carries every small catalogue label — file numbers, EXIF rows, counts.
   Tracking and caps are dropped in RTL, where both break Arabic and Kurdish joins. */
.mono{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;color:var(--faint)}
[dir="rtl"] .mono{letter-spacing:0;font-family:var(--font-body)}
.center{text-align:center}
/* A bare "→" in link text keeps pointing right in Arabic and Kurdish, where it should
   point at the reading direction. Mirroring the glyph is the one reliable fix. */
.arrow{display:inline-block}
[dir="rtl"] .arrow{transform:scaleX(-1)}

/* Display type is the same family as the body, set tight and at a lighter weight. The
   negative tracking is what makes it read as a masthead rather than a heading. */
h1,h2{font-family:var(--font-display);font-weight:500;line-height:1.12;letter-spacing:-.03em;color:var(--ink)}
h1{font-size:clamp(1.75rem,3.6vw,2.15rem);margin-block-end:.35em}
h2{font-size:clamp(1.35rem,2.6vw,1.85rem)}
h3{font-size:1rem;font-weight:600;color:var(--ink)}
[dir="rtl"] h1,[dir="rtl"] h2{letter-spacing:0}

/* ── Header ───────────────────────────────────────────────────────────────── */
.site-header{position:sticky;top:0;z-index:50;background:rgba(var(--paper-rgb),.82);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);border-block-end:1px solid var(--line)}
.header-inner{display:flex;align-items:center;gap:22px;height:var(--header-h)}
.logo{font-family:var(--font-display);font-weight:700;font-size:1rem;letter-spacing:-.01em;white-space:nowrap;color:var(--ink)}
.logo:hover{color:var(--ink)}
.logo-dot,.logo-krd{color:inherit}
.logo-krd{font-weight:700}
/* Nav items are pills: inactive ones are bare text, the current section is filled ink.
   A fixed height rather than vertical padding keeps filled and bare pills aligned. */
.main-nav{display:flex;gap:4px;flex:1}
.nav-link{display:inline-flex;align-items:center;height:32px;padding-inline:14px;border-radius:var(--pill);color:var(--muted);font-weight:400;font-size:.875rem;line-height:1;white-space:nowrap;transition:background .15s ease,color .15s ease}
.nav-link:hover{background:var(--chip);color:var(--ink)}
.nav-link.is-active{background:var(--ink);color:var(--ink-inverse);font-weight:500}
.nav-link.is-active:hover{background:var(--ink);color:var(--ink-inverse)}
.nav-flow{color:var(--muted)}
.header-actions{display:flex;align-items:center;gap:12px}
/* A search affordance, not a live field — it navigates to /search, which owns the real
   input. Rendering it as a pill keeps the header to a single row of controls. */
.header-search{display:flex;align-items:center;gap:9px;height:34px;padding-inline:14px;background:var(--chip);border-radius:var(--pill);color:var(--fainter);font-size:.8rem;white-space:nowrap;transition:background .15s ease,color .15s ease}
.header-search:hover{background:var(--line);color:var(--muted)}
.header-search svg{width:13px;height:13px;flex-shrink:0}
.header-search span{max-width:130px;overflow:hidden;text-overflow:ellipsis}
/* Segmented language switch, matching the sort control. */
.lang-switch{display:flex;gap:2px;padding:3px;border-radius:var(--pill);background:var(--chip)}
.lang-switch a{padding:5px 9px;border-radius:var(--pill);font-size:.65rem;font-family:var(--font-mono);letter-spacing:.06em;color:var(--faint);line-height:1;transition:background .15s ease,color .15s ease}
.lang-switch a:hover{color:var(--ink)}
.lang-switch a.is-active{background:var(--panel);color:var(--ink);box-shadow:var(--shadow-1)}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding-inline:24px;border-radius:var(--pill);border:1px solid transparent;font-family:var(--font-body);font-weight:500;font-size:.9rem;line-height:1;cursor:pointer;white-space:nowrap;transition:transform .12s ease,background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease}
.btn:active{transform:scale(.97)}
.btn-sm{height:36px;padding-inline:18px;font-size:.82rem}
.btn-gold{background:var(--ink);color:var(--ink-inverse)}
.btn-gold:hover{background:#000;color:var(--ink-inverse)}
.btn-ghost{background:var(--panel);border-color:var(--line-strong);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink);color:var(--ink);background:var(--panel)}
/* On a dark plate the fills invert — ink on paper becomes paper on ink. */
.btn-invert{background:var(--ink-inverse);color:var(--ink)}
.btn-invert:hover{background:#fff;color:var(--ink)}
.link-btn{background:none;border:none;color:var(--brick);cursor:pointer;font:inherit;font-size:.875rem;padding:0}
.link-btn:hover{text-decoration:underline}

.user-menu{position:relative}
.user-menu-btn{background:none;border:none;cursor:pointer;padding:0;display:block}
.avatar{width:34px;height:34px;border-radius:50%;object-fit:cover;background:var(--line-strong)}
.avatar-sm{width:30px;height:30px}
.avatar-lg{width:76px;height:76px}
.avatar-xl{width:96px;height:96px}
.user-menu-drop{position:absolute;inset-inline-end:0;top:calc(100% + 10px);background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);min-width:180px;padding:6px;display:flex;flex-direction:column;box-shadow:var(--shadow-3)}
.user-menu-drop[hidden]{display:none}
.user-menu-drop a,.user-menu-drop button{padding:10px 13px;border-radius:var(--radius-xs);font-size:.875rem;text-align:start;background:none;border:none;color:var(--ink);cursor:pointer;font-family:var(--font-body);width:100%}
.user-menu-drop a:hover,.user-menu-drop button:hover{background:var(--panel-2);color:var(--ink)}

.flash{margin-block:16px;padding:13px 18px;border-radius:var(--radius);font-size:.9rem;border:1px solid}
.flash-ok{background:rgba(79,122,60,.08);border-color:rgba(79,122,60,.3);color:#3f6330}
.flash-err{background:rgba(180,52,42,.07);border-color:rgba(180,52,42,.28);color:#9c2c23}

/* ── Home hero: one photograph, full bleed inside a rounded plate ─────────── */
/* The hero is a photograph with a translucent caption card, not a text banner. When
   there is nothing to feature yet, .hero-empty falls back to the older text layout. */
.hero{padding:16px}
.hero-stage{position:relative;height:clamp(340px,52vw,560px);border-radius:var(--radius-lg);overflow:hidden;background:var(--panel-2);display:flex;align-items:flex-end}
.hero-stage>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-card{position:relative;margin:clamp(16px,3vw,28px);padding:clamp(20px,2.4vw,28px) clamp(22px,2.6vw,32px);background:rgba(var(--paper-rgb),.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:var(--radius);max-width:500px;display:flex;flex-direction:column;gap:14px}
/* The kilim motif's first of two appearances: a single clay diamond before the eyebrow. */
.eyebrow{display:flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brick);margin:0}
.eyebrow::before{content:"";width:6px;height:6px;background:var(--brick);transform:rotate(45deg);flex-shrink:0}
[dir="rtl"] .eyebrow{letter-spacing:.03em;font-family:var(--font-body)}
.hero-title{font-size:clamp(1.7rem,4vw,2.75rem);line-height:1.04;letter-spacing:-.035em;margin:0;color:var(--ink)}
.hero-byline{display:flex;align-items:center;gap:12px}
.hero-byline .avatar{width:30px;height:30px}
.hero-byline-text{display:flex;flex-direction:column;line-height:1.35}
.hero-byline-text strong{font-size:.8rem;font-weight:500;color:var(--ink)}
.hero-sub{color:var(--muted);max-width:56ch;font-size:.98rem;margin:0}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap}
/* Stats run under the hero as a mono strip rather than crowding the caption card. */
.hero-stats{display:flex;gap:clamp(24px,4vw,44px);flex-wrap:wrap;padding:26px 24px 0;max-width:1180px;margin-inline:auto}
.hero-stats dt{font-family:var(--font-display);font-size:1.4rem;font-weight:500;letter-spacing:-.02em;color:var(--ink)}
.hero-stats dd{font-family:var(--font-mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.12em;color:var(--faint)}
[dir="rtl"] .hero-stats dd{letter-spacing:0;text-transform:none;font-family:var(--font-body)}
/* Fallback for a gallery with no photograph yet to feature. */
.hero-empty{padding:clamp(48px,7vw,88px) 0 clamp(40px,6vw,64px);border-block-end:1px solid var(--line)}
.hero-empty .hero-title{max-width:18ch;margin-block-end:18px}
.hero-empty .hero-sub{margin-block-end:26px}

/* ── Sections ─────────────────────────────────────────────────────────────── */
.section{padding-block:clamp(36px,5vw,52px)}
.page-top{padding-block-start:36px}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-block-end:22px}
.section-sub{color:var(--muted);font-size:.92rem;margin-block-start:6px}
.link-more{color:var(--brick);font-size:.82rem;white-space:nowrap;font-weight:500}
.link-more:hover{color:var(--brick-hover)}
/* A mono kicker used above category blocks and every detail list. */
.label-mono{font-family:var(--font-mono);font-size:.63rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
[dir="rtl"] .label-mono{letter-spacing:0;text-transform:none;font-family:var(--font-body);font-size:.78rem}
.empty-state{color:var(--faint);padding-block:56px;text-align:center;border:1.5px dashed var(--line-dash);border-radius:var(--radius-lg);background:var(--panel-2)}

/* Woven diamond rule — the kilim motif's second and last appearance. Two identical
   45-degree gradients offset by half a tile interlock into a row of diamonds, so the
   band costs no image request and recolours with the token. */
.rule-woven{height:12px;margin-block:clamp(28px,5vw,48px);
  background-image:
    linear-gradient(45deg,transparent 43%,var(--line-strong) 43% 57%,transparent 57%),
    linear-gradient(-45deg,transparent 43%,var(--line-strong) 43% 57%,transparent 57%);
  background-size:12px 12px}

/* ── Segmented control (sort, tabs) ───────────────────────────────────────── */
.segmented-bar{display:flex;gap:2px;background:var(--chip);border-radius:var(--pill);padding:3px;font-size:.82rem;white-space:nowrap;flex-shrink:0}
.segmented-bar a,.segmented-bar button{display:inline-flex;align-items:center;justify-content:center;height:32px;padding-inline:16px;border:none;background:none;border-radius:var(--pill);color:var(--muted);font:inherit;cursor:pointer;line-height:1;transition:background .15s ease,color .15s ease}
.segmented-bar a:hover,.segmented-bar button:hover{color:var(--ink)}
.segmented-bar .is-active{background:var(--panel);color:var(--ink);font-weight:500;box-shadow:var(--shadow-1)}

/* Chip row — categories on browse, quick filters on home. */
.chip-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;justify-content:center;height:34px;padding-inline:15px;border:1px solid var(--line-strong);border-radius:var(--pill);font-size:.82rem;color:var(--ink);background:var(--panel);line-height:1;white-space:nowrap;transition:border-color .15s ease,background .15s ease,color .15s ease}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip.is-active{background:var(--ink);border-color:transparent;color:var(--ink-inverse);font-weight:500}
.chip.is-active:hover{color:var(--ink-inverse)}

/* ── Photograph cards ─────────────────────────────────────────────────────── */
/* Two systems share .card: .grid-cards is the even three-up grid on the home page,
   .masonry is the ragged wall used on browse, search and profiles. */
.grid-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.masonry{columns:3 260px;column-gap:16px}
.masonry-lg{columns:4 230px;column-gap:14px}
/* The card is frameless: the photograph is the object and the caption sits beneath it
   on the page ground. The old bordered panel competed with the images inside it. */
.card{display:flex;flex-direction:column;gap:11px;break-inside:avoid;margin-block-end:16px;background:none;border:none;border-radius:0;overflow:visible;box-shadow:none;color:var(--ink)}
.grid-cards .card{margin-block-end:0}
.card img{width:100%;height:auto;border-radius:var(--radius);background:var(--panel-2);transition:opacity .2s ease}
/* The grid variant crops to a common height so a three-up row stays even; masonry keeps
   each photograph's native proportions. */
.grid-cards .card img{height:clamp(200px,22vw,290px);object-fit:cover}
.card:hover img{opacity:.92}
.card-strip{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:0;border:none}
.card-title{font-size:.9rem;font-weight:500;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.card-meta{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.05em;color:var(--faint);text-transform:uppercase;white-space:nowrap}
[dir="rtl"] .card-meta{letter-spacing:0;text-transform:none;font-family:var(--font-body)}
/* Stacking title over meta reads better than side by side inside a narrow column. */
.masonry .card-strip,.masonry-lg .card-strip{flex-direction:column;gap:3px}

/* ── Dark call-to-action plate (the Flow banner) ──────────────────────────── */
.flow-banner{margin:0 16px;border:none;background:none}
.flow-banner-inner{display:flex;align-items:center;justify-content:space-between;gap:36px;flex-wrap:wrap;padding:clamp(30px,4vw,44px);background:var(--ink);color:var(--ink-inverse);border-radius:var(--radius-lg)}
.flow-banner-inner h2{color:var(--ink-inverse);font-size:clamp(1.4rem,2.8vw,2rem)}
.flow-banner-inner p{color:#a2a2a8;margin-block-start:8px;max-width:52ch;font-size:.95rem}

/* ── Category tiles ───────────────────────────────────────────────────────── */
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.cat-tile{position:relative;height:120px;border-radius:var(--radius);overflow:hidden;background:var(--panel-2);border:none;display:flex;align-items:flex-end;box-shadow:none}
.cat-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.cat-tile:hover img{transform:scale(1.04)}
.cat-tile::after{content:"";position:absolute;z-index:1;inset-inline:0;bottom:0;height:70%;background:linear-gradient(to top,rgba(0,0,0,.6),transparent)}
.cat-tile span{position:relative;z-index:2;width:100%;padding:14px 16px;font-weight:500;font-size:.94rem;color:#fff}

.filter-bar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-block-end:24px}

/* ── Form controls ────────────────────────────────────────────────────────── */
select,input[type="text"],input[type="search"],input[type="email"],input[type="tel"],input[type="password"],input[type="url"],textarea{background:var(--panel);border:1px solid var(--line-input);border-radius:var(--radius-sm);color:var(--ink);padding:12px 14px;font-family:var(--font-body);font-size:.9rem;width:100%;transition:border-color .15s ease,box-shadow .15s ease}
input[type="file"]{background:var(--panel);border:1px solid var(--line-input);border-radius:var(--radius-sm);color:var(--ink);padding:11px 14px;font-family:var(--font-body);font-size:.9rem;width:100%}
/* The native select arrow varies wildly between platforms; this draws one that matches
   the rest of the controls. The SVG is inline so it costs no request. */
select{width:auto;cursor:pointer;padding-inline-end:34px;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23a5a59f' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;background-size:11px}
[dir="rtl"] select{background-position:left 13px center}
input:focus,textarea:focus,select:focus{border-color:var(--ink);outline:none;box-shadow:0 0 0 3px rgba(19,19,22,.06)}
input:disabled{opacity:.55;cursor:not-allowed;background:var(--panel-2)}
textarea{resize:vertical}
::placeholder{color:var(--fainter)}

.pager{display:flex;align-items:center;justify-content:center;gap:18px;margin-block-start:36px}
.pager-info{font-family:var(--font-mono);font-size:.75rem;color:var(--faint)}

/* ── Single photograph ────────────────────────────────────────────────────── */
/* The photograph sits on a dark plate so it reads at full contrast; the catalogue
   metadata runs down a fixed rail beside it. */
.photo-bar{display:flex;align-items:center;justify-content:space-between;gap:12px 16px;flex-wrap:wrap;padding-block:16px;border-block-end:1px solid var(--line)}
.photo-bar-back{font-size:.875rem;color:var(--muted);white-space:nowrap}
.photo-bar-back:hover{color:var(--ink)}
.photo-bar-actions{display:flex;align-items:center;gap:9px;flex-shrink:0}
.photo-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:0;border-block-end:1px solid var(--line)}
.photo-stage{background:var(--ink);border:none;border-radius:0;overflow:hidden;margin:0;box-shadow:none;padding:clamp(16px,3vw,40px);display:flex;align-items:center;justify-content:center;min-height:420px}
.photo-stage img{width:auto;max-width:100%;max-height:70vh;height:auto;border-radius:4px}
.photo-rail{padding-block:34px;padding-inline-start:32px;display:flex;flex-direction:column;gap:26px;min-width:0}
.photo-head{display:flex;flex-direction:column;gap:10px}
.photo-head h1{font-size:clamp(1.35rem,2.4vw,1.65rem);letter-spacing:-.03em;line-height:1.15;margin:0}
.photo-desc{color:var(--muted);font-size:.875rem;line-height:1.6;white-space:pre-line;margin:0;max-width:none}
.photo-byline{display:flex;align-items:center;gap:12px;padding:13px 14px;background:var(--panel-2);border-radius:var(--radius)}
.photo-byline .avatar{width:38px;height:38px;flex-shrink:0}
.photo-byline-main{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.photo-byline-main strong{font-size:.875rem;font-weight:500;color:var(--ink)}
/* Detail rows — the catalogue card. A border on the top of every row plus one closing
   border underneath reads as a ruled table without needing a wrapper element. */
.photo-details{display:flex;flex-direction:column}
.photo-details dl{display:flex;flex-direction:column}
.photo-details .label-mono{padding-block-end:10px}
.photo-detail{display:flex;justify-content:space-between;gap:16px;padding-block:11px;border-block-start:1px solid var(--line);font-size:.82rem}
.photo-detail:last-child{border-block-end:1px solid var(--line)}
.photo-detail dt{color:var(--faint)}
.photo-detail dd{font-weight:500;color:var(--ink);text-align:end}
.photo-detail a:hover{color:var(--brick)}
.photo-more{display:flex;flex-direction:column;gap:12px}
.photo-more-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.photo-more-grid img{width:100%;height:80px;object-fit:cover;border-radius:var(--radius-xs);background:var(--panel-2);transition:opacity .2s ease}
.photo-more-grid a:hover img{opacity:.9}
.photo-strip{display:flex;gap:18px;padding:0;border:none;flex-wrap:wrap;color:var(--faint);font-size:.8rem}
.photo-strip a:hover{color:var(--brick)}
.photo-byline a{color:var(--ink)}
.more-head{margin-block-start:44px}
.like-btn{background:var(--panel);border:1px solid var(--line-strong);color:var(--ink)}
.like-btn:hover{border-color:var(--red);color:var(--red)}
.like-btn.is-liked{background:rgba(180,52,42,.07);border-color:var(--red);color:var(--red)}

/* ── Photographer profile ─────────────────────────────────────────────────── */
/* A cover photograph, then the avatar pulled up over its lower edge.
   Only the AVATAR rises into the cover. Lifting the whole row instead put the display
   name across the cover's bottom edge, where it sat half on the photograph and half on
   the page — unreadable against a light sky. The row now starts below the cover and the
   avatar alone carries a negative top margin.
   Why this cannot collide again: with align-items:flex-end a negative top margin only
   shrinks what the avatar contributes to the line height, never where the text starts.
   The text is laid out from the line's top edge downward, so it stays on the page no
   matter how long the name is or how the avatar is sized. */
.profile-cover{position:relative;height:200px;background:var(--panel-2);overflow:hidden}
.profile-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.profile-head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap;padding-block-start:14px;position:relative;z-index:1}
.profile-identity{display:flex;align-items:flex-end;gap:20px;min-width:0}
.profile-identity .avatar{width:96px;height:96px;border:4px solid var(--paper);flex-shrink:0;margin-block-start:-58px}
.profile-main{display:flex;flex-direction:column;gap:5px;min-width:0}
.profile-main h1{font-size:clamp(1.5rem,3vw,1.9rem);margin:0}
.profile-username{margin:0}
.profile-actions{display:flex;align-items:center;gap:9px;padding-block-end:6px}
.profile-meta{display:flex;gap:36px;align-items:flex-start;flex-wrap:wrap;padding-block-start:24px}
.profile-bio{max-width:52ch;margin:0;color:var(--muted);font-size:.9rem;line-height:1.65}
.profile-links{display:flex;gap:8px;flex-wrap:wrap;margin-block-start:12px}
.profile-links a{color:var(--ink);font-size:.8rem;border:1px solid var(--line-strong);border-radius:var(--pill);padding:6px 14px;background:var(--panel)}
.profile-links a:hover{border-color:var(--ink)}
.profile-stats{display:flex;gap:32px;margin-inline-start:auto}
.profile-stats dt{font-family:var(--font-display);font-size:1.35rem;font-weight:500;letter-spacing:-.02em;color:var(--ink)}
.profile-stats dd{font-family:var(--font-mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.12em;color:var(--faint)}
[dir="rtl"] .profile-stats dd{letter-spacing:0;text-transform:none;font-family:var(--font-body)}
.profile-tabs{display:flex;gap:26px;border-block-end:1px solid var(--line);font-size:.875rem;color:var(--faint);margin-block:30px 24px}
.profile-tabs span{padding-block-end:12px;border-block-end:2px solid var(--ink);color:var(--ink);font-weight:500}

.search-bar{display:flex;gap:10px;margin-block:20px 8px}
.search-h{margin-block:34px 16px}
.user-list{display:flex;flex-direction:column;gap:8px}
.user-row{display:flex;gap:14px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:13px 16px;box-shadow:none;transition:border-color .15s ease}
.user-row:hover{border-color:var(--line-strong)}
.user-row-main{display:flex;flex-direction:column;gap:2px}
.user-row-main strong{font-size:.9rem;font-weight:500;color:var(--ink)}

/* ── Forms ────────────────────────────────────────────────────────────────── */
.form{display:flex;flex-direction:column;gap:18px;margin-block-start:22px}
.field{display:flex;flex-direction:column;gap:7px}
/* Field labels use the same mono caps as the catalogue rows — that repetition is what
   ties the forms to the rest of the system. RTL keeps a plain bold label instead. */
.field>span,.field>legend{font-family:var(--font-mono);font-size:.63rem;letter-spacing:.14em;text-transform:uppercase;font-weight:400;color:var(--faint)}
[dir="rtl"] .field>span,[dir="rtl"] .field>legend{letter-spacing:0;text-transform:none;font-family:var(--font-body);font-size:.8rem;font-weight:600;color:var(--ink)}
.field small{color:var(--faint);font-size:.76rem}
.field-radio{border:none;display:flex;gap:22px;flex-wrap:wrap}
.field-radio legend{margin-block-end:8px}
.field-radio label{display:flex;gap:8px;align-items:center;font-size:.9rem;cursor:pointer}
input[type="radio"],input[type="checkbox"]{accent-color:var(--ink)}
.pw-wrap{position:relative;display:flex}
.pw-wrap input{padding-inline-end:46px}
/* Edge/Chromium draws its own reveal eye inside password fields; hide it so ours is
   the only one. Scoped to .pw-wrap so fields without a custom toggle keep the native
   one, and narrow enough not to touch password-manager or strong-password buttons. */
.pw-wrap input::-ms-reveal,
.pw-wrap input::-ms-clear{display:none;width:0;height:0}
.pw-toggle{position:absolute;inset-inline-end:4px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0;background:none;border:none;border-radius:var(--radius-xs);color:var(--fainter);cursor:pointer;transition:color .15s,background .15s}
.pw-toggle:hover{color:var(--ink);background:var(--panel-2)}
.pw-toggle:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.pw-toggle svg{width:19px;height:19px;display:block}
.pw-toggle .icon-hide{display:none}
.pw-toggle.is-on .icon-show{display:none}
.pw-toggle.is-on .icon-hide{display:block}
.pw-feedback{min-height:1.1em}
.pw-feedback.is-ok{color:#3f6330}
.pw-feedback.is-bad{color:#9c2c23}
.field-segmented{border:none;padding:0;margin:0}
.field-segmented legend{margin-block-end:8px}
.segmented{display:flex;gap:2px;background:var(--chip);border:none;border-radius:var(--pill);padding:3px}
.segmented .segment{flex:1;margin:0;cursor:pointer;position:relative}
.segmented .segment input{position:absolute;opacity:0;width:0;height:0}
.segmented .segment span{display:flex;align-items:center;justify-content:center;height:34px;text-align:center;border-radius:var(--pill);font-size:.84rem;font-weight:400;color:var(--muted);transition:background .15s,color .15s,box-shadow .15s}
.segmented .segment input:checked+span{background:var(--panel);color:var(--ink);font-weight:500;box-shadow:var(--shadow-1)}
.segmented .segment input:focus-visible+span{outline:2px solid var(--ink);outline-offset:2px}
.form-links{margin-block-start:18px;color:var(--faint);font-size:.85rem}
.form-links a{color:var(--brick);font-weight:500}
.form-inline{flex-direction:row;flex-wrap:wrap;align-items:center}
.form-inline input{width:auto;flex:1;min-width:160px}
.otp-input{font-size:1.6rem !important;letter-spacing:.5em;text-align:center;direction:ltr !important;unicode-bidi:isolate;text-indent:.5em}
.pending-tag{color:var(--brick)}
/* Consent / notice block beside a form. */
.form-note{display:flex;gap:11px;padding:14px;background:var(--panel-2);border-radius:var(--radius);font-size:.82rem;line-height:1.55;color:var(--text)}
.form-note a{color:var(--brick);font-weight:500}
.form-foot{font-size:.76rem;line-height:1.55;color:var(--faint);text-align:center;margin-block-start:18px}
.form-foot a{color:var(--brick)}
.form-divider{display:flex;align-items:center;gap:12px;margin-block:20px}
.form-divider::before,.form-divider::after{content:"";flex:1;height:1px;background:var(--line-strong)}

/* ── Split auth screen ────────────────────────────────────────────────────── */
/* A real photograph beside the form answers the trust question. It collapses to a
   single column well before the form itself gets cramped. */
.auth-split{display:grid;grid-template-columns:1fr 1fr;min-height:calc(100vh - var(--header-h) - 1px)}
.auth-art{position:relative;background:var(--panel-2);overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:36px}
.auth-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.auth-art-card{position:relative;padding:20px 24px;background:rgba(var(--paper-rgb),.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:var(--radius);max-width:340px;display:flex;flex-direction:column;gap:7px}
.auth-art-card strong{font-size:.94rem;font-weight:500;color:var(--ink)}
.auth-form{display:flex;align-items:center;justify-content:center;padding:clamp(28px,5vw,48px)}
.auth-form-inner{width:100%;max-width:380px}
.auth-form-inner h1{font-size:clamp(1.5rem,3vw,1.75rem);line-height:1.15}
.auth-tabs{margin-block-end:22px}
.auth-tabs a{flex:1}

/* ── Upload ───────────────────────────────────────────────────────────────── */
.upload-layout{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:28px;align-items:start}
.upload-col{display:flex;flex-direction:column;gap:14px}
/* The label wraps the file input so a click anywhere in the zone opens the picker; the
   input is visually hidden but stays in the tab order and in the submitted form. */
.dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;text-align:center;height:clamp(260px,34vw,400px);padding:24px;border:1.5px dashed var(--line-dash);border-radius:var(--radius-lg);background:var(--panel-2);cursor:pointer;transition:border-color .15s ease,background .15s ease}
.dropzone:hover{border-color:var(--faint)}
.dropzone.is-dragover{border-color:var(--ink);background:var(--panel)}
.dropzone input[type="file"]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.dropzone-icon{width:44px;height:44px;border-radius:50%;background:var(--line-strong);display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:1rem}
.dropzone-title{font-size:1.05rem;font-weight:500;color:var(--ink)}
.dropzone-hint{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
[dir="rtl"] .dropzone-hint{letter-spacing:0;text-transform:none;font-family:var(--font-body);font-size:.78rem}
.dropzone-btn{display:inline-flex;align-items:center;height:36px;padding-inline:18px;margin-block-start:4px;border:1px solid var(--line-dash);background:var(--paper);border-radius:var(--pill);font-size:.82rem;font-weight:500;color:var(--ink)}
.dropzone:hover .dropzone-btn{border-color:var(--faint)}

/* Upload preview and progress. Both set a display, so each needs its own [hidden]
   rule — a bare display value beats the UA's [hidden]{display:none}. */
.upload-preview{display:flex;gap:14px;align-items:flex-start;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:12px;box-shadow:none}
.upload-preview[hidden]{display:none}
.upload-preview img{width:88px;height:88px;flex-shrink:0;object-fit:cover;border-radius:var(--radius-sm);background:var(--panel-2)}
.upload-file-meta{display:flex;flex-direction:column;gap:4px;min-width:0}
.upload-file-meta strong{font-size:.875rem;font-weight:500;color:var(--ink);overflow-wrap:anywhere}
.upload-file-meta .link-btn{align-self:start;margin-block-start:2px}
.upload-error{color:#9c2c23;font-size:.84rem}
.upload-progress{display:flex;flex-direction:column;gap:7px}
.upload-progress[hidden]{display:none}
.upload-track{height:8px;border-radius:99px;background:var(--line);overflow:hidden}
/* Width, not transform: the bar then grows from the inline start in both directions. */
.upload-track span{display:block;width:0;height:100%;border-radius:99px;background:var(--ink);transition:width .18s ease}

.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-block-start:24px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px;box-shadow:none}
.panel-wide{grid-column:1/-1}
.panel-sub{margin-block-start:32px;margin-block-end:6px;font-family:var(--font-display);font-weight:600;color:var(--ink)}
.avatar-row{display:flex;gap:18px;align-items:center}
.avatar-row .field{flex:1}
.session-list{display:flex;flex-direction:column;gap:8px;margin-block-start:16px}
.session-row{display:flex;justify-content:space-between;align-items:center;gap:16px;background:var(--panel-2);border:none;border-radius:var(--radius);padding:13px 16px}
.session-info{display:flex;flex-direction:column;gap:2px;font-size:.82rem;min-width:0}
.session-info span{color:var(--faint);overflow:hidden;text-overflow:ellipsis}

/* ── Flow ─────────────────────────────────────────────────────────────────── */
/* The flow feed stays dark on purpose — photos read best against black, and the
   overlay chrome is built for it. Text colour must be set here, not inherited. */
/* z-index is load-bearing: the footer is positioned and sits after main in the DOM, so
   without this it paints over the overlay. It must stay under the header's 50 — the
   feed starts below the header to leave it visible. */
.flow{position:fixed;inset:0;top:var(--header-h);z-index:40;overflow-y:scroll;scroll-snap-type:y mandatory;background:#0b0b0c;color:#fbfbfa;overscroll-behavior:contain;scrollbar-width:none;-ms-overflow-style:none}
.flow::-webkit-scrollbar{width:0;height:0;display:none}
.flow-loading{color:rgba(255,255,255,.45);display:flex;align-items:center;justify-content:center;height:100%;font-family:var(--font-mono);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase}
.flow-item{position:relative;height:100%;scroll-snap-align:start;scroll-snap-stop:always;display:flex;align-items:center;justify-content:center;overflow:hidden}
.flow-img{max-width:100%;max-height:100%;object-fit:contain}
/* The like button sits where the iPhone home indicator does; the inset lifts it clear. */
.flow-overlay{position:absolute;inset-inline:0;bottom:0;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding:28px;padding-block-end:max(28px,env(safe-area-inset-bottom));background:linear-gradient(transparent,rgba(11,11,12,.8))}
.flow-info{display:flex;flex-direction:column;gap:6px;min-width:0}
.flow-title{font-size:clamp(1.15rem,2.4vw,1.6rem);font-family:var(--font-display);font-weight:500;letter-spacing:-.03em;color:#fff}
.flow-author{color:#c8c8cc;font-size:.82rem}
.flow-author:hover{color:#fff}
.flow-location{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:#7a7a80}
[dir="rtl"] .flow-location{letter-spacing:0;text-transform:none;font-family:var(--font-body)}
.flow-actions{display:flex;flex-direction:column;gap:10px;align-items:center;flex-shrink:0}
.flow-like{background:rgba(251,251,250,.1);border:1px solid rgba(251,251,250,.22);border-radius:50%;width:52px;height:52px;color:#fff;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:1.05rem;transition:transform .12s ease,background .15s ease}
.flow-like:hover{background:rgba(251,251,250,.18)}
.flow-like:active{transform:scale(1.18)}
.flow-like.is-liked{color:#ff6b5a;border-color:#ff6b5a}
.flow-like-count{font-size:.6rem;font-family:var(--font-mono)}
.flow-open{background:rgba(251,251,250,.1);border:1px solid rgba(251,251,250,.22);border-radius:50%;width:44px;height:44px;color:#fff;display:flex;align-items:center;justify-content:center;font-size:1rem}
.flow-open:hover{background:rgba(251,251,250,.18);color:#fff}
.flow-item-end{flex-direction:column;gap:20px;color:rgba(255,255,255,.6)}

/* ── Admin ────────────────────────────────────────────────────────────────── */
.admin-nav{display:flex;gap:8px;flex-wrap:wrap;margin-block:20px 32px}
.admin-nav a{background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--pill);padding:9px 18px;font-size:.85rem;display:flex;gap:8px;align-items:center;box-shadow:none}
.admin-nav a:hover{border-color:var(--ink);color:var(--ink)}
.badge{background:var(--ink);color:var(--ink-inverse);border-radius:var(--pill);padding:1px 9px;font-size:.68rem;font-weight:500;font-family:var(--font-mono)}
.admin-stats{margin-block-start:10px}
/* min() caps the track at the container width — a bare minmax(340px,…) forces a 340px
   column inside a 320px phone and pushes the whole page sideways. */
.review-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr));gap:18px}
.review-grid-sm{grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr))}
.review-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:none}
.review-card>a img{width:100%;max-height:320px;object-fit:cover}
.review-avatar{width:140px;height:140px;border-radius:50%;object-fit:cover;margin:20px auto 0}
.review-body{padding:14px 16px;display:flex;flex-direction:column;gap:6px;font-size:.875rem}
.review-actions{display:flex;gap:10px;margin-block-start:10px}
.table-wrap{overflow-x:auto;margin-block-start:20px}
.admin-table{width:100%;border-collapse:collapse;font-size:.84rem}
.admin-table th,.admin-table td{padding:10px 12px;border-block-end:1px solid var(--line);text-align:start;white-space:nowrap}
.admin-table th{font-family:var(--font-mono);font-size:.63rem;text-transform:uppercase;letter-spacing:.12em;color:var(--faint)}
.msg-row p{white-space:pre-line;color:var(--text);margin-block-start:6px}

.prose h2{margin-block:30px 10px;font-size:1.3rem}
.prose p{margin-block-end:14px;color:var(--text);max-width:72ch}
.prose a{color:var(--brick);font-weight:500}
.prose ul{margin:0 0 14px;padding-inline-start:22px;color:var(--text);max-width:72ch}
.prose li{margin-block-end:7px}
.prose .updated{font-family:var(--font-mono);font-size:.72rem;color:var(--faint)}
.err-code{font-size:3.4rem;font-family:var(--font-display);font-weight:500;letter-spacing:-.04em;color:var(--ink);margin-block-end:8px}

/* ── Footer ───────────────────────────────────────────────────────────────── */
.site-footer{position:relative;border-block-start:1px solid var(--line);margin-block-start:60px;background:var(--paper)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;padding-block:44px}
.footer-brand p{color:var(--faint);font-size:.82rem;line-height:1.6;margin-block-start:10px;max-width:32ch}
.logo-footer{font-size:1rem}
.footer-h{font-family:var(--font-mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.14em;color:var(--fainter);margin-block-end:12px;font-weight:400}
[dir="rtl"] .footer-h{letter-spacing:0;text-transform:none;font-family:var(--font-body);font-size:.78rem}
.footer-grid a{display:block;color:var(--muted);font-size:.82rem;padding-block:4px}
.footer-grid a:hover{color:var(--ink)}
.footer-bottom{border-block-start:1px solid var(--line);padding-block:18px;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.04em;color:var(--fainter)}
[dir="rtl"] .footer-bottom{letter-spacing:0;font-family:var(--font-body);font-size:.78rem}

@media (max-width:1020px){
  /* The photo rail and the upload sidebar both stop fitting here; they stack instead. */
  .photo-layout{grid-template-columns:1fr}
  .photo-rail{padding-block:28px 34px;padding-inline-start:0}
  .upload-layout{grid-template-columns:1fr}
  .auth-split{grid-template-columns:1fr;min-height:0}
  .auth-art{height:200px;padding:20px}
  .auth-art-card{padding:14px 18px}
  /* The header runs out of room here: logo, three nav pills, the search pill, the
     language switch and two buttons no longer fit on one line. The search pill is the
     one that goes — the nav already carries a Search link, while the language switch
     has nowhere else to live until the layout drops to two rows at 560. */
  .header-search{display:none}
}
@media (max-width:860px){
  /* The header stops fitting on one line here: logo, three section links, the language
     switch and two buttons need roughly 700px of the 828px a tablet offers once the
     nav pills are counted, and the last button starts clipping. The nav drops to a
     second row. The height stays FIXED rather than auto because it feeds --header-h,
     which positions the .flow overlay — an auto height would drift and leave a black
     gap under the header. align-content centres the rows inside it, so the exact
     content height does not matter, only that the container matches the variable. */
  :root{--header-h:92px}
  .header-inner{flex-wrap:wrap;align-content:center;column-gap:10px;row-gap:0}
  .logo{order:1}
  .header-actions{order:2;margin-inline-start:auto;gap:10px}
  .main-nav{order:3;flex:0 0 100%;gap:2px;padding-block-start:4px}

  .settings-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px}
  .grid-cards{grid-template-columns:repeat(2,1fr);gap:16px}
  .profile-stats{margin-inline-start:0}
  /* iOS Safari zooms the whole page when a focused field is under 16px, and never zooms
     back out. This is the entire reason for the exact value — do not round it down. */
  select,input[type="text"],input[type="search"],input[type="email"],input[type="tel"],
  input[type="password"],input[type="url"],input[type="file"],textarea{font-size:16px}
  .section-head{flex-wrap:wrap}
}
@media (max-width:560px){
  /* On a phone even the two-row header is tight, so the language switch goes too. The
     footer has no switcher, but /en, /ku and /ar remain reachable as plain URLs and the
     choice is remembered in a cookie once made. */
  .header-inner{column-gap:8px}
  .logo{font-size:.95rem}
  .header-actions{gap:8px}
  .nav-link{font-size:.8rem;height:30px;padding-inline:12px}
  .lang-switch{display:none}

  .wrap{padding-inline:16px}
  .hero{padding:12px}
  .hero-stats{padding-inline:16px}
  .grid-cards{grid-template-columns:1fr;gap:20px}
  .grid-cards .card img{height:auto;aspect-ratio:4/3}
  .masonry,.masonry-lg{columns:2 140px;column-gap:10px}
  .card{margin-block-end:10px;gap:8px}
  .masonry .card-title,.masonry-lg .card-title{font-size:.8rem}
  .section{padding-block:32px}
  .cat-grid{grid-template-columns:1fr 1fr;gap:10px}
  .cat-tile{height:100px}
  .flow-banner{margin-inline:12px}
  .footer-grid{grid-template-columns:1fr;gap:22px;padding-block:34px}
  .profile-cover{height:150px}
  /* A smaller avatar needs a smaller lift to keep the same proportion of it on the
     cover; the name is unaffected either way. */
  .profile-identity .avatar{width:76px;height:76px;margin-block-start:-46px}
  .profile-head{gap:16px}
  .profile-actions{padding-block-end:0}
  .photo-stage{min-height:0;padding:12px}
  .photo-stage img{max-height:60vh}

  /* Comfortable touch targets: these are all well under 44px at desktop sizing. */
  .btn-sm{height:38px;padding-inline:16px}
  .user-menu-drop a,.user-menu-drop button{padding:12px}
  .footer-grid a{padding-block:9px}
  .profile-links a{padding:9px 16px}
  .upload-preview img{width:72px;height:72px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
}