/* The studio's frame, shared by every page of every project: the fonts, the colour tokens, the
   bar and the foot. Carried over from the static site's assets/site.css, direction C "Ink". A
   project's own look (nard's jadval, hokm's coffeehouse) is a theme of its own inside this. */

@font-face{
  font-family:Spectral;
  src:url("fonts/Spectral.ttf") format("truetype");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:Spectral;
  src:url("fonts/Spectral-Italic.ttf") format("truetype");
  font-weight:400;font-style:italic;font-display:swap;
}
/* Vazirmatn covers the Arabic script only. Spectral has no Arabic, so a Persian letter falls
   through to Vazirmatn and a Latin word inside a Persian sentence stays in Spectral. */
@font-face{
  font-family:Vazirmatn;
  src:url("fonts/vazirmatn-arabic-400-normal.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC;
}
@font-face{
  font-family:Vazirmatn;
  src:url("fonts/vazirmatn-arabic-500-normal.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC;
}

/* dark is the default; :root[data-theme="light"] below overrides it */
:root{
  --bg:#0c0c0c;
  --ink:#ece7df;
  --dim:#8a8378;
  --line:rgba(236,231,223,.14);
  --accent:#c8912f;
  --gold:#c8912f;
  --rubric:#b6472f;
  --glow:rgba(200,145,47,.20);
  --glow-soft:rgba(200,145,47,.05);
  --plate:#15130f;
}

:root[data-theme="light"]{
  --bg:#f4f5f7;
  --ink:#14110e;
  --dim:#6b6357;
  --line:rgba(20,17,14,.16);
  --accent:#9b6f1c;
  --gold:#c8912f;
  --rubric:#9d3421;
  --glow:rgba(200,145,47,.26);
  --glow-soft:rgba(200,145,47,.07);
  --plate:#ece7dc;
}

*{box-sizing:border-box}

/* clip rather than hidden, so nothing here can ever turn into a sideways scroll on a phone */
html{height:100%;overflow-x:clip}

body{
  margin:0;min-height:100%;
  background:var(--bg);color:var(--ink);
  font-family:Spectral,Vazirmatn,Georgia,"Times New Roman",serif;
  font-size:18px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;
  overflow-x:hidden;
  transition:background .35s ease,color .35s ease;
}
/* The Arabic script sits taller and needs the air between lines. */
:root[dir="rtl"] body{line-height:2}

.preview{
  padding:8px clamp(20px,5vw,56px);
  background:var(--rubric);color:#f6efe4;
  font-size:14px;text-align:center;
}

.bar{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:18px clamp(20px,5vw,56px);
  border-bottom:1px solid var(--line);
  font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--dim);
}
.bar a{color:inherit;text-decoration:none;transition:color .2s}
.bar a:hover,.bar a:focus-visible{color:var(--accent)}
.bar .right{display:flex;align-items:center;gap:clamp(14px,3vw,28px)}
.bar .tongues{display:flex;gap:14px}
/* Tracked capitals are a Latin habit. Arabic letters are joined, and spacing them breaks them. */
.bar [lang="fa"],:root[dir="rtl"] .bar,:root[dir="rtl"] .themer,:root[dir="rtl"] footer{
  letter-spacing:0;text-transform:none;font-size:14px;
}
.bar [dir="ltr"]{letter-spacing:.28em}

.themer{
  appearance:none;border:1px solid var(--line);background:transparent;
  color:var(--dim);font:inherit;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  padding:7px 12px;border-radius:1px;cursor:pointer;
  transition:color .2s,border-color .2s;
}
.themer:hover,.themer:focus-visible{color:var(--accent);border-color:var(--accent)}

footer{
  padding:20px clamp(20px,5vw,56px);
  border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--dim);
}
footer a{color:inherit;text-decoration:none;transition:color .2s}
footer a:hover,footer a:focus-visible{color:var(--accent)}

