@import url('https://fonts.googleapis.com/css2?family=VT323&family=Share+Tech+Mono&display=swap');

/* ── VARIABLES ── */
:root {
  --cyan:    #ABDADC;
  --link-color: var(--cyan);
  --yellow:  #FFB33F;
  --magenta: #E83C91;
  --white:   #e9e9e9;
  --black:   #000000;
  --blue:    #134E8E;
  --red:     #F26076;
  --green:   #59CE8F;
  --bg:      #000030;
  --dim:     #888888;
  --scan:    rgba(0,0,0,0.1);
  --page-width: 1400px;
  --prose-width: 680px;

  --text-xxs:   9px;  /* ×1.25 */
  --text-xs:   11px;  /* base */
  --text-sm:   14px;  /* ×1.25 */
  --text-base: 17px;  /* ×1.25 */
  --text-md:   21px;  /* ×1.25 */
  --text-lg:   27px;  /* ×1.25 */
  --text-xl:   34px;  /* ×1.25 */
  --text-xxl:  43px;  /* ×1.25 */
  --text-xxxl: 54px;  /* ×1.25 */

  /* ── ADDITIONS: paper palette for cameras.css ──
     These are only used by cameras.html / cameras.css.
     Nothing in the existing site references them. */
  --paper:        #f0ebb8;
  --paper-dark:   #e6e0a8;
  --paper-line:   #c8b080;
  --paper-rule:   #8a7050;
  --ink:          #1a1008;
  --ink-light:    #2a1a08;
  --ink-faint:    #5a4020;
  --ink-ghost:    #8a7050;
  --ink-gold:     #c8a840;
}

/* ── RESET ── */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* ── BASE ── */
body {
  background: var(--bg);
  color: var(--white);
  font-family: 'VT323', monospace;
  font-size: var(--text-md);
  overflow-x: hidden;
  cursor: crosshair;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── STICKY FOOTER ── */
/* The main content area on each page grows to fill available space,
   pushing the footer to the bottom regardless of content length.
   Targets: <main> (index), #photographs-index (photographs),
            #image-grid-wrap (photograph), #contact-wrap (contact) */
main,
#photographs-index,
#image-grid-wrap,
#contact-wrap {
  flex: 1;
}

/* ── CRT: SCANLINES ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    var(--scan) 2px,
    var(--scan) 4px
  );
  pointer-events: none;
  z-index: 9999;
}

/* ── CRT: VIGNETTE + FLICKER ── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,0.45) 100%);
  pointer-events: none;
  z-index: 9998;
  animation: flicker 0.4s infinite;
}

/* ── KEYFRAMES ──────────────────────────────────────────────
   flicker: used by body::after (CRT vignette) AND by
            .tl-field-value--warn / .tl-status-alert in photograph.css.
   blink:   used by .blink utility AND .tl-cursor in photograph.css.
   Both were already implicitly expected by photograph.css; defining
   them here means photograph.css does not need its own copies.
   ────────────────────────────────────────────────────────── */
