/* getyourwebsite.net.au - standalone portfolio page. Uses site.css brand tokens.
 * Theme: layout.php already FOUC-stamps data-theme + loads theme-init / pill CSS /
 * theme-toggle.js. This sheet owns the portfolio chrome + light overrides. */
.gyw-nav {
  display:flex;
  align-items:center;
  gap:24px;
  padding:16px 24px;
  border-bottom:1px solid var(--line, rgba(255,255,255,0.08));
  flex-wrap:wrap;
}
.gyw-nav .brand { font-weight:700; letter-spacing:.2px; }
.gyw-nav a { color:inherit; text-decoration:none; opacity:.85; }
.gyw-nav a:hover { opacity:1; }
.gyw-nav .spacer { flex:1; min-width:8px; }
.gyw-nav .ls-theme-pill { flex-shrink:0; }

.gyw-hero {
  position:relative;
  padding:56px 24px;
  background:linear-gradient(135deg,#0b1f33 0%,#0e2a44 40%,#13b6c4 130%);
  color:#f2f6fa;
}
.gyw-hero .inner { max-width:1100px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
.gyw-hero h1 { font-family:'Instrument Serif',serif; font-size:48px; line-height:1.05; margin:0 0 12px; }
.gyw-hero .accent { color:var(--cyan-2); }
.gyw-hero p { opacity:.9; max-width:46ch; }
.gyw-hero .cta { display:flex; gap:12px; margin-top:20px; flex-wrap:wrap; }
.gyw-logocard {
  width:100%;
  max-width:340px;
  aspect-ratio:1.8;
  justify-self:center;
  border:1px solid rgba(255,255,255,0.12);
  border-radius:14px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,0.03);
  font-family:'Instrument Serif',serif;
  font-size:54px;
}

.gyw-section { max-width:1100px; margin:0 auto; padding:64px 24px; }
.gyw-section h2 { text-align:center; color:var(--cyan-2); font-size:32px; margin:0 0 6px; }
.gyw-section .sub { text-align:center; opacity:.75; margin:0 0 36px; }

.gyw-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.gyw-card {
  border:1px solid var(--line, rgba(255,255,255,0.08));
  border-radius:12px;
  overflow:hidden;
  background:var(--ink-2, rgba(255,255,255,0.02));
  display:flex;
  flex-direction:column;
}
.gyw-card .shot { aspect-ratio:1.5; background:#0c1828 center/cover no-repeat; }
.gyw-card .shot.empty { display:grid; place-items:center; opacity:.4; font-size:12px; }
.gyw-card .body { padding:16px; display:flex; flex-direction:column; gap:8px; flex:1; }
.gyw-card h3 { margin:0; font-size:17px; }
.gyw-card .blurb { opacity:.75; font-size:14px; flex:1; }

.gyw-why { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
.gyw-stats { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.gyw-stat {
  border:1px solid var(--line, rgba(255,255,255,0.08));
  border-radius:12px;
  padding:28px;
  text-align:center;
  background:var(--ink-2, transparent);
}
.gyw-stat .n { color:var(--cyan-2); font-size:40px; font-weight:700; }

.gyw-foot { border-top:1px solid var(--line, rgba(255,255,255,0.08)); padding:48px 24px; }
.gyw-foot .inner { max-width:1100px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:40px; }
.gyw-foot a { color:var(--cyan-2); }

/* Light theme - body/ink/paper already flip via site.css; harden gyw chrome. */
html[data-theme="light"] .gyw-nav {
  border-bottom-color: var(--line, #D5DAE2);
  background: var(--ink-2, #fff);
}
html[data-theme="light"] .gyw-hero {
  background: linear-gradient(135deg, #e8f4fa 0%, #d4ebf5 45%, #9ad8e8 130%);
  color: var(--paper, #0A0E14);
}
html[data-theme="light"] .gyw-hero .accent { color: var(--cyan, #0F8DC2); }
html[data-theme="light"] .gyw-logocard {
  border-color: rgba(15, 141, 194, 0.22);
  background: rgba(255, 255, 255, 0.72);
}
/* Logo SVG is inverted white for dark hero; restore natural mark on light hero. */
html[data-theme="light"] .gyw-logocard img {
  filter: none !important;
}
html[data-theme="light"] .gyw-card {
  border-color: var(--line, #D5DAE2);
  background: var(--ink-2, #fff);
  box-shadow: 0 2px 12px rgba(18, 21, 28, 0.05);
}
html[data-theme="light"] .gyw-card .shot {
  background-color: #dfe8f0;
}
html[data-theme="light"] .gyw-stat {
  border-color: var(--line, #D5DAE2);
  background: var(--ink-2, #fff);
  box-shadow: 0 2px 10px rgba(18, 21, 28, 0.04);
}
html[data-theme="light"] .gyw-section h2,
html[data-theme="light"] .gyw-stat .n {
  color: var(--cyan, #0F8DC2);
}
html[data-theme="light"] .gyw-foot {
  border-top-color: var(--line, #D5DAE2);
  background: var(--ink-3, #EAEEF3);
  color: var(--paper, #0A0E14);
}
html[data-theme="light"] .gyw-foot a { color: var(--cyan, #0F8DC2); }

@media (max-width:900px){
  .gyw-hero .inner,.gyw-why,.gyw-foot .inner{grid-template-columns:1fr}
  .gyw-grid{grid-template-columns:repeat(2,1fr)}
  .gyw-stats{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .gyw-grid{grid-template-columns:1fr}
  .gyw-nav{gap:12px}
}