/* ============================================================
   glennmurray.com.au — Phase 1 static site
   Aesthetic: minimalist B&W, "typed manuscript"
   IBM Plex Mono (display/chrome) + IBM Plex Serif (body)
   ============================================================ */

:root{
  --ink:#161616;
  --paper:#ffffff;
  --muted:#7a766f;
  --rule:rgba(22,22,22,.16);
  --mono:'IBM Plex Mono','Courier New',monospace;
  --serif:'IBM Plex Serif',Georgia,'Times New Roman',serif;
  --col:660px;
  --pad:clamp(22px,6vw,40px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:clamp(16px,1.15rem,19px);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.wrap{max-width:var(--col);margin:0 auto;padding:0 var(--pad)}

/* manuscript chrome */
.mono{font-family:var(--mono)}
.meta{
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--muted);
}
.rule{border:0;border-top:1px solid var(--rule);margin:0}
.rule-ink{border:0;border-top:1.5px solid var(--ink);margin:0}

/* masthead */
header{padding-top:clamp(22px,5vw,34px)}
.masthead{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:16px;padding-bottom:14px;flex-wrap:wrap;
}
.brand{
  font-family:var(--mono);font-weight:600;font-size:.92rem;
  letter-spacing:.28em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;
}
nav{display:flex;gap:22px}
nav a{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);text-decoration:none;
  transition:color .2s;
}
nav a:hover{color:var(--ink)}
nav a[aria-current="page"]{color:var(--ink)}

/* burger nav */
.nav-toggle{
  display:none;flex-direction:column;justify-content:space-between;
  width:22px;height:15px;background:none;border:0;cursor:pointer;padding:0;flex-shrink:0;
}
.nav-toggle span{display:block;height:2px;background:var(--ink);transition:transform .25s,opacity .25s}
@media(max-width:680px){
  .masthead{align-items:center}
  .nav-toggle{display:flex}
  nav{display:none;flex-direction:column;gap:0;flex:0 0 100%;
    padding-top:clamp(10px,2vw,14px);margin-top:clamp(8px,1.5vw,12px);
    border-top:1px solid var(--rule)}
  nav.open{display:flex}
  nav a{padding:.6em 0}
  .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
}

/* hero */
.hero{padding:clamp(56px,13vw,118px) 0 clamp(40px,9vw,72px)}
.hero.compact{padding:clamp(44px,10vw,82px) 0 clamp(30px,7vw,52px)}
.eyebrow{display:block;margin-bottom:clamp(22px,5vw,34px)}
h1{
  font-family:var(--mono);font-weight:500;
  font-size:clamp(2.1rem,8.2vw,3.6rem);
  line-height:1.08;letter-spacing:-.01em;
}
h1.sm{font-size:clamp(1.9rem,7vw,3rem)}
.cursor{
  display:inline-block;width:.07em;height:.92em;
  background:var(--ink);margin-left:.08em;transform:translateY(.06em);
  animation:blink 1.15s steps(1) infinite;
}
@keyframes blink{50%{opacity:0}}
.dek{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(1.15rem,3.4vw,1.5rem);
  line-height:1.5;color:var(--ink);margin-top:clamp(22px,5vw,30px);
  max-width:46ch;
}

/* prose */
section{padding:clamp(30px,7vw,52px) 0}
p{margin:0 0 1.25em}
p:last-child{margin-bottom:0}
.lead p:first-child{margin-top:clamp(28px,6vw,42px)}
.lead > .label{margin-top:clamp(26px,5.5vw,40px)}

/* big pull quote between rules */
.pull{
  text-align:center;padding:clamp(34px,7vw,56px) 0;margin:clamp(8px,3vw,18px) 0;
  border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);
}
.pull q{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(1.3rem,4.4vw,2rem);line-height:1.35;quotes:none;
  display:block;max-width:26ch;margin:0 auto;
}
.pull q:before,.pull q:after{content:''}
.pull q em{font-style:normal}

/* indented margin callout */
.callout{
  font-family:var(--mono);font-size:.92rem;line-height:1.7;
  color:#3c3a36;border-left:2px solid var(--ink);
  padding:.1em 0 .1em 1.2em;margin:1.6em 0;max-width:46ch;
}

/* all-caps emphasis line */
.shout{
  font-family:var(--mono);font-weight:500;text-transform:uppercase;
  letter-spacing:.05em;line-height:1.5;
  font-size:clamp(.95rem,2.7vw,1.12rem);
  padding:clamp(22px,5vw,30px) 0;
}

/* labelled blocks */
.block{padding:clamp(26px,5.5vw,40px) 0}
.block + .block{border-top:1px solid var(--rule)}
.label{
  font-family:var(--mono);font-weight:700;font-size:1rem;
  letter-spacing:.18em;text-transform:uppercase;
  display:block;margin-bottom:1.1em;
}
.label b{color:var(--ink);font-weight:600}
.block p{font-size:clamp(15px,1.08rem,17.5px)}
a.inline{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:1px}
a.inline:hover{color:var(--muted);border-color:var(--muted)}

