/* =============================================================================
   barakahgames.com — /about

   A surface change, not a rewrite. The copy came across almost verbatim from
   the dark /about, which was stronger than anything written to replace it.
   What changed is the ground: white, one forest band, hairline rows,
   terracotta numerals — the devices the rest of the built site uses.

   Chrome and the waitlist come from site.css. Only this page's sections are
   here, so .sec, .note and .links are /about's and cannot reach another page.
   ============================================================================= */

/* The statement carries the largest headline on the site — it is the only
   thing on the screen when the page opens. */
h1{font-size:clamp(2.25rem,5vw,3.75rem)}
h2{font-size:clamp(1.75rem,3.4vw,2.5rem)}
h1,h2{line-height:1.08}

img{display:block}

/* The hand-drawn curve. Product content everywhere else; here it opens and
   closes the brand's own page, which is the one place it belongs without One
   Step Closer around it. */
.line{display:block;width:150px;height:auto;color:var(--s-rule)}

.sec{padding-block:clamp(3.5rem,8vw,6rem);border-top:var(--bg-hairline) solid var(--s-hair)}
.sec-head{display:flex;flex-direction:column;gap:1.125rem;max-width:44rem;
  margin-bottom:clamp(2rem,4vw,3rem)}
.sec-head p{max-width:36rem}

/* ---------- 1 · statement ----------

   THE ALIGNMENT. Everything on this page hangs off one left edge except the
   closing section, which centres — the same rule as /shop. The selector is
   scoped to the child: `.statement div` would also match .wrap, override its
   max-width and auto margins, and break the alignment above 1280px only,
   where there is leftover space for the two to drift apart in. */
.statement{padding-block:clamp(3rem,7vw,5.5rem) clamp(3rem,6vw,4.5rem)}
.statement .wrap > div{display:flex;flex-direction:column;gap:1.5rem;max-width:46rem}
.statement .lede{font-size:clamp(1.0625rem,1.5vw,1.25rem);color:var(--s-ink-2);max-width:36rem}

/* ---------- 2 · the argument — the one forest band ---------- */
.argue{padding-block:clamp(4rem,9vw,6.5rem)}
.argue-in{display:flex;flex-direction:column;gap:1.5rem;max-width:46rem}
.argue .big{font-family:var(--bg-font-display);font-weight:var(--bg-weight-display);
  color:var(--s-ink);font-size:clamp(1.25rem,2.4vw,1.75rem);line-height:1.4;
  max-width:38rem;text-wrap:balance}
.argue p{max-width:38rem}

/* ---------- 3 · who we make for ----------
   The pips take the 365-grid's palette. That is the one visual thread tying
   the brand page to the product, and it is why they are circles. */
.tables{display:flex;gap:clamp(2rem,5vw,4.5rem);flex-wrap:wrap;margin-top:var(--bg-space-xs)}
.table-n{display:flex;flex-direction:column;gap:.875rem}
.pips{display:flex;gap:.4375rem}
.pips i{width:11px;height:11px;border-radius:var(--bg-radius-full);display:block}
.pip-1{background:var(--p-dot-open-book)}
.pip-2{background:var(--p-dot-deen-talk)}
.pip-3{background:var(--p-dot-quick-connect)}
.pip-4{background:var(--p-dot-ramadan)}
.table-n span{font-size:.5625rem;letter-spacing:.28em;text-transform:uppercase;color:var(--s-ink-3)}

/* ---------- 4 · what we hold to ---------- */
.holds{display:flex;flex-direction:column;max-width:60rem}
.hold{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--bg-space-xs) 3rem;
  padding-block:1.75rem;border-bottom:var(--bg-hairline) solid var(--s-hair)}
.hold:first-child{border-top:var(--bg-hairline) solid var(--s-hair)}
@media(min-width:760px){
  .hold{grid-template-columns:minmax(0,20rem) minmax(0,1fr);align-items:baseline}
}
.hold h3{font-family:var(--bg-font-display);font-weight:var(--bg-weight-display);
  font-size:clamp(1.125rem,2vw,1.5rem);color:var(--s-head);margin:0;line-height:1.25}