@media (max-width:820px){
  .bar{font-size:10px;letter-spacing:.18em;flex-wrap:wrap}
}

/* A name in the running text: every name that is a thing in a game is a link to its own page.
   Not a blue underline; it sits in the sentence as a name and only admits to being a door when
   the pointer is on it. */
a.n{
  color:inherit;text-decoration:none;
  border-bottom:1px solid rgba(200,145,47,.45);
  transition:color .2s ease,border-color .2s ease;
}
a.n:hover,a.n:focus-visible{color:var(--accent);border-color:var(--accent)}

/* ---- the studio's page ---------------------------------------------------------------- */

.stage{
  flex:1;min-height:72vh;display:grid;align-items:center;
  grid-template-columns:1.1fr .9fr;
  gap:clamp(30px,5vw,64px);
  width:100%;max-width:1220px;margin:0 auto;
  padding:clamp(48px,8vw,96px) clamp(20px,5vw,56px);
}

h1{
  margin:0;font-weight:400;
  font-size:clamp(46px,10.5vw,104px);
  line-height:.96;letter-spacing:-.015em;
}
h1 span{display:block}
h1 .b{color:var(--accent)}
/* The wordmark is Latin in every language, so it keeps its own side of the page. */
:root[dir="rtl"] h1{text-align:right}

.tag{margin:28px 0 0;max-width:24ch;font-size:clamp(18px,2.4vw,24px);font-style:italic}
:root[dir="rtl"] .tag{font-style:normal;max-width:30ch}

.rule{margin:38px 0;width:100%;max-width:420px;height:1px;background:var(--line)}

p.body{margin:0;max-width:52ch;color:var(--dim);font-size:16px}
p.body + p.body{margin-top:1.1em}
:root[dir="rtl"] p.body{font-size:17px}

p.body em{color:var(--ink)}
:root[dir="rtl"] p.body em{font-style:normal}

/* every project, then the studio's other entries */
.meta{margin-top:40px;display:flex;flex-wrap:wrap;gap:18px 40px;align-items:baseline}
.meta .k{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
:root[dir="rtl"] .meta .k{letter-spacing:0;text-transform:none;font-size:14px}
.meta a{
  color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--line);padding-bottom:2px;
  transition:color .2s,border-color .2s;
}
.meta a:hover,.meta a:focus-visible{color:var(--accent);border-color:var(--accent)}
.meta .soon small{display:block;color:var(--dim);font-size:13px;letter-spacing:0;text-transform:none}
:root[dir="rtl"] .meta .soon small{font-size:14px}

/* ---- the mark: it burns when you ask ---- */

.markwrap{position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer}
.markwrap::before{
  content:"";position:absolute;width:112%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side, var(--glow), var(--glow-soft) 55%, transparent 78%);
  filter:blur(6px);opacity:.25;transition:opacity .5s ease;
}
.markwrap.live::before{opacity:.8}
/* while it burns, the light behind it is the fire's, not the pit's */
.markwrap.burning::before{
  opacity:1;
  background:radial-gradient(closest-side, rgba(255,150,40,.42), rgba(255,90,20,.12) 55%, transparent 78%);
}
.mark{position:relative;width:100%;max-width:430px;height:auto;overflow:visible}

/* two files, one per theme, because each is drawn for its own ground */
:root[data-theme="light"] .lockup.dark{display:none}
:root:not([data-theme="light"]) .lockup.light{display:none}

/* the fire layer and the embers are drawn only while it burns */
.fireart,.embers{opacity:0}
.markwrap.burning .fireart,.markwrap.burning .embers{opacity:1}
.hint{
  position:absolute;bottom:-34px;left:50%;transform:translateX(-50%);
  font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--dim);
  opacity:.55;transition:opacity .35s ease,color .35s ease;
  pointer-events:none;white-space:nowrap;
}
:root[dir="rtl"] .hint{letter-spacing:0;font-size:13px}
.markwrap.live .hint{opacity:1;color:var(--accent)}
.markwrap.burning .hint{opacity:0}

