/*
Theme Name: The Right Room
Theme URI: https://intherightroom.com/
Author: AXX Data Ltd
Author URI: https://www.axxdata.com/
Description: Single-page brand theme for The Right Room, the conference-sponsorship discovery service of AXX Data Ltd. Self-contained: self-hosted fonts, no front-end JavaScript, no tracking. Front-page copy is editable under Appearance - Customize - The Right Room copy.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary
License URI: https://intherightroom.com/site-terms/
Text Domain: the-right-room
Tags: one-column, custom-colors, custom-menu, editor-style
*/

/* ============================================================
   THE RIGHT ROOM
   A warm, evening-reception palette: dark ground, a single
   brass accent standing in for the light of the room you want
   to be inside. Type rule: Fraunces (serif) makes the claims,
   Hanken Grotesk (sans) carries the reading, IBM Plex Mono
   labels and counts.
   ============================================================ */

:root{
  --ink:        #15120D;   /* page ground, warm near-black */
  --ink-2:      #1C1811;   /* raised surface (the shortlist plate) */
  --ink-3:      #242019;   /* borders on hover */
  --line:       rgba(239,231,216,0.10);
  --line-strong:rgba(239,231,216,0.16);
  --paper:      #EFE7D8;   /* primary text, warm ivory, never #fff */
  --muted:      #A69C86;   /* secondary text */
  --muted-dim:  #7C755F;   /* legal / captions */
  --brass:      #D8A54B;   /* accent */
  --brass-2:    #E7BC6B;   /* accent, lifted (links, italics) */
  --brass-soft: rgba(216,165,75,0.14);

  --wrap: 1080px;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:  "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body{
  margin: 0;
  background-color: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.08rem);
  line-height: 1.62;
  font-weight: 400;
  letter-spacing: 0.002em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Warm ambient light, like a doorway spilling into a dark room.
   Fixed, so it stays put as the page scrolls. No image, no stock. */