/* specialty group lists (Services) */
.spec{margin:0 0 1.6em}
.spec:last-child{margin-bottom:0}
.spec h3{
  font-family:var(--mono);font-weight:500;font-size:.95rem;
  letter-spacing:.04em;margin-bottom:.5em;
}
.spec ul{list-style:none;margin:0;padding:0}
.spec li{
  font-family:var(--serif);font-size:clamp(15px,1.05rem,17px);
  line-height:1.7;color:#3c3a36;
}
.spec li:before{content:"— ";color:var(--muted)}

/* client list (About) */
.clients{
  font-family:var(--mono);font-size:.82rem;line-height:2;
  letter-spacing:.02em;color:#3c3a36;
  columns:2;column-gap:clamp(20px,5vw,46px);
}
@media (max-width:480px){.clients{columns:1}}

/* CV / experience list (About) */
.cv{list-style:none;margin:0;padding:0}
.cv li{
  font-family:var(--mono);font-size:.82rem;line-height:1.55;
  letter-spacing:.01em;color:#3c3a36;
  display:flex;justify-content:space-between;gap:18px;
  padding:.55em 0;border-bottom:1px solid var(--rule);
}
.cv li:last-child{border-bottom:0}
.cv .role{color:var(--ink)}
.cv .span{color:var(--muted);white-space:nowrap}

/* contact + rates aside */
.aside{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,44px);
  padding:clamp(26px,5.5vw,40px) 0;
}
@media (max-width:520px){.aside{grid-template-columns:1fr}}
.aside .label{margin-bottom:.9em}
.aside p{font-size:clamp(15px,1.05rem,17px)}

/* CTA box */
.cta-wrap{padding:clamp(20px,6vw,40px) 0 clamp(40px,9vw,64px)}
.cta{
  border:1.5px solid var(--ink);
  padding:clamp(30px,6vw,48px) clamp(24px,5vw,44px);
  text-align:center;
}
.cta .label{margin-bottom:1em}
.cta p{font-size:clamp(15px,1.05rem,17px);max-width:42ch;margin:0 auto 1.8em}
.btn{
  display:inline-block;font-family:var(--mono);font-size:.74rem;
  letter-spacing:.18em;text-transform:uppercase;
  background:var(--ink);color:var(--paper);text-decoration:none;
  padding:1.05em 1.8em;border:1.5px solid var(--ink);
  transition:background .2s,color .2s;
}
.btn:hover{background:var(--paper);color:var(--ink)}

/* ---- client ribbon (full-bleed) ---- */
.ribbon{
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  overflow:hidden;
  padding:clamp(14px,3vw,20px) 0;
  margin-top:clamp(20px,6vw,40px);
}
.ribbon .track{
  display:flex;width:max-content;
  animation:marquee 60s linear infinite;
}
.ribbon:hover .track{animation-play-state:paused}
.ribbon .track span{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);
  white-space:nowrap;padding:0 1.5em;
  border-right:1px solid var(--rule);
}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .ribbon{overflow-x:auto}
  .ribbon .track{animation:none}
}

/* ---- home testimonials ---- */
.tms{padding:clamp(26px,5.5vw,40px) 0}
.tm-quote{
  margin:0 0 clamp(26px,5vw,38px);
  padding-bottom:clamp(26px,5vw,38px);
  padding-left:2.8em;
  border-bottom:1px solid var(--rule);
  position:relative;
}
.tm-quote::before{content:'\201C';font-family:var(--serif);font-size:5.5rem;line-height:.8;color:var(--ink);position:absolute;left:0;top:.05em}
.tm-quote:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.tm-quote q{
  font-family:var(--serif);font-style:italic;quotes:none;
  font-size:clamp(1.1rem,3vw,1.4rem);line-height:1.45;
  display:block;max-width:40ch;
}
.tm-quote q:before,.tm-quote q:after{content:''}
.tm-quote cite{
  font-family:var(--mono);font-style:normal;font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  display:block;margin-top:1.1em;
}

/* ---- services accordion ---- */
.spec-group{border-top:1px solid var(--rule)}
.spec-group:last-of-type{border-bottom:1px solid var(--rule)}
.spec-group > summary{
  font-family:var(--mono);font-weight:600;font-size:.86rem;
  letter-spacing:.06em;cursor:pointer;list-style:none;
  padding:1.1em 0;padding-inline:0;display:flex;justify-content:space-between;align-items:center;gap:14px;
}
.spec-group > summary::-webkit-details-marker{display:none}
.spec-group > summary::after{
  content:'+';font-family:var(--mono);font-weight:400;color:var(--muted);
  transition:transform .2s;
}
.spec-group[open] > summary::after{content:'\2212'} /* minus */
.spec-body{padding:0 0 1.2em}

