/* ============================================================
   quiet.css: the quiet pages (owner, 2026-11-08 / 2026-11-10).
   Loaded by every page after site.css and room.css.
   A plain blush wall, the words first (a Rakkas headline and one
   line), fewer and larger objects, wine carrying the weight.
   No stripes, no strings, no nails, no hanging signs, no figure.
   Colours: site.css tokens only.
   ============================================================ */

.site-quiet main{display:block}
.site-quiet main:focus{outline:none}

/* ---------- the words: a headline, one line, the buttons ---------- */
.q-words{position:relative;z-index:2;max-width:980px;margin:0 auto;padding:clamp(40px,6vw,76px) var(--gut) clamp(20px,3vw,36px);text-align:center}
.q-h{margin:0;font-family:var(--d-ar);font-weight:400;color:var(--ink);font-size:clamp(2.125rem,4.6vw,4.125rem);line-height:1.35;text-wrap:balance}
.q-h span{display:block}
:lang(en) .q-h{font-family:var(--d-en);font-style:italic;font-feature-settings:normal;line-height:1.15;letter-spacing:-.005em;font-size:clamp(2.125rem,4.4vw,3.875rem)}
.q-lede{margin:18px auto 0;max-width:36ch;font-family:var(--r-ar);font-size:clamp(1.125rem,1.6vw,1.375rem);line-height:1.7;color:var(--copy);text-wrap:balance}
:lang(en) .q-lede{font-family:var(--r-en);font-size:clamp(1.1875rem,1.7vw,1.4375rem);line-height:1.5}
.q-acts{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px 20px;margin-top:28px}
.q-btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;min-width:150px;padding:0 34px;border-radius:999px;border:0;cursor:pointer;
  background:var(--btn);color:var(--btn-ink);font-family:var(--d-ar);font-size:1.375rem;line-height:1;text-decoration:none;touch-action:manipulation;
  transition:background-color .18s ease,transform .12s cubic-bezier(.23,1,.32,1)}
:lang(en) .q-btn{font-family:var(--sm);font-size:1.0625rem;letter-spacing:.02em}
.q-btn:active{transform:scale(.97)}
.q-btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media (hover:hover) and (pointer:fine){.q-btn:hover{background:var(--btn-hover);color:var(--btn-ink)}}
/* the quieter second way: an underlined line, still a 44px target */
.q-link{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;font-family:var(--r-ar);font-size:1.1875rem;line-height:1;color:var(--magenta-text);
  text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:7px}
:lang(en) .q-link{font-family:var(--r-en)}
@media (hover:hover) and (pointer:fine){.q-link:hover{text-decoration-thickness:2.5px}}

/* ---------- a panel on the wall: a plain card, no nail, no string ---------- */
.q-panel{position:relative;max-width:var(--panel-w,640px);margin:0 auto;background:var(--panel);border:2px solid var(--panel-line);border-radius:24px;
  padding:clamp(22px,3.4vw,40px)}

/* ---------- a page's own body under the words ---------- */
.q-body{padding:0 var(--gut) clamp(40px,6vw,72px)}

/* ---------- a wine band: the close of a page ---------- */
.q-band{background:var(--band);color:var(--band-ink);text-align:center;padding:clamp(40px,5vw,64px) var(--gut)}
.q-band .q-h{color:var(--band-ink);font-size:clamp(1.75rem,3.4vw,2.875rem)}
.q-band .q-lede{color:var(--band-ink)}
.q-band .q-btn{background:var(--band-btn);color:var(--band-btn-ink)}
.q-band .q-btn:focus-visible{outline-color:var(--band-ink)}
@media (hover:hover) and (pointer:fine){.q-band .q-btn:hover{background:var(--band-btn-hover);color:var(--band-btn-ink)}}

