/*
 * Noaverse Company: the business card as a web page.
 *
 * Desktop geometry is written in card pixels. The reference card
 * (brand/business-card.png) is 1080 × 658, and --u is the size of one card
 * pixel on screen, so every measurement below can be checked against the card.
 * The layout is in normal flow (no absolute positioning of text), so it still
 * holds together if a fallback font is used or the text wraps.
 *
 * After editing this file, bump ?v= in index.html and 404.html:
 * /assets/ is cached for 30 days (see web.config).
 */

/* The card's typeface is Roboto set very narrow. Roboto Condensed is 13–35%
   too wide at the card's letter height, so the site ships Roboto Flex
   (OFL 1.1, see ../fonts/OFL.txt) cut to width 40 / optical size 32, with
   the weight axis kept (200–700) and a latin + Turkish character set. */
@font-face {
  font-family: "Roboto Flex Narrow";
  src: url("../fonts/roboto-flex-narrow.woff2?v=1") format("woff2");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}

/* Fallback metrics matched to the web font's line lengths (Arial Narrow ships
   with macOS and Microsoft Office), so nothing collides while it loads. */
@font-face {
  font-family: "Roboto Flex Narrow Fallback";
  src: local("Arial Narrow"), local("ArialNarrow");
  font-weight: 100 600;
  size-adjust: 80.5%;
  ascent-override: 115.24%;
  descent-override: 30.32%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Roboto Flex Narrow Fallback";
  src: local("Arial Narrow Bold"), local("ArialNarrow-Bold");
  font-weight: 700 900;
  size-adjust: 94.6%;
  ascent-override: 98.07%;
  descent-override: 25.8%;
  line-gap-override: 0%;
}
/* Second fallback for machines without Arial Narrow (Windows without Office,
   Linux): Arial / Liberation Sans shrunk to the same line lengths (Arial Narrow
   is Arial at 82% width), so the address column can't run into the contact
   column while the web font loads or if it is blocked. */
@font-face {
  font-family: "Roboto Flex Narrow Fallback 2";
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans");
  font-weight: 100 600;
  size-adjust: 66%;
  ascent-override: 140.56%;
  descent-override: 36.98%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Roboto Flex Narrow Fallback 2";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold");
  font-weight: 700 900;
  size-adjust: 77.6%;
  ascent-override: 119.55%;
  descent-override: 31.46%;
  line-gap-override: 0%;
}

:root {
  color-scheme: light;

  /* Colours sampled from the card */
  --paper: #ffffff;
  --navy: #15384f;          /* SHILA MARZAEE / CEO (card #1c415b, printed a touch darker) */
  --ink: #15191d;           /* "Noaverse Company" (regular) */
  --text: #2a3036;          /* light info lines: 13.3:1 on white */
  --muted: #5b6671;         /* footer: 5.9:1 on white */
  --bar-gray: #b8b8b8;
  --bar-navy: #1e394e;
  --bar-teal: #20aacc;
  --link-hover: #0a6f8c;    /* dark teal: 5.7:1 on white */
  --focus: #0a6f8c;

  /* Weights (variable font). The card's light text is very thin; it gets
     a little heavier on small screens for legibility. */
  --w-light: 230;
  --w-org: 400;
  --w-name: 620;

  --font: "Roboto Flex Narrow", "Roboto Flex Narrow Fallback", "Roboto Flex Narrow Fallback 2", "Roboto Condensed",
    "Avenir Next Condensed", "Arial Narrow", sans-serif;

  /* Roboto vertical metrics (em): hhea ascent, descent, cap height.
     Used to run the colour bars from the cap line of the first row to the
     baseline of the last row, as on the card. */
  --asc: 0.9277;
  --desc: 0.2441;
  --cap: 0.7109;

  /* One card pixel. Fits the 1080 × 658 card inside the viewport
     (32px side margins; room for the footer), capped at 1180px wide. */
  --u: clamp(0.62px, min((100vw - 64px) / 1080, (100vh - 72px) / 658), 1.0926px);

  /* Info rows: 33 card-px text on a 47 card-px pitch */
  --lh: 1.4242;
}
@supports (height: 100svh) {
  :root {
    --u: clamp(0.62px, min((100vw - 64px) / 1080, (100svh - 72px) / 658), 1.0926px);
  }
}

/* ---------------------------------------------------------------- base */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font);
  font-weight: var(--w-light);
  line-height: 1.4;
  text-rendering: optimizeLegibility;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

p,
h1,
h2,
ul {
  margin: 0;
}

h1,
h2 {
  font: inherit;
}

ul {
  padding: 0;
  list-style: none;
}

address {
  font-style: normal;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  color: var(--link-hover);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}

a:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection {
  background: #c9ecf6;
  color: #0f2a3b;
}

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

/* ---------------------------------------------------------------- page */

.page {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden; /* the watermark bleeds off the page */
  overflow: clip;
}

/* The huge faint N behind the card: on the card it is ~101% of the card's
   height, bleeds off the left edge, and its right edge sits at card x = 758. */
