/*
Theme Name: MRAV Holding
Theme URI: https://mrav.hr
Author: MRAV
Description: One-page holding theme for MRAV — logo, a line about the studio, the work, and how to get in touch. Answers every request with the same page.
Version: 1.8.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mrav-holding
*/

/* ─────────────────────────────────────────────
   TOKENS
   Copied from the main theme rather than imported: this theme has to stand on
   its own on a live site, with the other one not installed at all. If the
   palette moves there, these are the values to bring across.
   ───────────────────────────────────────────── */
:root{
  --loam:#1E223D;
  --loam-2:#272C4A;
  --bone:#FFFFFF;
  --dust:#9EA3C7;
  --signal:#F54F1B;

  --display:'Archivo',system-ui,sans-serif;

  --gut:clamp(20px,5vw,64px);
  --line:rgba(255,255,255,.16);
  --line-solid:#42455C;
  --ease:cubic-bezier(.22,1,.36,1);
}

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

body{
  margin:0;
  background:var(--loam);
  color:var(--bone);
  font-family:var(--display);
  font-weight:300;
  -webkit-font-smoothing:antialiased;
}

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

::selection{background:var(--signal);color:var(--loam)}

:focus-visible{outline:2px solid var(--signal);outline-offset:4px}

/* Screen-reader text (WP accessibility standard) */
.screen-reader-text{
  border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;
  padding:0;position:absolute;width:1px;word-wrap:normal!important;
}

/* ─────────────────────────────────────────────
   PAGE
   One column, hard against the left the way the studio's own pages read,
   with the whole thing centred in the viewport.
   ───────────────────────────────────────────── */
.hold{
  max-width:860px;
  margin:0 auto;
  padding:clamp(64px,12vh,140px) var(--gut);
  display:flex;
  flex-direction:column;
  gap:clamp(48px,9vh,96px);
  /* svh rather than vh so a phone's collapsing toolbar cannot leave a gap. */
  min-height:100svh;
}

/* ── Wordmark ── */
.mark{
  font-family:var(--display);
  font-variation-settings:'wdth' 108,'wght' 650;
  font-size:clamp(34px,7vw,72px);
  letter-spacing:-.03em;
  text-transform:uppercase;
  line-height:1;
  margin:0 0 clamp(20px,3vh,34px);
}
.mark-it{
  display:inline-block;
  height:.69em;
  width:auto;
  color:var(--signal);
  vertical-align:baseline;
  /* MRAV and IT are two words — a word space, in em so it tracks the type. */
  margin-left:.2em;
}
/* Squares land first, then the strokes draw between them. Driven by animation
   delays rather than script, so this theme carries no JavaScript at all. */
.mark-it rect{
  opacity:0;
  animation:hold-pop .4s var(--ease) forwards;
}
.mark-it rect:nth-of-type(1){animation-delay:.12s}
.mark-it rect:nth-of-type(2){animation-delay:.28s}
.mark-it rect:nth-of-type(3){animation-delay:.18s}
.mark-it rect:nth-of-type(4){animation-delay:.34s}
.mark-it rect:nth-of-type(5){animation-delay:.22s}
/* pathLength="1" on each line means one dash value covers all three whatever
   their real lengths. Held until the last square is down: .34s of delay plus
   its own .4s fade. */
.mark-it line{
  stroke:currentColor;
  stroke-width:3;
  stroke-dasharray:1;
  stroke-dashoffset:1;
  animation:hold-draw .55s var(--ease) forwards;
}
.mark-it line:nth-of-type(1){animation-delay:.8s}
.mark-it line:nth-of-type(2){animation-delay:.92s}
.mark-it line:nth-of-type(3){animation-delay:1.04s}

@keyframes hold-pop{to{opacity:1}}
@keyframes hold-draw{to{stroke-dashoffset:0}}