body::before{
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(60% 45% at 88% -5%, rgba(216,165,75,0.10), transparent 70%),
    radial-gradient(50% 40% at -5% 8%, rgba(216,165,75,0.05), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.wrap{
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
  position: relative;
  z-index: 1;
}

a{ color: inherit; }
::selection{ background: var(--brass); color: var(--ink); }
:focus-visible{ outline: 2px solid var(--brass); outline-offset: 3px; border-radius: 2px; }

.screen-reader-text{
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.eyebrow{
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass);
  display: inline-block;
}

/* ---------- top bar ---------- */
.bar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: clamp(1.4rem, 3vh, 2rem);
  position: relative;
  z-index: 2;
}
.brand{ display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.brand svg{ display: block; flex: none; }
.brand .name{ font-size: 1.02rem; font-weight: 600; letter-spacing: 0.01em; color: var(--paper); }
.brand .name .the{ color: var(--muted); font-weight: 500; margin-right: 0.28em; }

.bar-cta{
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.55rem 1rem;
  white-space: nowrap;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.bar-cta:hover{ border-color: var(--brass); color: var(--brass-2); }
@media (max-width: 560px){ .bar-cta{ display: none; } }

/* ---------- hero ---------- */
.hero{ padding: clamp(3.2rem, 7vh, 6rem) 0 clamp(3rem, 6vh, 5rem); }
.hero-grid{
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (max-width: 900px){ .hero-grid{ grid-template-columns: 1fr; gap: 2.75rem; } }

h1.thesis{
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2.35rem, 1.4rem + 3.4vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin: 1.1rem 0 0;
  max-width: 15ch;
  color: var(--paper);
  text-wrap: balance;
}
h1.thesis em{ font-style: italic; font-weight: 500; color: var(--brass-2); }

.lead{
  color: var(--muted);
  font-size: clamp(1.08rem, 1rem + 0.5vw, 1.28rem);
  line-height: 1.6;
  margin: 1.5rem 0 0;
  max-width: 52ch;
}
.lead strong{ color: var(--paper); font-weight: 600; }

.hero-actions{ margin-top: 2rem; display: flex; align-items: center; gap: 1.3rem; flex-wrap: wrap; }

.btn{
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: var(--brass);
  color: #1a1509;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.005em;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  padding: 0.85rem 1.4rem;
  border-radius: 8px;
  transition: transform .18s ease, background .18s ease;
  box-shadow: 0 1px 0 rgba(255,255,255,0.14) inset, 0 10px 30px -12px rgba(216,165,75,0.6);
}
.btn:hover{ background: var(--brass-2); transform: translateY(-1px); }
.btn svg{ transition: transform .18s ease; }
.btn:hover svg{ transform: translateX(3px); }

.inline-mail{
  color: var(--muted);
  text-decoration: none;
  font-size: 0.97rem;
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 1px;
  transition: color .2s ease, border-color .2s ease;
}
.inline-mail:hover{ color: var(--paper); border-color: var(--brass); }

/* ---------- shortlist plate (the signature) ---------- */
.panel{
  background: linear-gradient(180deg, var(--ink-2), #181410);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  padding: 1.15rem 1.15rem 1.25rem;
  box-shadow: 0 40px 80px -40px rgba(0,0,0,0.8), 0 0 0 1px rgba(216,165,75,0.04);
  position: relative;
}
.panel-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.2rem 0.35rem 0.9rem;
  border-bottom: 1px solid var(--line);
}
.panel-head .tag{
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted-dim);
}
.panel-head .ctx{
  font-size: 0.82rem;
  color: var(--muted);
  text-align: right;
  max-width: 22ch;
  line-height: 1.35;
}
.row{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem 1rem;
  align-items: center;
  padding: 0.85rem 0.35rem;
  border-bottom: 1px solid var(--line);
}
.row:last-of-type{ border-bottom: 0; }
.row .conf{ font-weight: 600; font-size: 0.98rem; letter-spacing: 0.005em; color: var(--paper); }
.row .meta{ grid-column: 1; color: var(--muted); font-size: 0.8rem; margin-top: 0.15rem; }

.match{
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4rem;
  min-width: 96px;
}
.match .num{ font-family: var(--mono); font-size: 0.92rem; font-weight: 500; color: var(--brass-2); letter-spacing: 0.02em; }
.match .num span{ color: var(--muted-dim); font-size: 0.72rem; }

.meter{ width: 88px; height: 4px; border-radius: 999px; background: rgba(239,231,216,0.09); overflow: hidden; }
.meter-fill{
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brass), var(--brass-2));
  transform-origin: left center;
  /* width is set inline per row; animation is layered on below,
     under prefers-reduced-motion: no-preference. */
}

.panel-foot{
  padding: 0.9rem 0.35rem 0.15rem;
  color: var(--muted-dim);
  font-size: 0.76rem;
  line-height: 1.45;
  border-top: 1px solid var(--line);
  margin: 0.2rem 0 0;
}

/* ---------- generic content section ---------- */
section.block{ padding: clamp(3.5rem, 8vh, 6rem) 0; border-top: 1px solid var(--line); }
.block-head{ max-width: 60ch; }

h2{
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.7rem, 1.2rem + 1.9vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0.9rem 0 0;
  color: var(--paper);
  text-wrap: balance;
}
h2 em{ font-style: italic; font-weight: 500; color: var(--brass-2); }

/* steps: a genuine sequence, so numbered markers earn their place */
.steps{ display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); margin-top: clamp(2.2rem, 4vw, 3.2rem); }
@media (max-width: 760px){ .steps{ grid-template-columns: 1fr; gap: 1.6rem; } }
.step{ padding-top: 1.2rem; border-top: 1px solid var(--line-strong); }
.step .idx{ font-family: var(--mono); font-size: 0.8rem; color: var(--brass); letter-spacing: 0.1em; }
.step h3{ font-family: var(--sans); font-weight: 600; font-size: 1.12rem; margin: 0.7rem 0 0.5rem; letter-spacing: 0.005em; color: var(--paper); }
.step p{ color: var(--muted); margin: 0; font-size: 0.98rem; line-height: 1.58; }

/* value points */
.points{ display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 3rem); margin-top: clamp(2.2rem, 4vw, 3.2rem); }
@media (max-width: 760px){ .points{ grid-template-columns: 1fr; gap: 2rem; } }
.point h3{ font-family: var(--serif); font-weight: 600; font-size: 1.28rem; line-height: 1.2; margin: 0 0 0.6rem; letter-spacing: -0.005em; color: var(--paper); }
.point p{ color: var(--muted); margin: 0; font-size: 0.99rem; line-height: 1.6; }

/* who it's for */
.who{ max-width: 70ch; }
.who p{
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.12rem, 1rem + 0.6vw, 1.4rem);
  line-height: 1.55;
  letter-spacing: -0.003em;
  color: var(--paper);
  margin: 0.9rem 0 0;
}
.who p .dim{ color: var(--muted); }

/* contact */
.contact{ padding: clamp(4rem, 9vh, 7rem) 0; border-top: 1px solid var(--line); text-align: center; }
.contact h2{ margin-inline: auto; max-width: 18ch; }
.contact .section-intro{ color: var(--muted); margin: 1.1rem auto 0; max-width: 46ch; font-size: 1.05rem; }
.contact .cta-wrap{ margin-top: 2.2rem; display: flex; justify-content: center; }
.contact-mail{
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1rem + 0.9vw, 1.6rem);
  color: var(--brass-2);
  text-decoration: none;
  border-bottom: 1px solid rgba(216,165,75,0.4);
  padding-bottom: 0.25rem;
  transition: border-color .2s ease, color .2s ease;
}
.contact-mail:hover{ color: var(--paper); border-color: var(--paper); }

