/* Retype — styles for the standalone pages (/work/, /services/, /journal/).
   Shared primitives, header and contact styles come from styles.css. */
body.page { background: var(--rt-black); color: var(--text-primary); }

/* Page header: logo (home), links between the pages, contact pill */
.page-nav { display: flex; gap: 8px; margin-right: auto; }
.page-nav-link { text-decoration: none; }
.page-header .page-nav-link.glass-pill[aria-current="page"] { background: #fff; color: var(--rt-ink); border-color: #fff; }
/* Soft dark fade behind the fixed header so scrolled content stays readable under it */
.page-header { background: linear-gradient(var(--rt-black) 55%, rgba(8,8,8,0)); }

/* ---------- Work page ---------- */
.work { position: relative; height: 460vh; background: #080808; }
.work-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; perspective: 1000px; perspective-origin: 50% 45%; }
.work-space { position: absolute; inset: 0; transform-style: preserve-3d; }
.work-space > [data-z] { position: absolute; left: 50%; top: 50%; will-change: transform, opacity; }
.work-space .deco { width: 46vw; }
.work-heading { width: 90vw; display: flex; justify-content: center; transform: translate3d(-50%,-50%,0); }
.shot { width: min(64vw,960px); background: var(--surface-media); }
.shot img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.work-hud-top { position: absolute; top: 104px; left: var(--gutter); right: var(--gutter); display: flex; justify-content: space-between; gap: 16px; }
.work-hud {
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: 28px;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 40px;
  padding-top: 18px; border-top: 1px solid var(--border-hairline);
  opacity: 0; transition: opacity .5s var(--ease-out);
}
.work-hud.on { opacity: 1; }
.hud-text { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.hud-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 20px; }
.project-name { font: var(--type-project); letter-spacing: var(--tracking-title); }
.label-link { font: var(--type-label); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.work-track { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--border-hairline); }
.work-track > div { height: 100%; background: var(--rt-blue); transform-origin: 0 50%; transform: scaleX(0); }

/* ---------- Services page: four wireframe cards ---------- */
.svc { padding: clamp(140px,16vw,220px) var(--gutter) var(--section-pad-bottom); }
.svc-head { display: flex; flex-direction: column; gap: 18px; margin-bottom: clamp(48px,7vw,96px); }
.svc-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(16px,2vw,28px); }
/* Each service is a till receipt: torn paper, monospace print, itemised lines and a barcode */
.svc-card {
  --paper: #f4f2ec; --ink: #141414; --line: rgba(20,20,20,.5);
  position: relative; display: flex; flex-direction: column; gap: 20px; min-width: 0;
  padding: clamp(34px,3.4vw,48px) clamp(24px,3vw,40px); background: var(--paper); color: var(--ink);
  font: 400 14px/1.6 var(--f-mono); letter-spacing: .01em;
  box-shadow: 0 30px 40px -24px rgba(0,0,0,.8);
  transition: translate .45s var(--ease-out), transform .7s var(--ease-out), opacity .7s var(--ease-out);
}
.svc-card:nth-child(odd) { rotate: -.6deg; }
.svc-card:nth-child(even) { rotate: .5deg; }
.svc-card:hover { translate: 0 -6px; }
/* torn zigzag edges, top and bottom, in the page colour */
.svc-card::before, .svc-card::after { content: ""; position: absolute; left: 0; right: 0; height: 8px; pointer-events: none; }
.svc-card::before { top: 0;
  background: linear-gradient(135deg, #080808 50%, transparent 50%) 0 0 / 14px 8px repeat-x,
              linear-gradient(225deg, #080808 50%, transparent 50%) 0 0 / 14px 8px repeat-x; }
.svc-card::after { bottom: 0;
  background: linear-gradient(45deg, #080808 50%, transparent 50%) 0 100% / 14px 8px repeat-x,
              linear-gradient(315deg, #080808 50%, transparent 50%) 0 100% / 14px 8px repeat-x; }
.svc-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 18px; border-bottom: 1px dashed var(--line); }
.svc-num { font-size: 12px; line-height: 1.5; letter-spacing: .08em; text-transform: uppercase; }
.svc-art { width: clamp(84px,9vw,116px); height: auto; fill: none; stroke: var(--rt-blue); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.svc-title { margin: 0; font: 700 clamp(20px,1.9vw,28px)/1.2 var(--f-mono); letter-spacing: .02em; text-transform: uppercase; text-wrap: balance; }
.svc-desc { margin: 0; color: #3a3a38; max-width: 56ch; text-wrap: pretty; }
/* line items: name, dotted leader, a tick */
.svc-list { list-style: none; margin: auto 0 0; padding: 18px 0 0; border-top: 1px dashed var(--line); display: grid; gap: 8px; }
.svc-list li { display: flex; align-items: baseline; gap: 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
.svc-list li::before { content: ""; order: 1; flex: 1 0 24px; border-bottom: 1px dotted var(--line); }
.svc-list li::after { content: "✓"; order: 2; color: var(--rt-blue); }
/* barcode at the foot */
.svc-list::after { content: ""; display: block; height: 40px; width: 70%; margin: 18px auto 6px; padding-top: 18px; border-top: 1px dashed var(--line); background-clip: content-box;
  background-image: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px 8px, var(--ink) 8px 11px, transparent 11px 12px, var(--ink) 12px 13px, transparent 13px 17px); }
.svc-card { scroll-margin-top: 110px; } /* links from the homepage land below the fixed header */
/* scroll-in */
.svc-card[data-reveal] { opacity: 0; transform: translateY(40px); }
.svc-card[data-reveal].in { opacity: 1; transform: none; }

/* ---------- Journal page ---------- */
.journal { padding: clamp(80px,10vw,160px) var(--gutter) var(--section-pad-top); }
.journal-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: clamp(40px,6vw,80px); }
.index-label { font: var(--type-label); letter-spacing: var(--tracking-label); color: var(--accent-on-dark); margin-bottom: 12px; }
.journal-note { margin: 0; max-width: 300px; font: 400 12px/1.6 var(--f-mono); letter-spacing: .03em; text-transform: uppercase; color: var(--text-meta); }
.journal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,300px),1fr)); gap: 48px var(--gap-cards); perspective: 1200px; }
.tilt { display: flex; transform-origin: 50% 0%; }
.jcard:not(.compact) {
  flex: 1; display: flex; flex-direction: column; gap: 18px; border-top: 1px solid var(--border-rule); padding-top: 20px;
  color: var(--text-primary); transition: opacity var(--dur-hover) var(--ease-out);
}
.jcard:not(.compact):hover { opacity: .8; color: var(--text-primary); }
.jcard .meta { display: flex; justify-content: space-between; gap: 12px; letter-spacing: var(--tracking-label); text-transform: uppercase; font: var(--type-label-sm); color: var(--text-meta); }
.jcard:not(.compact) .cat { color: var(--accent-on-dark); }
.jcard h3 { margin: 0; font: var(--type-article); letter-spacing: -.015em; text-wrap: pretty; }
.jcard p { margin: 0; font: var(--type-body-sm); color: var(--text-muted); text-wrap: pretty; }
.jcard:not(.compact) .read { margin-top: auto; font: var(--type-label-sm); letter-spacing: var(--tracking-label); text-transform: uppercase; }

.jcard:target { outline: 1px solid var(--accent-on-dark); outline-offset: 14px; }
.page-journal .journal { padding-top: clamp(140px,16vw,220px); }

/* Footer link back to contact / home */

@media (max-width: 760px) {
  .shot { width: 84vw; }
  .work-space .deco { width: 70vw; }
  .page-header { gap: 10px; }
  .page-header .logo { flex-shrink: 0; }
  .page-header .logo img { height: 24px; }
  .page-nav { gap: 5px; }
  .page-header .page-nav-link.glass-pill { height: 34px; padding: 0 11px; font-size: 13px; letter-spacing: .02em; }
  .page-header .contact-pill { display: none; }
  .svc-grid { grid-template-columns: 1fr; }
}

/* Contact page: the blue section runs under the header, so no dark fade there */
.page-contact .page-header { background: none; }