.spec-client{border-top:1px solid var(--rule)}
.spec-client > summary{
  font-family:var(--serif);font-size:clamp(15px,1.05rem,17px);
  color:#3c3a36;cursor:pointer;list-style:none;
  padding:.75em 0;padding-inline:0;display:flex;justify-content:flex-start;align-items:center;gap:6px;
}
.spec-client > summary::-webkit-details-marker{display:none}
.spec-client > summary::before{content:'— ';color:var(--muted)}
.spec-client > summary::after{
  content:'view';font-family:var(--mono);font-size:.66rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  margin-left:auto;padding-left:16px;
}
.spec-client[open] > summary::after{content:'close'}
.client-body{padding:.4em 0 1.4em}

/* sample image + placeholder */
.sample{display:block;width:100%;height:auto;border:1px solid var(--rule);margin:0 0 1.2em}
.sample-placeholder{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);border:1px dashed var(--rule);
  padding:2.4em 1em;text-align:center;margin:0 0 1.2em;
}
blockquote.tm{margin:0;padding:0 0 0 2.2em;position:relative}
blockquote.tm::before{content:'\201C';font-family:var(--serif);font-size:4.5rem;line-height:.8;color:var(--ink);position:absolute;left:0;top:.05em}
blockquote.tm q{
  font-family:var(--serif);font-style:italic;quotes:none;
  font-size:clamp(15px,1.05rem,17px);line-height:1.6;display:block;
}
blockquote.tm q:before,blockquote.tm q:after{content:''}
blockquote.tm cite{
  font-family:var(--mono);font-style:normal;font-size:.7rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  display:block;margin-top:.9em;
}

/* placeholder page note */
.note{
  font-family:var(--mono);font-size:.82rem;line-height:1.7;color:var(--muted);
  border:1px dashed var(--rule);padding:clamp(20px,4vw,28px);margin:clamp(24px,5vw,36px) 0;
}

/* footer */
footer{padding:18px 0 40px}
.endmatter{display:flex;justify-content:space-between;align-items:center;padding-top:14px}
.footer-legal{display:flex;gap:18px}
.footer-legal a{font-family:var(--mono);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);text-decoration:none;transition:color .2s}
.footer-legal a:hover{color:var(--ink)}
.social{display:inline-flex;align-items:center;color:var(--muted);transition:color .2s}
.social:hover{color:var(--ink)}
.social svg{width:16px;height:16px;display:block;fill:currentColor}

/* contact LinkedIn line */
.li-line{display:flex;align-items:center;gap:.55em}
.li-line svg{width:17px;height:17px;fill:var(--ink);flex:none}

/* ---- portfolio samples grid ---- */
.pf-grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(14px,3vw,22px);margin-top:clamp(24px,5vw,36px);
}
@media (max-width:520px){.pf-grid{grid-template-columns:1fr}}
.tile{
  border:1px solid var(--rule);display:block;text-decoration:none;color:var(--ink);
  transition:border-color .2s;
}
.tile:hover{border-color:var(--ink)}
.tile .thumb{
  aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;
  border-bottom:1px solid var(--rule);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);
}
.tile img.thumb{object-fit:cover;width:100%;height:auto;display:block;padding:0}
.tile .cap{
  font-family:var(--mono);font-size:.78rem;letter-spacing:.04em;
  padding:.9em 1.1em;display:block;
}

/* link from home testimonials block to full page */
.tm-more{margin-top:clamp(24px,5vw,34px)}
.tm-attrib{display:flex;align-items:center;gap:16px;margin-top:1.1em}
.tm-attrib cite{display:flex;flex-direction:column;line-height:1.35;margin-top:0;
  text-transform:none;letter-spacing:0;font-style:normal}
.tm-attrib .tm-name{font-family:var(--mono);font-weight:600;font-size:14px;
  letter-spacing:.01em;color:var(--ink)}
.tm-attrib .tm-role{font-family:var(--mono);font-size:12.5px;letter-spacing:0;
  color:var(--muted)}
.tm-photo{width:56px;height:56px;flex:0 0 56px;border-radius:50%;
  object-fit:cover;filter:grayscale(100%) contrast(1.04);display:block}

.sample-frame{max-height:520px;overflow:auto;border:1px solid var(--rule);margin:0 0 1em;background:#faf9f7;cursor:zoom-in}
.sample-frame img{display:block;width:100%;height:auto}
.frame-note{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 1.4em;display:block;cursor:zoom-in}
.lightbox{position:fixed;inset:0;z-index:1000;display:none;background:rgba(22,22,22,.92);overflow:auto;padding:54px 0 60px;-webkit-overflow-scrolling:touch}
.lightbox.open{display:block}
.lightbox img{display:block;margin:0 auto;width:auto;max-width:100%;height:auto}
.lb-video{display:none;width:90vw;max-width:900px;aspect-ratio:16/9;margin:0 auto}
.lb-video iframe{width:100%;height:100%;display:block;border:0}
.lb-close{position:fixed;top:14px;right:18px;z-index:1001;background:none;border:0;cursor:pointer;font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--paper);opacity:.85}
.lb-close:hover{opacity:1}