.watermark {
  position: absolute;
  z-index: -1;
  top: -0.5%;
  right: calc(50% - 218 * var(--u));
  width: auto;
  height: 101%;
  max-width: none;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

/* ---------------------------------------------------------------- card (desktop) */

.card {
  width: calc(1080 * var(--u));
  margin: auto;
  padding: calc(153 * var(--u)) calc(80 * var(--u)) calc(66 * var(--u)) calc(49 * var(--u));
  font-size: calc(33 * var(--u));
}

.card__top {
  display: flex;
  align-items: flex-start;
}

.logo {
  flex: none;
  width: calc(616 * var(--u));
  font-size: inherit;
  line-height: 0;
}

.logo img {
  width: 100%;
}

.logo__link {
  display: block;
}

.person {
  margin: calc(56.5 * var(--u)) 0 calc(-8 * var(--u)) calc(67 * var(--u)); /* never taller than the logo */
  color: var(--navy);
  line-height: 1.1;
  white-space: nowrap;
}

.person__name,
.person__role {
  display: block;
}

.person__name {
  font-size: calc(44.3 * var(--u));
  font-weight: var(--w-name);
  letter-spacing: 0.015em;
}

.person__role {
  margin-top: calc(6.6 * var(--u));
  font-size: calc(39.5 * var(--u));
  font-weight: var(--w-light);
}

.card__info {
  display: flex;
  align-items: flex-start;         /* each bar spans only its own rows */
  margin-top: calc(116.7 * var(--u));
  padding-left: calc(156 * var(--u));
}

/* One info block: a 3-colour bar at the left, four rows of text. */
.info {
  position: relative;
  padding-left: 0.7576em;          /* 25 card-px: bar + gap */
  line-height: var(--lh);
  word-spacing: 0.05em;            /* the card's slightly roomier word gaps */
  white-space: nowrap;
}

.info::before {
  content: "";
  position: absolute;
  left: 0;
  /* cap line of the first row ... baseline of the last row */
  top: calc((var(--lh) - var(--asc) - var(--desc)) * 0.5em + (var(--asc) - var(--cap)) * 1em);
  bottom: calc((var(--lh) - var(--asc) - var(--desc)) * 0.5em + var(--desc) * 1em);
  width: 0.3636em;                 /* 12 card-px */
  background: linear-gradient(
    to bottom,
    var(--bar-gray) 0 33.333%,
    var(--bar-navy) 33.333% 66.667%,
    var(--bar-teal) 66.667% 100%
  );
}

.info--address,
.info--message {
  flex: none;
  width: calc(503 * var(--u));     /* card x 205 → 708 */
  letter-spacing: -0.012em;        /* the card sets this column a touch tighter */
}

.info--contact {
  letter-spacing: 0.008em;
}

.info__line {
  display: block;
}

.info__org {
  color: var(--ink);
  font-weight: var(--w-org);
}

.info__link {
  display: block;
}

.info--message .info__link {
  display: inline-block;           /* full row height: a comfortable tap target */
  color: var(--link-hover);
  font-weight: var(--w-org);
}

/* Desktop: the Maps link box hugs its longest line, so its focus ring stays
   clear of the contact column's colour bar. */
@media (min-width: 901px) {
  .info__link--map {
    display: inline-block;
  }
}

/* ---------------------------------------------------------------- footer */

.site-footer {
  padding: 12px 24px 20px;
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  text-align: center;
}

/* ---------------------------------------------------------------- tablet */

@media (max-width: 900px) {
  :root {
    --w-light: 290;
    --w-name: 640;
  }

  .card {
    width: min(100% - 64px, 600px);
    padding: 56px 0 48px;
    font-size: 1.375rem;           /* 22px info text */
  }

  .card__top {
    flex-direction: column;
    gap: 36px;
  }

  .logo {
    width: min(100%, 560px);
  }

  .person {
    margin: 0;
  }

  .person__name {
    font-size: 1.4em;              /* card ratio 44.3 : 33, nudged up */
  }

  .person__role {
    margin-top: 0.08em;
    font-size: 1.2em;              /* card ratio 39.5 : 33 */
  }

  .card__info {
    flex-wrap: wrap;
    gap: 28px 48px;
    margin-top: 44px;
    padding-left: 0;
  }

  .info {
    --lh: 2.0455;                  /* 45px rows: comfortable tap targets */
  }

  .info--address,
  .info--message {
    width: auto;
  }

  /* Sized to the page width instead of its height on tall screens */
  .watermark {
    top: -1%;
    right: auto;
    left: -46%;
    width: 165%;
    height: auto;
  }
}

/* ---------------------------------------------------------------- mobile */

@media (max-width: 640px) {
  :root {
    --w-light: 300;
  }

  .card {
    width: min(100% - 48px, 420px);
    padding: 40px 0 32px;
    font-size: 1.25rem;            /* 20px: the face is narrow, so it still fits 320px */
  }

  .card__top {
    gap: 28px;
  }

  .logo {
    width: min(100%, 320px);
  }

  .person {
    white-space: normal;
  }

  .card__info {
    flex-direction: column;
    align-items: stretch;          /* full-width rows: bigger tap targets */
    gap: 22px;
    margin-top: 30px;
  }

  .info {
    --lh: 2.25;                    /* 45px rows */
    white-space: normal;
  }

  .watermark {
    left: -62vw;
    width: 190vw;
  }
}

@media (max-width: 359px) {
  .card {
    width: calc(100% - 32px);
    font-size: 1.1875rem;          /* 19px */
  }

  .info {
    --lh: 2.3684;                  /* 45px rows */
  }
}

/* ---------------------------------------------------------------- motion */

@media (prefers-reduced-motion: no-preference) {
  .logo,
  .person,
  .info {
    animation: nv-rise 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }

  .person {
    animation-delay: 0.06s;
  }

  .info--address,
  .info--message {
    animation-delay: 0.12s;
  }

  .info--contact {
    animation-delay: 0.16s;
  }

  .watermark {
    animation: nv-fade 0.6s ease-out both;
  }
}

@keyframes nv-rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

@keyframes nv-fade {
  from {
    opacity: 0;
  }
}

/* ---------------------------------------------------------------- print */

@media print {
  .page {
    min-height: 0;
  }

  .info::before {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}