/* ============================================================
   TIMEWAVE PRODUCTIONS — site.css
   ------------------------------------------------------------
   Three inks on paper: coral, navy, sage. Tan is the paper.
   Display : Archivo variable, width axis pulled to 78%
   Voice   : Bitter italic
   Body    : DM Sans
   Utility : Jost, tracked caps

   Loaded by every page as  <link rel="stylesheet" href="/css/site.css">
   ============================================================ */

/* ============================================================
   TIMEWAVE PRODUCTIONS — mockup stylesheet
   Three inks on paper: coral, navy, sage. Tan is the paper.
   Display: Archivo variable (width axis pulled to 78%)
   Voice:   Bitter italic
   Body:    DM Sans
   Utility: Jost, tracked caps
   ============================================================ */

:root{
  --paper:      #F4F1DE;
  --paper-2:    #EEE9D2;
  --paper-3:    #E3DCBE;
  --ink:        #3D405B;
  --ink-deep:   #2C2F44;
  --coral:      #E07A5F;
  --coral-deep: #C4614A;
  --coral-pale: #F5DCD2;
  --sage:       #9FAB6E;

  --rule:       rgba(61,64,91,.16);
  --rule-2:     rgba(61,64,91,.30);
  --ink-70:     rgba(61,64,91,.72);
  --ink-50:     rgba(61,64,91,.52);
  --ink-35:     rgba(61,64,91,.35);

  --gut: 64px;              /* page side margin */
  --max: 1240px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'DM Sans',system-ui,sans-serif;
  font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

/* paper grain — the one texture in the whole system */
body::after{
  content:''; position:fixed; inset:0; z-index:9998; pointer-events:none;
  background-image:radial-gradient(rgba(61,64,91,.06) .5px, transparent .55px);
  background-size:3px 3px;
}

img{max-width:100%; display:block}
a{color:var(--coral); text-decoration:none}

/* ---------- type roles ---------- */
.d{
  font-family:'Archivo',sans-serif; font-weight:800;
  /* break only between words — never hyphenate a word like "Excellence" */
  overflow-wrap:break-word; hyphens:none; word-break:normal;
  font-variation-settings:'wdth' 78;
  text-transform:uppercase; line-height:.93;
  letter-spacing:.002em; margin:0;
}
.d-xl{font-size:clamp(44px,6.4vw,92px)}
.d-l {font-size:clamp(34px,4.4vw,62px)}
.d-m {font-size:clamp(26px,2.7vw,38px)}
.d-s {font-size:clamp(19px,1.5vw,24px); font-variation-settings:'wdth' 84}

.lab{
  font-family:'Jost',sans-serif; font-weight:500;
  font-size:11.5px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--coral);
}
.lab.muted{color:var(--ink-50)}

.v{font-family:'Bitter',serif; font-style:italic}
.v-l{font-size:clamp(19px,1.7vw,24px); line-height:1.5}
.v-m{font-size:17px; line-height:1.6}

.p{max-width:60ch; color:var(--ink-70)}
.p-tight{max-width:48ch}
.sm{font-size:14px; line-height:1.6; color:var(--ink-50)}
.xs{font-size:12.5px; line-height:1.55; color:var(--ink-50)}

/* ---------- layout ---------- */
.page{background:var(--paper); position:relative; overflow:hidden}
.wrap{max-width:var(--max); margin:0 auto; padding:0 var(--gut)}
.sec{padding:96px 0}
.sec-tight{padding:64px 0}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:56px}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:32px}
.rule{height:1px; background:var(--rule); border:0; margin:0}

/* section eyebrow with hairline */
.eyebrow{display:flex; align-items:center; gap:20px; margin-bottom:40px}
.eyebrow .line{flex:1; height:1px; background:var(--rule)}

/* ---------- the horizon: signature device ----------
   one coral hairline with a sun sitting on it, once per page  */
.horizon{position:relative; height:16px; margin:0}
.horizon i{position:absolute; left:0; right:0; top:50%; height:1px; background:var(--coral)}
.horizon b{
  position:absolute; top:50%; left:34%; transform:translate(-50%,-50%);
  width:15px; height:15px; border-radius:50%; background:var(--coral);
}

/* crop marks — print registration, used on poster panels only */
.marks{position:relative}
.marks::before,.marks::after{
  content:''; position:absolute; width:11px; height:11px; pointer-events:none;
}
.marks::before{top:-7px; left:-7px; border-top:1px solid var(--coral); border-left:1px solid var(--coral)}
.marks::after{bottom:-7px; right:-7px; border-bottom:1px solid var(--coral); border-right:1px solid var(--coral)}