/* ---------- footer: the credibility layer ---------- */
footer.foot{ border-top: 1px solid var(--line); padding: 2.5rem 0 3rem; color: var(--muted-dim); }
.foot-top{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.foot-brand{ color: var(--muted); font-size: 0.95rem; }
.foot-brand a{ color: var(--paper); text-decoration: none; border-bottom: 1px solid var(--line-strong); transition: border-color .3s ease; }
.foot-brand a:hover{ border-color: var(--brass); }

.ledger{ display: flex; flex-wrap: wrap; gap: 1.4rem; margin: 0; padding: 0; list-style: none; font-size: 0.85rem; }
.ledger li{ display: inline; }
.ledger a{ color: var(--muted); text-decoration: none; transition: color .3s ease; }
.ledger a:hover{ color: var(--paper); }

.foot-legal{ margin-top: 1.4rem; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--muted-dim); }
.foot-legal .sep{ padding: 0 0.4rem; opacity: 0.5; }

/* ---------- inner pages: site terms, privacy, 404 ---------- */
.prose{
  max-width: 42rem;
  padding: clamp(3rem, 9vh, 5.5rem) 0 clamp(3rem, 8vh, 5rem);
  font-size: 0.99rem;
  line-height: 1.75;
  color: var(--muted);
}
.prose-title{
  margin: 0 0 clamp(1.75rem, 4vh, 2.5rem);
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.7rem, 3.6vw, 2.4rem);
  line-height: 1.15;
  letter-spacing: -0.012em;
  color: var(--paper);
  text-wrap: balance;
}
.prose h2, .prose h3{ font-family: var(--serif); font-weight: 600; line-height: 1.25; color: var(--paper); margin: 2.2em 0 0.7em; letter-spacing: -0.005em; }
.prose h2{ font-size: 1.35rem; }
.prose h3{ font-size: 1.1rem; }
.prose p, .prose li{ color: var(--muted); }
.prose p{ margin: 0 0 1.4em; }
.prose ul, .prose ol{ margin: 0 0 1.4em; padding-left: 1.3em; }
.prose li{ margin-bottom: 0.5em; }
.prose li::marker{ color: var(--brass); }
.prose a{ color: var(--paper); text-decoration: none; border-bottom: 1px solid rgba(216,165,75,0.45); transition: border-color .3s ease; }
.prose a:hover{ border-bottom-color: var(--brass); }
.prose strong{ color: var(--paper); font-weight: 600; }
.prose blockquote{ margin: 2em 0; padding-left: 1.4em; border-left: 2px solid var(--line-strong); font-family: var(--serif); font-style: italic; color: var(--paper); }
.prose hr{ height: 1px; margin: 2.5em 0; background: var(--line); border: 0; }
.prose img{ max-width: 100%; height: auto; border-radius: 8px; }
.prose code{ font-family: var(--mono); font-size: 0.88em; background: var(--ink-2); padding: 0.12em 0.4em; border-radius: 4px; }
.prose table{ width: 100%; border-collapse: collapse; margin: 0 0 1.4em; font-size: 0.92rem; }
.prose th, .prose td{ padding: 0.6em 0.9em 0.6em 0; text-align: left; border-bottom: 1px solid var(--line); }
.prose th{ color: var(--paper); font-weight: 600; }

.inner-back{ margin-top: 1.5rem; }

/* ---------- the one moment of motion ----------
   The page assembles once, then holds still. Written as progressive
   enhancement: the resting state is fully visible, and the animation
   is layered on only where motion is welcome, so a blocked or failed
   animation can never leave the page blank. Only the fold animates;
   sections below simply are, and the meters sweep in behind them. */
@keyframes rise{
  from{ opacity: 0; transform: translateY(12px); }
  to  { opacity: 1; transform: translateY(0); }
}
@keyframes draw{
  from{ transform: scaleX(0); }
  to  { transform: scaleX(1); }
}

@media (prefers-reduced-motion: no-preference){
  .reveal{ opacity: 0; animation: rise .8s cubic-bezier(.22,.61,.36,1) both; }
  .reveal.d1{ animation-delay: .07s; }
  .reveal.d2{ animation-delay: .15s; }
  .reveal.d3{ animation-delay: .24s; }
  .reveal.d4{ animation-delay: .32s; }

  .meter-fill{ transform: scaleX(0); animation: draw 1s cubic-bezier(.22,.61,.36,1) both; }
}

/* ---------- small screens ---------- */
@media (max-width: 30rem){
  .foot-legal{ line-height: 1.9; }
  .panel-head{ flex-direction: column; gap: 0.35rem; }
  .panel-head .ctx{ text-align: left; max-width: none; }
}

/* ---------- logged-in admin bar ----------
   Core injects a fixed admin bar and `html { margin-top: 32px }` on the
   front end. This page scrolls normally, so nothing needs re-centring;
   the only nicety is keeping the fixed ambient layer clear of the bar so
   it never bleeds over it. Visible to logged-in users only. */
@media screen{
  body.admin-bar::before{ top: 32px; }
}
@media screen and (max-width: 782px){
  body.admin-bar::before{ top: 46px; }
}