@keyframes flicker {
  0%, 94%, 100% { opacity: 1; }
  93%            { opacity: 0.82; }
  96%            { opacity: 0.91; }
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ── TELETEXT COLOUR STRIP ── */
.tele-strip        { display: flex; height: 6px; }
.tele-strip div    { flex: 1; }

/* -- INLINE IMAGE STYLING -- */

/* ══════════════════════════════════════════════════════
   .gui-frame  —  travel-log styled decorative image frame
   Mirrors the .tl-* structure from photograph.css exactly,
   recoloured to #FFB33F as the base accent.
 
   Usage:
     <figure class="gui-frame">
       <div class="gui-frame__chrome">
         <div class="gui-frame__chrome-left">
           <span class="gui-frame__dot"></span>
           <span class="gui-frame__label">IMG VIEWER</span>
         </div>
         <span class="gui-frame__meta">FILENAME.JPG</span>
       </div>
       <div class="gui-frame__screen">
         <img src="your-image.jpg" alt="…">
       </div>
       <div class="gui-frame__rebate">
         <span class="gui-frame__caption"><em>LOCATION</em> · YEAR</span>
         <span class="gui-frame__info">35MM · f/8 · 1/250s</span>
       </div>
     </figure>
   ══════════════════════════════════════════════════════ */
 
.gui-frame {
  display: inline-flex;
  width: 300px;
  flex-direction: column;
  background: #1a1000;
  border: 3px solid #5c3c00;
  border-radius: 8px;
  overflow: hidden;
  max-width: 100%;
  container-type: inline-size;
  align-content: center;
}
 
/* ── Chrome bar  (mirrors .tl-chrome) ── */
.gui-frame__chrome {
  background: #261800;
  border-bottom: 1px solid #3d2800;
  padding: 6px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.gui-frame__chrome-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.gui-frame__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #FFB33F;
  flex-shrink: 0;
  display: block;
}
.gui-frame__label {
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  color: #FFB33F;
  letter-spacing: 2px;
}
.gui-frame__meta {
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  color: #5c3c00;
  letter-spacing: 1px;
}
 
/* ── Screen  (mirrors .tl-screen) ── */
.gui-frame__screen {
  background: #120c00;
  position: relative;
  overflow: hidden;
  line-height: 0;
}
 
.gui-frame__screen img {
  display: block;
  max-width: 100%;
  height: auto;
  position: relative;
  z-index: 1;
  width: 100%;
}
 
/* ── Rebate  (mirrors .tl-status) ── */
.gui-frame__rebate {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 14px;
  background: #1a1000;
  border-top: 1px solid #3d2800;
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  letter-spacing: 2px;
}
.gui-frame__caption { color: #5c3c00; }
.gui-frame__info    { color: #5c3c00; }
 
/* highlighted text inside caption */
.gui-frame__caption em {
  font-style: normal;
  color: #FFB33F;
}

@container (max-width: 280px) {
  .gui-frame__meta { display: none; }
}

/* ── ASCII ART ── */
.ascii-art {
  font-family: monospace;
  font-size: 3px;
  line-height: 1;
  letter-spacing: 0;
  white-space: pre;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0;
}

/* ── STATUS BAR ──────────────────────────────────────────────
   position:relative + z-index:10 added so #statusbar always
   sits above #photograph-header's internal stacking context
   (hero-vignette z:1, hero-scanlines z:2, hero-content z:5).
   ────────────────────────────────────────────────────────── */
#statusbar {
  position: relative;
  z-index: 10;
  background: var(--blue);
  display: flex;
  justify-content: space-between;
  padding: 2px 28px;
  font-size: var(--text-base);
  border-bottom: 2px solid var(--cyan);
  letter-spacing: 1.px;
  color: rgba(255, 255, 255, 0.5)
}
#clock { color: var(--yellow); }

/* ── HEADER ── */
header {
  background: var(--bg);
  border-bottom: 3px double var(--cyan);
}

.header-top {
  background: rgba(0, 255, 255, 0.9);
  color: var(--bg);
  padding: 4px 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-sm);
  font-family: 'Share Tech Mono', monospace;
}

.page-num {
  background: var(--black);
  color: var(--cyan);
  padding: 2px 8px;
  font-size: var(--text-md);
  font-family: 'VT323', monospace;
}

.site-title {
  background: var(--bg);
  font-size: var(--text-xxxl);
  color: var(--yellow);
  text-align: center;
  padding: 8px;
  letter-spacing: 4px;
  line-height: 1;
  text-shadow: 3px 3px 0 var(--red), -1px -1px 0 var(--magenta);
  animation: title-glow 2s ease-in-out infinite alternate;
}

@keyframes title-glow {
  from { text-shadow: 3px 3px 0 var(--red), -1px -1px 0 var(--magenta), 0 0 8px var(--yellow); }
  to   { text-shadow: 3px 3px 0 var(--red), -1px -1px 0 var(--magenta), 0 0 20px var(--yellow), 0 0 40px rgba(255,255,0,0.3); }
}

.tagline {
  color: var(--cyan);
  text-align: center;
  font-size: var(--text-md);
  padding-bottom: 8px;
  letter-spacing: 3px;
}

.breadcrumb {
  color: var(--dim);
  text-align: center;
  font-size: var(--text-base);
  padding-bottom: 6px;
  font-family: 'Share Tech Mono', monospace;
  letter-spacing: 2px;
}
.breadcrumb a { color: var(--cyan); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

/* ── NAV ──────────────────────────────────────────────────────
   position:relative + z-index:10 added — same reason as
   #statusbar above.
   ────────────────────────────────────────────────────────── */
nav {
  position: relative;
  z-index: 10;
  background: var(--bg);
  border-top: 2px solid var(--blue);
  border-bottom: 2px solid var(--red);
  display: flex;
  flex-wrap: wrap;
}
nav a {
  color: var(--white);
  text-decoration: none;
  padding: 4px 16px;
  font-size: var(--text-md);
  letter-spacing: 1px;
  border-right: 1px solid var(--blue);
  transition: background 0.05s;
}
@media (max-width: 600px) {
  nav a {
    padding: 4px 10px;
    font-size: var(--text-base);
  }
}
nav a:hover  { background: var(--blue); color: var(--yellow); }
nav a.active { background: var(--red);  color: var(--white); }

/* ── FOOTER ── */
footer {
  background: var(--blue);
  color: var(--white);
  padding: 4px 8px;
  font-size: var(--text-base);
  display: flex;
  justify-content: space-between;
  border-top: 2px solid var(--cyan);
  margin-top: 2px;
}
footer a { color: var(--yellow); text-decoration: none; }
footer a:hover { text-decoration: underline; }

p a { color: var(--link-color); text-decoration: underline; }
p a:hover { color: var(--yellow); }

/* ── UTILITIES ── */
.blink {
  animation: blink 1s steps(1) infinite;
}

.section-header {
  background: var(--magenta);
  color: var(--black);
  padding: 2px 8px;
  font-size: var(--text-xl);
  letter-spacing: 2px;
  margin-bottom: 10px;
  display: inline-block;
}

.section-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 10px;
}
.section-header-row .section-header {
  margin-bottom: 0;
  flex-shrink: 0;
}

.page-sub {
  font-family: 'Share Tech Mono', monospace;
  font-size: var(--text-base);
  color: #cccccc;
  letter-spacing: 2px;
  margin: 6px 0 20px;
}

.index-notice {
  border: 1px solid #333;
  padding: 6px;
  text-align: left;
  max-width: 280px;
}
.index-notice__label {
  color: var(--red);
  font-size: var(--text-sm);
  letter-spacing: 1px;
}
.index-notice__text {
  color: #888;
  margin-top: 4px;
  font-size: var(--text-xs);
}