/* ---------- nav ---------- */
.nav{display:flex; align-items:center; justify-content:space-between; padding:34px 0 0}
.nav .logo{height:58px; display:flex; align-items:center}
.nav .logo img{height:100%; width:auto}
.nav ul{display:flex; align-items:center; gap:38px; list-style:none; margin:0; padding:0}
.nav a{
  color:var(--ink); font-size:15px; position:relative; padding-bottom:3px;
}
.nav a::after{
  content:''; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--coral); transition:right .28s ease;
}
.nav a:hover::after{right:0}

.btn{
  display:inline-block; padding:14px 30px; border-radius:999px;
  background:var(--coral); color:var(--paper);
  font-family:'Archivo',sans-serif; font-weight:700; font-variation-settings:'wdth' 92;
  font-size:14px; letter-spacing:.02em; border:1px solid var(--coral);
  transition:background .2s ease, color .2s ease;
}
.btn:hover{background:var(--coral-deep); border-color:var(--coral-deep)}
.btn-ghost{background:transparent; color:var(--coral)}
.btn-ghost:hover{background:var(--coral); color:var(--paper)}
.btn-sm{padding:11px 24px; font-size:13px}

.tlink{
  color:var(--ink); font-size:15px; border-bottom:1px solid var(--coral);
  padding-bottom:2px;
}
.tlink:hover{color:var(--coral)}

/* ---------- placeholder imagery ---------- */
/* halftone-edged film still stand-in */
.still{
  position:relative; background:var(--paper-2); overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.still::before{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(circle at 30% 25%, rgba(224,122,95,.20), transparent 55%),
    radial-gradient(circle at 78% 72%, rgba(61,64,91,.22), transparent 58%),
    linear-gradient(160deg, var(--paper-3), var(--paper-2));
}
.still::after{
  content:''; position:absolute; inset:0;
  background-image:radial-gradient(rgba(61,64,91,.16) 1px, transparent 1.1px);
  background-size:6px 6px;
}
.still span{
  position:relative; z-index:2; font-family:'Jost',sans-serif;
  font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-50);
}


/* ---------- work filters ---------- */
button.stamp{background:transparent; cursor:pointer; font:inherit;
  font-family:'Jost',sans-serif; font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-50);
  border:1px solid var(--rule-2); border-radius:999px; padding:7px 15px;
  transition:border-color .2s ease, color .2s ease}
button.stamp:hover{border-color:var(--coral); color:var(--coral)}
button.stamp.on{border-color:var(--coral); color:var(--coral)}

/* award tick in a card's meta line — deliberately small */
.card .sub .award{color:var(--coral); letter-spacing:.02em}

/* ---------- badges / stamps ---------- */
.stamp{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Jost',sans-serif; font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-50);
  border:1px solid var(--rule-2); border-radius:999px; padding:7px 15px;
}
.stamp.on{border-color:var(--coral); color:var(--coral)}

.roundel{
  width:74px; height:74px; border-radius:50%; border:1px solid var(--rule-2);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; flex:0 0 auto;
}
.roundel b{font-family:'Archivo',sans-serif; font-weight:700; font-size:13px; font-variation-settings:'wdth' 80}
.roundel i{font-family:'Jost',sans-serif; font-style:normal; font-size:8px; letter-spacing:.14em; color:var(--ink-35); text-transform:uppercase}

/* ---------- work cards ---------- */
.card{display:block; color:inherit}
/* [hidden] must beat .card's display:block, or filtered-out cards keep rendering */
.card[hidden]{display:none !important}
.card .art{
  aspect-ratio:4/5; position:relative; overflow:hidden; background:var(--paper-2);
  transition:transform .4s cubic-bezier(.2,.7,.3,1);
}
.card:hover .art{transform:translateY(-6px)}
.card .meta{padding-top:18px}
.card .title{font-family:'Archivo',sans-serif; font-weight:800; font-variation-settings:'wdth' 80; font-size:22px; text-transform:uppercase; line-height:1.05}
.card:hover .title{color:var(--coral)}
.card .sub{font-size:13px; color:var(--ink-50); margin-top:6px; display:flex; gap:10px; flex-wrap:wrap}
.card .sub em{font-style:normal; color:var(--ink-35)}
.card .hook{font-family:'Bitter',serif; font-style:italic; font-size:15px; color:var(--ink-70); margin-top:10px}