.hold p{font-size:.9375rem;line-height:1.65;color:var(--s-ink-2);max-width:34rem}

/* ---------- 5 · what we have made ---------- */
.made{display:flex;flex-direction:column;max-width:56rem}
.made-row{display:grid;grid-template-columns:4.5rem minmax(0,1fr);gap:1.25rem;
  align-items:baseline;padding-block:1.5rem;
  border-bottom:var(--bg-hairline) solid var(--s-hair)}
.made-row:first-child{border-top:var(--bg-hairline) solid var(--s-hair)}
.made-row .yr{font-family:var(--bg-font-display);font-weight:var(--bg-weight-display);
  color:var(--s-accent);font-size:.9375rem;font-variant-numeric:tabular-nums}
.made-row h3{font-family:var(--bg-font-display);font-weight:var(--bg-weight-display);
  font-size:1.25rem;color:var(--s-head);margin:0 0 .3125rem;line-height:1.3}
.made-row p{font-size:.9375rem;color:var(--s-ink-2);max-width:34rem}
.made-row a{font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--s-ink-2);text-decoration:none;display:inline-block;margin-top:.625rem}
.made-row a:hover{color:var(--s-head)}
/* The unwritten one is quieter than the shipped one, and says so by weight
   rather than by a label. */
.made-row.next .yr{color:var(--s-ink-3)}
.made-row.next h3{color:var(--s-ink-3);font-size:1.0625rem}

/* ---------- 6 · where it started ---------- */
.started{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2rem,4vw,3.5rem)}
@media(min-width:760px){.started{grid-template-columns:minmax(0,16rem) minmax(0,1fr)}}
.portrait{margin:0;aspect-ratio:4/5;background:var(--s-ground-2);
  border:var(--bg-hairline) solid var(--s-hair);border-radius:var(--bg-radius);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.875rem;text-align:center;padding:1.5rem;overflow:hidden}
.portrait img{width:100%;height:100%;object-fit:cover}
.portrait p{font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--s-ink-2);line-height:2;max-width:none}
.note{display:flex;flex-direction:column;gap:1.125rem;max-width:36rem}
.note .open{font-family:var(--bg-font-display);font-weight:var(--bg-weight-display);
  color:var(--s-ink);font-size:clamp(1.125rem,1.9vw,1.375rem);line-height:1.4}
.note p{font-size:1rem;color:var(--s-ink-2)}
/* A passage still waiting to be written by hand. It is marked so it cannot be
   mistaken for copy, and the section takes itself down at launch if any of
   these are still here. */
.tofill{color:var(--s-accent);border-bottom:1px dotted var(--s-accent);padding-bottom:1px}
.sig{font-family:var(--bg-font-display);font-weight:var(--bg-weight-display);
  font-style:italic;color:var(--s-accent);
  margin-top:var(--bg-space-xs)}
.unfinished{border:1px dashed var(--s-accent);border-radius:var(--bg-radius);
  padding:.75rem 1rem;font-size:.8125rem;color:var(--s-ink-2);
  max-width:46rem;margin-top:2rem;line-height:1.6}

/* ---------- 7 · find us ---------- */
.find{padding-block:clamp(4rem,9vw,6.5rem);
  border-top:var(--bg-hairline) solid var(--s-hair);text-align:center}
.find-in{max-width:40rem;margin-inline:auto;display:flex;flex-direction:column;
  gap:1.375rem;align-items:center}
.find p{margin-inline:auto;max-width:34rem}
.find .pill{margin-top:var(--bg-space-sm)}
.links{display:flex;gap:1.75rem;justify-content:center;margin-top:var(--bg-space-2xs);flex-wrap:wrap}
.links a{font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--s-head);
  text-decoration:none;border-bottom:var(--bg-hairline) solid var(--s-hair);padding-bottom:.375rem;
  transition:border-color var(--bg-motion-duration-fast) var(--bg-motion-ease)}
.links a:hover{border-bottom-color:var(--s-ink-3)}
.promise{font-size:.875rem;color:var(--s-ink-3)}