/* Aroub Soubh — chapters 02-07. Loaded after art.css: same paper, same sheets, same hairline rules, her dots as the only ornament.
   Photographs are shown as she supplied them, whole, never cropped: every grid keeps each picture's own proportions. */
.chapter main{padding-top:var(--hb)}
.head{padding:clamp(48px,8vw,120px) var(--pad) clamp(28px,4vw,56px);max-width:1500px;margin:0 auto}
.head h1{font-size:clamp(46px,7.4vw,124px);max-width:15ch}
.head h1 em,.band h2 em,.split h2 em{font-weight:540}
html[dir=rtl] .head h1 em,html[dir=rtl] h2 em{font-style:normal}
/* client, 2026-09-20 night: "everything is written in black" — colour carries the emphasis her italics already mark, everywhere.
   client, 2026-09-21 night: cobalt dropped ("I don't want blue"), then --heart dropped too ("the pink doesn't match her vibe") —
   settled on --eye, her own watercolour green from the cursor and entrance tint. */
main h1 em,main h2 em{color:inherit}
.head .intro{font-size:clamp(20px,1.7vw,24px);max-width:52ch;margin-top:26px}
.band,.split,.pair{padding:clamp(40px,6vw,96px) var(--pad);max-width:1500px;margin:0 auto}
.band+.band,.split+.band,.band+.split{border-top:1px solid var(--rule)}
.band h2,.split h2{font-size:clamp(34px,4.2vw,64px);max-width:20ch}
.band .sub{margin-bottom:clamp(24px,3vw,44px)}
.quiet{background:var(--cream);max-width:none}
.quiet>*{max-width:1324px;margin-inline:auto}

/* photographs on paper */
.ph{margin:0}
.ph .sheet{position:relative;background:#fff;outline:1px solid var(--rule);outline-offset:-1px}
.ph img{width:100%;height:auto}
/* client, 2026-09-21 night: every photograph sits on its own paper mat, closed by a hairline — her real signature
   rests tilted on the paper below it, as she'd sign a print by hand. client, same night, later: the eye+signature
   pairing was reverted ("that's not what I asked") — her signature alone is the credit, nothing paired with it. */
.ph .sheet{padding-bottom:clamp(40px,10%,56px)}
.ph .sheet::before{content:'';position:absolute;left:0;right:0;bottom:clamp(40px,10%,56px);height:1px;background:var(--rule)}
.ph .sheet::after{content:'Aroub Soubh';position:absolute;left:16px;bottom:14px;font:600 16px/1 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);direction:ltr;pointer-events:none}
.ph figcaption{font-size:17px;line-height:1.45;color:var(--muted);margin-top:14px;max-width:40ch}
.ph figcaption b{display:block;color:var(--ink);font-weight:600}
html[dir=rtl] .ph figcaption{font-size:18px}
.two,.three,.four,.pair{display:grid;gap:clamp(18px,2.6vw,44px);align-items:start}
.two,.pair{grid-template-columns:repeat(2,minmax(0,1fr))}
.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.pair{grid-template-columns:1.25fr 1fr;padding-top:0;align-items:end}
.three .ph:nth-child(2),.four .ph:nth-child(even),.seq li:nth-child(even){margin-top:clamp(16px,3vw,48px)}
.two .ph:nth-child(1) .sheet,.three .ph:nth-child(3n+1) .sheet,.four .ph:nth-child(4n+1) .sheet{transform:rotate(-.8deg)}
.three .ph:nth-child(3n) .sheet,.four .ph:nth-child(4n+3) .sheet,.two .ph:nth-child(2) .sheet{transform:rotate(.7deg)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,6vw,110px);align-items:center}
.split.text-first{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
.split.floor{grid-template-columns:minmax(0,.8fr) minmax(0,1fr)}
.split p{max-width:52ch;margin:20px 0 0}
blockquote{margin:36px 0;padding:0}
blockquote p{font-family:var(--display);font-size:clamp(26px,2.6vw,38px);line-height:1.2;font-variation-settings:"SOFT" 100,"opsz" 96;max-width:24ch;margin:0}
html[dir=rtl] blockquote p{font-family:var(--ar-display);line-height:1.5}
blockquote cite{display:block;font-style:normal;font-size:17px;color:var(--muted);margin-top:14px}
.memoir{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,64px)}
.memoir h2{font-size:clamp(28px,2.6vw,40px)}
.memoir p{margin:18px 0 0;max-width:44ch}