/* ---------- call sheet: the signature project block ---------- */
.callsheet{
  border:1px solid var(--ink); background:var(--paper);
  position:relative;
}
.callsheet .head{
  display:flex; align-items:baseline; justify-content:space-between;
  padding:16px 20px; border-bottom:1px solid var(--ink); gap:12px;
}
.callsheet .head b{font-family:'Archivo',sans-serif; font-weight:800; font-variation-settings:'wdth' 80; font-size:14px; letter-spacing:.06em; text-transform:uppercase}
.callsheet dl{margin:0; padding:6px 20px 18px}
.callsheet .row{display:grid; grid-template-columns:96px 1fr; gap:14px; padding:9px 0; border-bottom:1px dotted var(--rule-2)}
.callsheet .row:last-child{border-bottom:0}
.callsheet dt{font-family:'Jost',sans-serif; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-35); padding-top:3px}
.callsheet dd{margin:0; font-size:14.5px; line-height:1.5}
.callsheet .foot{
  border-top:1px solid var(--ink); padding:12px 20px;
  font-family:'Jost',sans-serif; font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-35);
  display:flex; justify-content:space-between; gap:10px;
}

/* ---------- coral band + deckled edge ---------- */
.band{background:var(--coral); color:var(--paper); position:relative}
.band .p, .band .sm, .band .xs{color:rgba(244,241,222,.86)}
.band .lab{color:rgba(244,241,222,.72)}
.deckle{display:block; width:100%; height:14px}
.deckle path{fill:var(--paper)}

/* ---------- tables / lists ---------- */
.spec{width:100%; border-collapse:collapse}
.spec td{padding:15px 0; overflow-wrap:anywhere; border-bottom:1px solid var(--rule); vertical-align:top; font-size:15.5px}
.spec td:first-child{width:200px; font-family:'Jost',sans-serif; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-50); padding-top:19px}

.beliefs{list-style:none; margin:0; padding:0; counter-reset:b}
.beliefs li{
  padding:20px 0 20px 44px; border-bottom:1px solid var(--rule); position:relative;
  font-size:19px; line-height:1.5;
}
.beliefs li::before{
  counter-increment:b; content:counter(b,decimal-leading-zero);
  position:absolute; left:0; top:24px; font-family:'Jost',sans-serif;
  font-size:11px; letter-spacing:.12em; color:var(--coral);
}
.beliefs li span{display:block; font-family:'Bitter',serif; font-style:italic; font-size:15px; color:var(--ink-50); margin-top:4px}


/* ---------- forms ---------- */
.field{margin-bottom:22px}
.field label{display:block; font-family:'Jost',sans-serif; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-50); margin-bottom:8px}
.field input,.field textarea,.field select{
  width:100%; padding:13px 15px; font-family:'DM Sans',sans-serif; font-size:16px;
  color:var(--ink); background:transparent; border:1px solid var(--rule-2); border-radius:0;
}
.field input:focus,.field textarea:focus,.field select:focus{outline:2px solid var(--coral); outline-offset:1px; border-color:var(--coral)}

/* ---------- footer ---------- */
.foot{background:var(--ink); color:var(--paper); padding:72px 0 30px}
.foot a{color:var(--paper)}
.foot .logo{height:96px; max-width:100%; opacity:.95}
.foot h4{font-family:'Jost',sans-serif; font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:rgba(244,241,222,.45); margin:0 0 16px}
.foot ul{list-style:none; margin:0; padding:0}
.foot li{margin-bottom:9px; font-size:15px; color:rgba(244,241,222,.8)}
.foot .colophon{
  margin-top:56px; padding-top:22px; border-top:1px solid rgba(244,241,222,.16);
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  font-family:'Jost',sans-serif; font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(244,241,222,.4);
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  :root{--gut:24px}
  .grid2,.grid3{grid-template-columns:1fr; gap:36px}
  .sec{padding:64px 0}
  .nav ul{gap:20px}
  .nav .logo{height:46px}
  .callsheet .row{grid-template-columns:88px 1fr}
  .spec td:first-child{width:130px}
}

/* ------------------------------------------------------------
   RESPONSIVE OVERRIDES FOR INLINE GRIDS
   Several layouts set grid-template-columns as an inline style,
   so collapsing them on small screens requires !important.
   Elements tagged .keep2 drop to two columns instead of one.
   ------------------------------------------------------------ */
.nav a.btn::after{display:none}

@media (max-width:1040px){
  [style*="grid-template-columns:1fr 340px"],
  [style*="grid-template-columns:1.05fr"],
  [style*="grid-template-columns:1.15fr"],
  [style*="grid-template-columns:1.1fr"]{grid-template-columns:1fr !important}
}

@media (max-width:900px){
  [style*="grid-template-columns"]{grid-template-columns:1fr !important; gap:30px !important}
  .keep2[style*="grid-template-columns"]{grid-template-columns:1fr 1fr !important; gap:12px !important}
  [style*="position:sticky"]{position:static !important}
  .nav{flex-wrap:wrap; gap:16px}
}