.lost{flex:1;padding:clamp(48px,8vw,96px) clamp(20px,5vw,56px)}
.lost a{color:var(--accent)}

/* An invite to a hokm circle: the code large, one way into the game, one way to copy it. */
.invite{flex:1;padding:clamp(48px,8vw,96px) clamp(20px,5vw,56px)}
.invite-label{margin:36px 0 4px;color:var(--dim)}
.invite-code{margin:0;font-size:clamp(44px,9vw,80px);letter-spacing:.14em;color:var(--gold)}
:root[dir="rtl"] .invite-code{text-align:right}
.invite-ways{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 10px}
.invite-open,.invite-copy{padding:12px 22px;border:1px solid var(--accent);border-radius:10px;font:inherit;cursor:pointer;text-decoration:none}
.invite-open{background:var(--accent);color:var(--bg)}
.invite-copy{background:none;color:var(--accent)}
.invite-how{color:var(--dim);max-width:44ch}
.invite-new{margin-top:40px}
.invite-new a{color:var(--accent)}

@media (max-width:820px){
  .stage{grid-template-columns:1fr;padding-top:36px}
  /* The hint leaves its absolute place here and becomes a second item in this row, so the
     row has to wrap or the hint is pushed off the side of the phone. */
  .markwrap{order:-1;justify-content:flex-start;flex-wrap:wrap}
  .mark{max-width:300px}
  .hint{position:static;transform:none;display:block;width:100%;margin-top:14px;white-space:normal}
  p.body,.tag{max-width:none}
}

@media (prefers-reduced-motion:no-preference){
  .stage > *{animation:rise .8s ease-out both}
  .stage > *:last-child{animation-delay:.1s}
  @keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
}

/* The legal pages (Site/Legal.cs): plain reading, a heading a part, a line length to read at. */
.paper{flex:1;padding:clamp(48px,8vw,96px) clamp(20px,5vw,56px);max-width:72ch}
.paper h1{font-size:clamp(40px,7vw,72px)}
.paper h2{margin:2.2em 0 .6em;font-weight:400;font-size:clamp(20px,2.6vw,26px);color:var(--gold)}
.paper p,.paper li{color:var(--dim);font-size:16px;line-height:1.65}
:root[dir="rtl"] .paper p,:root[dir="rtl"] .paper li{font-size:17px;line-height:1.9}
.paper p{margin:0 0 1em}
.paper ul{margin:0 0 1em;padding-inline-start:1.2em}
.paper li + li{margin-top:.5em}
.paper-changed{margin-top:1.2em !important;font-size:13px !important}
.paper-opening{color:var(--ink) !important;font-size:18px !important}
.foot-ways{display:flex;gap:20px;flex-wrap:wrap}
/* The company's own lines, as the law asks, on a line of their own under the rest of the foot. */
.foot-company{flex-basis:100%;letter-spacing:.08em;text-transform:none;font-size:11px;opacity:.8}

/* Deleting an account (Goud.Accounts/LEAVING.md): a paper with one form on it. */
.leave-form{display:flex;flex-direction:column;gap:10px;max-width:34ch;margin:18px 0 8px}
.leave-form label{color:var(--dim);font-size:14px}
.leave-form input[type="email"],.leave-form input[type="text"]{padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--plate);color:var(--ink);font:inherit;font-size:18px}
.leave-form input:focus{outline:2px solid var(--accent);outline-offset:1px}
.leave-form button{align-self:flex-start;padding:12px 22px;border:1px solid var(--accent);border-radius:10px;background:var(--accent);color:var(--bg);font:inherit;cursor:pointer}
.leave-form .leave-go{border-color:var(--rubric);background:var(--rubric);color:#fff}
.leave-wrong{color:var(--rubric) !important}
.leave a{color:var(--accent)}