.hold-lead{
  font-size:clamp(17px,2.2vw,26px);
  line-height:1.5;
  max-width:46ch;
  margin:0;
  color:var(--bone);
}
/* Only the opening paragraph is set as the lead. The ones after it carry the
   detail, so they step down and take the quieter colour rather than running on
   at the same size — three paragraphs of 26px would be a wall. */
.hold-lead + .hold-lead{
  margin-top:clamp(14px,2vh,22px);
  font-size:clamp(15px,1.5vw,18px);
  line-height:1.6;
  max-width:56ch;
  color:var(--dust);
}
/* .hold-note carries no styling of its own — the closing line reads as an
   ordinary paragraph of the intro. The class stays as the hook that lets the
   template drop that line on its own. */

/* ── Blocks ── */
.hold-label{
  font-size:11px;
  font-weight:400;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--dust);
  margin:0 0 clamp(18px,2.6vh,28px);
}

/* ── Work ── */
.hold-list{
  list-style:none;
  margin:0;
  padding:0;
  border-top:1px solid var(--line);
}
.hold-list li{border-bottom:1px solid var(--line)}
/* The row itself is the link — laid out here rather than on the li so the whole
   width of it is clickable, not just the words. */
.hold-list a{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:4px clamp(16px,3vw,40px);
  padding:16px 0;
  transition:color .35s var(--ease);
}
.hold-list a:hover{color:var(--signal)}
.hold-list a:hover .hold-desc{color:var(--signal)}
/* Only the mark moves, and it leads out the way it points — the names stay put
   on the edge they all line up on. On `translate` rather than `transform`, which
   is already holding the rotation. */
.hold-list a:hover .hold-arw{translate:3px -3px}
/* Name and role stack as one block. Being a flex column, its baseline is its
   first line's — so the domain opposite lines up with the name, not the role. */
.hold-info{
  display:flex;
  flex-direction:column;
  gap:6px;
  flex:1 1 auto;
  min-width:0;
}
.hold-name{
  font-variation-settings:'wdth' 108,'wght' 650;
  font-size:clamp(17px,2vw,24px);
  letter-spacing:-.01em;
  text-transform:uppercase;
  line-height:1.1;
}
/* What we did, in the quiet grey. Colour set outright rather than inherited, so
   the row turning on hover leaves this line where it is — the name, the domain
   and the mark are enough to answer the pointer. */
.hold-role{
  font-size:13px;
  line-height:1.45;
  color:var(--dust);
  max-width:60ch;
}
/* Pushed to the right edge, so the domains and their marks line up down the
   list against the names on the left. */
.hold-link{
  display:inline-flex;
  align-items:center;
  gap:9px;
  flex:0 0 auto;
  margin-left:auto;
}
.hold-desc{
  font-size:14px;
  line-height:1.5;
  color:var(--dust);
  /* Long domains break rather than pushing the row wider than the column. */
  overflow-wrap:anywhere;
  transition:color .35s var(--ease);
}
/* The theme's arrow, turned up-right: this leaves the site rather than moving
   down it. currentColor, so it turns with the row on hover. */
.hold-arw{
  width:14px;
  height:14px;
  flex:none;
  transform:rotate(-45deg);
  transition:translate .35s var(--ease);
}

/* ── Contact ── */
.hold-contact{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:12px clamp(20px,4vw,48px);
  font-size:15px;
}
.hold-contact a{
  border-bottom:1px solid var(--signal);
  padding-bottom:2px;
  transition:color .35s var(--ease);
}
.hold-contact a:hover{color:var(--signal)}
.hold-contact span{color:var(--dust)}

@media (max-width:600px){
  /* Once a row wraps there is no right edge left to sit against — a domain
     alone on its own line reads as a mistake pushed over there. */
  .hold-link{margin-left:0}
}

@media (prefers-reduced-motion:reduce){
  /* Straight to the finished mark — no draw, no pop. */
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0ms!important;transition-duration:.001ms!important}
  .mark-it rect{opacity:1}
  .mark-it line{stroke-dashoffset:0}
}