/* =========================================================
   WORK — STATIC SITE (COMPLETE CSS)
   ========================================================= */

:root{
  /* =======================================================
     DESKTOP CONSISTENCY SCALE (SAFE)
     - 1920px-wide viewport => scale = 1
     - 4K-wide viewport     => scale grows, capped at 1.35
     NOTE: this is "fills the window similarly", not physical DPI perfection.
     ======================================================= */
  --ui-scale: 1;
}

@media (min-width: 1200px){
  :root{
    /* unitless ratio: (viewport width / 1920px), clamped */
    --ui-scale: clamp(1, calc(100vw / 1920px), 2);
  }
}

:root{
  /* PAGE / GRID SCALE */
  --page-max: calc(1280px * var(--ui-scale));
  --pad-x:    calc(40px   * var(--ui-scale));

  --ink: #111;
  --card-radius: 2px;
  --card-shadow: 0 10px 28px rgba(0,0,0,.20);
  --card-shadow-hover: 0 16px 40px rgba(0,0,0,.26);

  /* =======================================================
     LTL SCALE — grows logo/tag/nav together
     (This now also follows --ui-scale on big screens)
     ======================================================= */
  --ltl-scale: calc(1.14 * var(--ui-scale));

  /* =======================================================
     LTL — FINAL TUNING KNOBS (DESKTOP)
     Adjust ONLY these to fine-tune
     ======================================================= */
  --logo-x: 0px;     /* + right / - left */
  --logo-y: -22px;   /* + down / - up */

  --tag-x: 125px;    /* + right / - left */
  --tag-y: 44px;     /* + down / - up */

  /* TYPE (tagline + nav should match) */
  --ltl-font: Calibri, "Calibri Light", Candara, "Segoe UI", Arial, sans-serif;
  --ltl-weight: 600;
  --ltl-tracking: .03em;

  /* Nav vertical alignment */
  --nav-nudge-y: calc(-2px * var(--ltl-scale));

  /* GRID SPACING (scales with ui) */
  --grid-gap: calc(26px * var(--ui-scale));
  --wrap-top: calc(6px  * var(--ui-scale));
  --wrap-bot: calc(40px * var(--ui-scale));
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body{
  margin: 0;
  font-family: var(--ltl-font);
  color: var(--ink);

  background-color: #e9e6df;
  background-image: url("./images/PaperBackground.webp");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* =========================================================
   HEADER (LTL)
   ========================================================= */

.top{
  padding: calc(40px * var(--ui-scale)) var(--pad-x) calc(14px * var(--ui-scale));
}

.top__inner{
  max-width: var(--page-max);
  margin: 0 auto;

  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: calc(28px * var(--ui-scale));
}

/* LOGO + TAGLINE */
.brand{
  flex: 1 1 auto;
  position: relative;
  min-height: calc(72px * var(--ltl-scale));
}

.brand__row{
  position: relative;
}

.brand__logo{
  height: calc(74px * var(--ltl-scale));
  width: auto;
  display: block;
  transform: translate(
    calc(var(--logo-x) * var(--ltl-scale)),
    calc(var(--logo-y) * var(--ltl-scale))
  );
}

.brand__tag{
  position: absolute;
  left: calc(var(--tag-x) * var(--ltl-scale));
  top:  calc(var(--tag-y) * var(--ltl-scale));

  font-family: var(--ltl-font);
  font-size: calc(15px * var(--ltl-scale));
  font-weight: var(--ltl-weight);
  letter-spacing: var(--ltl-tracking);
  color: #000;
  line-height: 1.12;
  margin: 0;
}

/* NAV (matches tagline style) */
.nav{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(7px * var(--ui-scale));

  text-align: right;
  padding-top: 0;
  transform: translateY(var(--nav-nudge-y));
}

.nav a{
  font-family: var(--ltl-font);
  font-size: calc(14px * var(--ltl-scale));
  font-weight: var(--ltl-weight);
  letter-spacing: var(--ltl-tracking);
  line-height: 1.10;

  color: #000;
  text-decoration: none;
}

.nav a:hover{
  text-decoration: underline;
}

/* Optical correction: CONTACT looks looser due to font metrics */
.nav a:first-child {
  transform: translateY(1px);
}

/* =========================================================
   GRID (close to LTL)
   ========================================================= */

.wrap{
  padding: var(--wrap-top) var(--pad-x) var(--wrap-bot);
}

.grid{
  max-width: var(--page-max);
  margin: 0 auto;

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--grid-gap);
}

.card{
  display: block;
  text-decoration: none;
  color: inherit;

  border-radius: var(--card-radius);
  overflow: hidden;

  background: #000;
  box-shadow: var(--card-shadow);
  transition: transform .18s ease, box-shadow .18s ease;
}

.card img{
  width: 100%;
  display: block;
}

.card:hover{
  transform: translateY(-2px);
  box-shadow: var(--card-shadow-hover);
}

/* =========================================================
   FOOTER
   ========================================================= */

.footer{
  padding: calc(18px * var(--ui-scale)) var(--pad-x) calc(34px * var(--ui-scale));
}

.footer__inner{
  max-width: var(--page-max);
  margin: 0 auto;

  font-size: 12px;
  color: rgba(0,0,0,.55);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1180px){
  .grid{ grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 860px){
  /* stop the desktop scaling behavior on small screens */
  :root{ --ui-scale: 1; }

  .top__inner{
    flex-direction: column;
    align-items: flex-start;
  }

  .brand{
    min-height: 0;
  }

  .brand__logo{
    transform: none;
    height: 74px;
  }

  .brand__tag{
    position: static;
    margin-top: 6px;
    font-size: 15px;
  }

  .nav{
    align-items: flex-start;
    text-align: left;
    transform: none;
    padding-top: 12px;
  }

  .grid{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px){
  .grid{ grid-template-columns: 1fr; }
}