/* ---------- the floor: soft boards under a magenta edge, two wine bags standing on it ---------- */
.q-floorrow{position:relative;height:clamp(92px,11vw,132px);background:var(--floor);border-top:2px solid var(--floor-edge)}
.q-floorrow::before,.q-floor::before{content:"";position:absolute;inset:0;background:var(--floor-line);
  -webkit-mask-image:var(--boards);mask-image:var(--boards);-webkit-mask-size:auto 100%;mask-size:auto 100%;-webkit-mask-repeat:repeat;mask-repeat:repeat}
/* the boards' joints, drawn as a mask (shape only: its colour is var(--floor-line) above) */
.site{--boards:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'360'%20height%3D'180'%3E%3Cg%20stroke%3D'black'%20stroke-width%3D'1.4'%20fill%3D'none'%3E%3Cpath%20d%3D'M0%200V180M60%200V180M120%200V180M180%200V180M240%200V180M300%200V180M0%2060H60M60%20140H120M120%2020H180M180%20110H240M240%20170H300M300%2080H360'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")}
.q-floorrow .q-bags{position:absolute;bottom:clamp(14px,2vw,26px);inset-inline:0;display:flex;align-items:flex-end;justify-content:center;pointer-events:none}
.q-bags svg{display:block;height:auto;overflow:visible}
.q-bags .b1{width:clamp(78px,8.4vw,112px)}
.q-bags .b2{width:clamp(60px,6.4vw,86px);margin-inline-start:calc(-1 * clamp(14px,1.6vw,22px));margin-bottom:-8px}

/* ---------- the wine bag (inline SVG, every page) ---------- */
.bag-front{fill:var(--bag-front);stroke:var(--bag-edge);stroke-width:1.6;stroke-linejoin:round}
.bag-side{fill:var(--bag-side);stroke:var(--bag-edge);stroke-width:1.6;stroke-linejoin:round}
.bag-inner{fill:var(--bag-inner);stroke:var(--bag-edge);stroke-width:1.4;stroke-linejoin:round}
.bag-rope{fill:none;stroke:var(--bag-rope);stroke-width:3.4;stroke-linecap:round}
.bag-hole{fill:var(--bag-inner);stroke:var(--bag-edge);stroke-width:1.2}
.bag-word{font-family:var(--d-ar);fill:var(--bag-word)}

/* ---------- phones ---------- */
@media (max-width:760px){
  .q-words{padding:28px 20px 18px}
  .q-h{font-size:clamp(1.875rem,8.6vw,2.5rem);line-height:1.4}
  :lang(en) .q-h{font-size:clamp(2rem,9vw,2.625rem);line-height:1.12}
  .q-lede{margin-top:12px;font-size:1.125rem}
  .q-acts{margin-top:20px;gap:6px 18px}
  .q-btn{min-height:50px;min-width:140px}
  .q-band .q-h{font-size:clamp(1.625rem,7.4vw,2.125rem)}
}

/* ============================================================
   Type (owner font rules, 2026-11-10; TAFSEELA-FONT-RULES-2026-11-10.md).
   Two loud faces at most: the headline face (Rakkas in Arabic, Anton in
   English, never on one line) plus Alexandria for everything small.
   Arabic is never italic and never letter-spaced. Amiri and Crimson Pro
   only on the long reading pages (legal.css). Colours: wine, magenta,
   pink, cream, or their night tokens; never black.
   ============================================================ */
/* Arabic headlines: Rakkas; 1.25 for one line, 1.4 for two (the home headline) */
.site-quiet .q-h{line-height:1.25}
.site-quiet .q-shop .q-h{line-height:1.4}
/* English headlines: Anton, caps, tight, huge */
.site-quiet :lang(en) :is(.q-h,.q-block h2,.piece-h,.fdone h2,.sheet h2){font-family:var(--d-en);font-weight:400;font-style:normal;
  font-feature-settings:normal;text-transform:uppercase;line-height:.98;letter-spacing:0;padding-bottom:0}
.site-quiet :lang(en) .q-h{font-size:clamp(2.75rem,6vw,5.75rem)}
.site-quiet :lang(en) .q-shop .q-h{font-size:clamp(2.875rem,6.4vw,6.25rem)}
.site-quiet :lang(en) .q-band .q-h{font-size:clamp(2.25rem,4.6vw,4.25rem)}
.site-quiet :lang(en) :is(.q-block h2,.sheet h2){font-size:clamp(1.75rem,2.8vw,2.5rem)}
.site-quiet :lang(en) :is(.piece-h,.fdone h2){font-size:clamp(1.875rem,3vw,2.625rem)}
/* everything small: Alexandria. Body 400, sentence case */
.site-quiet :is(.q-lede,.q-block p,.gfoot-tag,.gfoot-links a,.gfoot-biz,.gtabs a,.gsheet a,.fcheck-t,.fdone p,.ticket-open-p,.ct-biz,.atag-wait p,.q-link){font-family:var(--sm);font-weight:400;font-style:normal}
.site-quiet .q-lede{font-size:clamp(1.0625rem,1.4vw,1.25rem);line-height:1.75}
.site-quiet .q-block p{font-size:clamp(1rem,1.25vw,1.125rem);line-height:1.85}
/* buttons and labels: Alexandria 600; in English, caps with open tracking (Latin only) */
.site-quiet :is(.q-btn,.pill){font-family:var(--sm);font-weight:600}
.site-quiet .q-btn{font-size:1.125rem}
.site-quiet :is(.ff > label,.ct-k,.gsheet-foot > span){font-family:var(--sm);font-weight:600}
.site-quiet :lang(en) :is(.q-btn,.pill,.ff > label,.ct-k,.gsheet-foot > span){text-transform:uppercase;letter-spacing:.16em}
.site-quiet :lang(en) .q-btn{font-size:0.9375rem}
.site-quiet :lang(en) .pill{font-size:0.8125rem}
.site-quiet :lang(en) :is(.ff > label,.ct-k,.gsheet-foot > span){font-size:0.8125rem}
@media (max-width:760px){
  .site-quiet :lang(en) .q-h{font-size:clamp(2.5rem,12vw,3.5rem)}
  .site-quiet :lang(en) .q-shop .q-h{font-size:clamp(2.375rem,11.4vw,3.375rem)}
  .site-quiet :lang(en) .q-band .q-h{font-size:clamp(2.125rem,10vw,2.875rem)}
  .site-quiet .q-btn{font-size:1.0625rem}
  .site-quiet :lang(en) .q-btn{font-size:0.875rem;letter-spacing:.12em}
}

/* ---------- print (audit L12): the words only, on white; no bar, no controls, no drawing ---------- */
@media print{
  .gnav,.skip,.q-stage,.q-floorrow,.q-acts,.tfs-curtain,.gfoot-links,.fend,.ts-slot{display:none !important}
  .site.site-room,.site,body{background:var(--white) !important;color:var(--wine)}
  .q-words{padding:0 0 12px}
  .q-panel,.q-block{border:1px solid var(--wine);break-inside:avoid}
  .sheet{border:0;padding:0;width:100%}
  .sheetrow{padding:0}
  .gfoot{box-shadow:none;border-top:1px solid var(--wine);padding:12px 0 0}
  a{color:var(--wine)}
}

/* the big call-to-action pill stays on one line (owner 2026-11-10: «انضمي لمجتمع تفصيلة مجاناً» / "Join the community for free").
   On narrow phones it gets tighter padding and, in English, less tracking; the size follows the browser's text size
   but never grows past what fits the screen (min of rem and vw). Height stays 50px+ (a 44px+ target). */
.site-quiet .q-btn{white-space:nowrap;max-width:100%}
@media (max-width:420px){
  .site-quiet .q-btn{padding-inline:20px;min-width:0;font-size:min(1.0625rem,4.6vw)}
  .site-quiet :lang(en) .q-btn{font-size:min(0.8125rem,3.6vw);letter-spacing:.06em}
}
@media (max-width:340px){
  .site-quiet .q-btn{padding-inline:16px}
  .site-quiet :lang(en) .q-btn{letter-spacing:.03em}
}