/* from life to paper: a sequence on her string */
.seq{list-style:none;margin:0;padding:22px 0 0;display:grid;gap:clamp(16px,2.2vw,36px);position:relative;align-items:start}
.seq::before{content:"";position:absolute;inset:0 -2vw auto -2vw;height:1.5px;background:var(--ink);opacity:.8}
.seq.n3{grid-template-columns:repeat(3,minmax(0,1fr))}.seq.n4{grid-template-columns:repeat(4,minmax(0,1fr))}.seq.n5{grid-template-columns:repeat(5,minmax(0,1fr))}.seq.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.seq li{position:relative}
.seq li::before{content:"";position:absolute;top:-30px;inset-inline-start:50%;width:12px;height:26px;margin-inline-start:-6px;border-radius:3px;background:var(--heart);z-index:2}
.seq li:nth-child(even)::after{content:"";position:absolute;top:calc(-1*clamp(16px,3vw,48px) - 22px);inset-inline-start:50%;width:1.5px;height:calc(clamp(16px,3vw,48px) + 22px);background:var(--ink);opacity:.5}
.seq li:nth-child(odd) .sheet{transform:rotate(-1deg)}.seq li:nth-child(even) .sheet{transform:rotate(.9deg)}

/* one video on its own, after the homes wall: constrained and centred, not full-band width */
.homefilm .film{max-width:520px;margin:0 auto}
/* films: she presses play, nothing plays alone */
.films{display:grid;gap:clamp(18px,2.4vw,40px);list-style:none;margin:0;padding:0;align-items:start}
.films.two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:980px}.films.three{grid-template-columns:repeat(3,minmax(0,1fr))}.films.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.film{margin:0}
.film video{display:block;width:100%;height:auto;background:#fff;box-shadow:0 1px 2px rgba(20,20,20,.08),0 18px 40px -18px rgba(20,20,20,.28)}
.film figcaption{font-size:17px;color:var(--muted);margin-top:14px;line-height:1.45}
.film figcaption b{display:block;color:var(--ink)}
.split .film{max-width:420px;justify-self:center;width:100%}

/* made for you: a ledger, not cards */
.offers{list-style:none;margin:0;padding:0;border-top:1.5px solid var(--ink)}
.offers li{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto;gap:16px 40px;align-items:center;padding:26px 0;border-bottom:1px solid var(--rule)}
.o-name b{display:block;font-family:var(--display);font-weight:560;font-size:clamp(28px,2.6vw,40px);line-height:1.1;font-variation-settings:"SOFT" 100,"opsz" 96}
html[dir=rtl] .o-name b{font-family:var(--ar-display);line-height:1.4}
.o-name span{display:block;color:var(--muted);margin-top:6px;max-width:44ch}
.o-price{font-size:19px;font-variant-numeric:tabular-nums}.o-price span,.o-price small{color:var(--muted);font-size:16px}
.o-add{display:flex;gap:10px}
.add.ghost{background:#fff;color:var(--ink)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,48px);counter-reset:s}
.steps li{counter-increment:s;border-top:1.5px solid var(--ink);padding-top:18px}
.steps li::before{content:"0" counter(s);font-size:16px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.steps h3{font-family:var(--display);font-weight:560;font-size:30px;line-height:1.1;margin:8px 0 10px;font-variation-settings:"SOFT" 100}
html[dir=rtl] .steps h3{font-family:var(--ar-display);line-height:1.4}
.steps p{margin:0;color:var(--muted)}
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 28px;max-width:920px}
.form label{display:block;font-size:17px;font-weight:600}
html[dir=rtl] .form label{font-size:18px}
.form .wide,.form .check,.form .go{grid-column:1/-1}
.form input:not([type=checkbox]),.form select,.form textarea,.brief-out textarea{display:block;width:100%;margin-top:8px;min-height:54px;padding:12px 16px;border:1.5px solid var(--ink);border-radius:10px;background:#fff;color:var(--ink);font:400 18px/1.5 var(--text)}
html[dir=rtl] .form input,html[dir=rtl] .form select,html[dir=rtl] .form textarea,html[dir=rtl] .brief-out textarea{font-family:var(--ar-text)}
.form .check{display:flex;align-items:center;gap:12px;font-weight:400;min-height:44px}
.form .check input{width:22px;height:22px;flex:none}
.form .go{justify-self:start;cursor:pointer}
.brief-out{max-width:920px;margin-top:32px;padding-top:28px;border-top:1px solid var(--rule)}
.brief-out .ready{font-weight:600;margin:0 0 12px}
.send{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.terms{margin:0;border-top:1.5px solid var(--ink)}
.terms div{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:8px 40px;padding:20px 0;border-bottom:1px solid var(--rule)}
.terms dt{font-weight:600}.terms dd{margin:0;max-width:70ch;color:var(--muted)}

/* making together: seven tables, one open at a time */
.groups{border-top:1.5px solid var(--ink)}
.groups details{border-bottom:1px solid var(--rule)}
.groups summary{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) 28px;gap:12px 40px;align-items:baseline;padding:24px 0;cursor:pointer;list-style:none}
.groups summary::-webkit-details-marker{display:none}
.groups summary::after{content:"";width:14px;height:14px;border-inline-end:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg);justify-self:end;transition:transform .3s var(--out)}
.groups details[open] summary::after{transform:rotate(-135deg)}
.groups .t{font-family:var(--display);font-weight:560;font-size:clamp(26px,2.4vw,36px);line-height:1.15;font-variation-settings:"SOFT" 100,"opsz" 96}
html[dir=rtl] .groups .t{font-family:var(--ar-display);line-height:1.45}
.groups .l{color:var(--muted)}
.groups details>.three{padding:8px 0 48px}

/* the earlier chapters */
.panels{display:grid;gap:clamp(40px,6vw,88px)}
.panels article{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(28px,5vw,88px);align-items:center}
.panels article:nth-child(even) .ph{order:2}
.panels p{max-width:50ch;margin:18px 0 0}
.record section{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:0 40px;border-top:1.5px solid var(--ink);padding:24px 0 12px}
.record h3{font-family:var(--display);font-weight:560;font-size:30px;line-height:1.15;margin:0;font-variation-settings:"SOFT" 100}
html[dir=rtl] .record h3{font-family:var(--ar-display);line-height:1.45}
.record dl{margin:0}
.record dl div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:0 24px;padding:0 0 18px}
.record dt{font-weight:600;font-variant-numeric:tabular-nums}.record dd{margin:0;max-width:72ch}
.record+.go{margin-top:28px}

/* onward */
.next{display:flex;flex-wrap:wrap;gap:0;border-top:1.5px solid var(--ink);margin:clamp(24px,4vw,64px) var(--pad) clamp(48px,6vw,96px)}
.next a{flex:1 1 280px;display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:96px;padding:20px 4px;border-bottom:1px solid var(--rule);text-decoration:none;font-family:var(--display);font-weight:560;font-size:clamp(26px,2.4vw,36px);font-variation-settings:"SOFT" 100,"opsz" 96}
html[dir=rtl] .next a{font-family:var(--ar-display)}
.next a+a{border-inline-start:1px solid var(--rule);padding-inline-start:28px}
.next a:hover{text-decoration:underline;text-decoration-thickness:3px}
html[dir=rtl] .arw{transform:scaleX(-1)}
.chapter .toast{inset-block-end:24px}

@media (max-width:900px),(max-aspect-ratio:5/4){
  .head h1{font-size:clamp(42px,12vw,64px)}
  .two,.three,.four,.pair,.split,.split.text-first,.split.floor,.memoir,.panels article,.films.two,.films.three{grid-template-columns:minmax(0,1fr)}
  .four,.films.four,.seq.n3,.seq.n4,.seq.n5,.seq.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .three .ph:nth-child(2){margin-top:0}
  .panels article:nth-child(even) .ph{order:0}
  .offers li{grid-template-columns:minmax(0,1fr)}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .form{grid-template-columns:minmax(0,1fr)}
  .form .go{justify-self:stretch}
  .terms div,.record section,.groups summary{grid-template-columns:minmax(0,1fr)}
  .groups summary{grid-template-columns:minmax(0,1fr) 28px}.groups .l{grid-column:1}.groups summary::after{grid-column:2;grid-row:1}
  .record dl div{grid-template-columns:72px minmax(0,1fr);gap:0 16px}
  .record h3{margin-bottom:16px}
  .next a+a{border-inline-start:0;padding-inline-start:4px}
  .ph figcaption,.film figcaption{font-size:16px}
  html[dir=rtl] .ph figcaption{font-size:17px}
}
@media (prefers-reduced-motion:reduce){.groups summary::after{transition:none}}

/* spacing under a heading that has no sub line; the story opens on one wide landscape */
.band h2+:not(.sub):not(p),.band .sub+.fine+*{margin-top:clamp(28px,3.4vw,52px)}
.band>.fine{margin-bottom:0}
.pair.solo{grid-template-columns:minmax(0,1fr);max-width:1100px}

/* tall archive pictures (a phone capture, a poster) stay whole but never taller than the screen */
.panels .ph .sheet{width:fit-content;max-width:100%;margin-inline:auto}
.panels .ph img{width:auto;max-width:100%;max-height:min(78vh,760px)}

/* a link that leaves the site (her programme on Jordan TV's YouTube archive) */
.panels .go.out{margin-top:26px}

/* a wall of her photographs: columns keep every picture whole and in its own proportions */
.wall-ph{columns:4;column-gap:clamp(14px,1.8vw,30px);margin-top:clamp(28px,3.4vw,52px)}
.wall-ph .ph{break-inside:avoid;margin:0 0 clamp(14px,1.8vw,30px)}
.wall-ph .ph:nth-child(3n+1) .sheet{transform:rotate(-.6deg)}.wall-ph .ph:nth-child(4n+2) .sheet{transform:rotate(.5deg)}
.wallband+.wallband{border-top:0;padding-top:0}
.pair .ph:nth-child(2) .sheet{transform:rotate(1deg)}
@media (max-width:1100px){.wall-ph{columns:3}}
@media (max-width:900px),(max-aspect-ratio:5/4){.wall-ph{columns:2}.pair{grid-template-columns:minmax(0,1fr)}}

/* The Lens in three boxes (client, 2026-09-21): a row of three dots jumps to Seasons, Flowers, Water */
.lensnav{display:flex;flex-wrap:wrap;gap:8px 30px;padding:6px var(--pad) 0;max-width:1500px;margin:0 auto}
.lensnav a{display:inline-flex;align-items:center;gap:12px;min-height:48px;text-decoration:none;font:600 clamp(24px,2.2vw,34px)/1 var(--display)}
html[dir=rtl] .lensnav a{font-family:var(--ar-display);font-weight:700}
.lensnav i{width:.62em;height:.62em;border-radius:52% 48% 55% 45%/48% 55% 45% 52%;background:var(--c);transition:transform .45s cubic-bezier(.3,1.5,.5,1)}
.lensnav a:hover i,.lensnav a:focus-visible i{transform:scale(1.5)}
.lensbox{scroll-margin-top:calc(var(--hb) + 12px)}

/* the dotting mark (client, 2026-09-21): her whole site speaks in her own dot language — crisp, flat, no gradient, no shadow. */
.dm{display:inline-flex;align-items:center;gap:.22em;vertical-align:.06em;margin-inline-end:.24em}
.dm i{width:.16em;height:.16em;border-radius:50%;flex:none;display:block}
h1.d .dm i,h2.d .dm i{width:.13em;height:.13em}
.dm i:nth-child(1){background:#E9314F}.dm i:nth-child(2){background:#FEDF52}.dm i:nth-child(3){background:#0B4EAA}
html[dir=rtl] .dm{margin-inline-end:0;margin-inline-start:.24em}
.dotrule{display:flex;align-items:center;justify-content:center;gap:14px;margin:clamp(40px,6vh,80px) 0}
.dotrule i{width:7px;height:7px;border-radius:50%;display:block}
.dotrule i:nth-child(1){background:#E9314F}.dotrule i:nth-child(2){background:#FEDF52}.dotrule i:nth-child(3){background:#0B4EAA}

.bgdots{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;display:none}
@media (min-width:1300px){.bgdots{display:block}}

/* the AROUB SOUBH credit belongs on a large single photo, not repeated across a dense grid of postage-stamp thumbnails */
.wall-ph .ph .sheet,.jgrid .j .sheet,.groups .three .ph .sheet{padding-bottom:0}
.wall-ph .ph .sheet::before,.jgrid .j .sheet::before,.groups .three .ph .sheet::before,
.wall-ph .ph .sheet::after,.jgrid .j .sheet::after,.groups .three .ph .sheet::after{content:none}

/* studio-quiet: the studio credit stays small (Hala 17 Oct) */
.studio img{width:56px!important}.studio b{font-size:16px!important;font-weight:500!important}.studio .s-line{display:none}
@media (max-width:640px){.studio img{width:44px!important}}