@media (max-width:560px){
  /* the footer's four columns can't survive this width */
  .foot .keep2{grid-template-columns:1fr !important; gap:28px !important}
  /* spec tables stack rather than squeeze — long emails were forcing overflow */
  .spec, .spec tbody, .spec tr, .spec td{display:block; width:auto}
  .spec tr{padding:14px 0; border-bottom:1px solid var(--rule)}
  .spec td{border-bottom:0; padding:0}
  .spec td:first-child{width:auto; padding:0 0 4px}
  .marks[style*="padding:40px"]{padding:24px !important}
  .callsheet .row{grid-template-columns:1fr; gap:2px}
  .callsheet dt{padding-top:0}
  /* long single words in the display face need room to shrink */
  .d-xl{font-size:clamp(32px,8.6vw,44px)}
  .d-l{font-size:clamp(28px,7.4vw,34px)}
  .nav ul{gap:14px; font-size:14px}
  .beliefs li{font-size:17px}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important}
}


/* ---------- logo ---------- */
.tw-logo{
  display:block; height:100%; width:auto; aspect-ratio:208/274;
  background:no-repeat left center/contain url("/img/logo/timewave-mark.svg");
}
.foot .tw-logo{
  /* the badge's navy nameplate otherwise disappears into the navy footer —
     fake a 1px paper-colored outline around the silhouette */
  filter: drop-shadow(1px 0 0 var(--paper)) drop-shadow(-1px 0 0 var(--paper))
          drop-shadow(0 1px 0 var(--paper)) drop-shadow(0 -1px 0 var(--paper));
}


/* hero video sits in a .ratio box exactly like an image does */
.ratio > video.ph{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.ratio > iframe.ph{position:absolute; inset:0; width:100%; height:100%; display:block}
@media (prefers-reduced-motion:reduce){
  /* respect the OS setting — show the poster frame instead of looping footage */
  video.ph{display:none}
  .ratio:has(> video.ph){background:no-repeat center/cover url("/video/hero-poster.jpg")}
}


/* ---------- client logo strip ----------
   One row. On very wide screens space-between spreads six logos so far apart
   they read as small; capping the strip width keeps them grouped and legible. */
.client-strip{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:clamp(24px, 3.5vw, 52px);
  width:100%;
  max-width:1180px;
  margin:0;
  flex-wrap:nowrap;
}
.client-strip img{
  flex:0 1 auto;
  min-width:0;
  max-height:64px;
  max-width:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
  opacity:.62;
  transition:opacity .2s ease;
}
.client-strip img:hover{opacity:1}
/* optical balance: a circular badge reads heavier than a long wordmark */
.client-strip img[src*="second-baptist"]{max-height:80px}
.client-strip img[src*="hotel-lucine"]{max-height:50px}
.client-strip img[src*="woodlands"]{max-height:72px}
.client-strip img[src*="houstonian"]{max-height:74px}
.client-strip img[src*="tremont"]{max-height:70px}

@media (max-width:1000px){
  .client-strip{gap:20px}
  .client-strip img{max-height:44px}
  .client-strip img[src*="second-baptist"]{max-height:56px}
  .client-strip img[src*="hotel-lucine"]{max-height:34px}
  .client-strip img[src*="woodlands"]{max-height:50px}
  .client-strip img[src*="houstonian"]{max-height:52px}
  .client-strip img[src*="tremont"]{max-height:48px}
}
@media (max-width:600px){
  .client-strip{flex-wrap:wrap; justify-content:flex-start; gap:24px 30px; max-width:none}
  .client-strip img{max-height:38px}
  .client-strip img[src*="second-baptist"]{max-height:48px}
  .client-strip img[src*="hotel-lucine"]{max-height:30px}
}

/* ---------- accessibility ---------- */
.skip{
  position:absolute; left:-9999px; top:0; z-index:9999;
  background:var(--ink); color:var(--paper); padding:12px 20px;
  font-family:'Jost',sans-serif; font-size:13px; letter-spacing:.14em; text-transform:uppercase;
}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--coral); outline-offset:3px}

/* ---------- images in place of .still placeholders ---------- */
/* Once real photography lands, swap <div class="still"> for:
   <img class="ph" src="..." alt="..." width="" height="">           */
.ph{width:100%; height:100%; object-fit:cover; display:block; background:var(--paper-2)}
.ratio{position:relative; overflow:hidden}
.ratio > .ph{position:absolute; inset:0}

/* ---------- current page marker in nav ---------- */
.nav a[aria-current="page"]{color:var(--coral)}
.nav a[aria-current="page"]::after{right:0}

/* ---------- 404 ---------- */
.mid{min-height:62vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center}