/* TOKENS */
:root { --bg:#2c3440; --surface:#616161; --surface-2:#3d4858; --ink:#e8e4dc; --ink-muted:#9aaa9e; --teal:#02D0CD; --teal-dark:#01b0ae; --border:rgba(255,255,255,0.09); --radius:5px; --radius-card:16px; --font-body:'DM Sans',system-ui,sans-serif; --shadow-card:0 10px 30px rgba(0,0,0,0.3); --transition:0.2s ease; --accent:#02D0CD; --accent2:#ef821e; --text-dim:#9aaa9e; }
body.light { --bg:#f2f0ec; --surface:#e8e4dd; --surface-2:#e8e4dc; --ink:#1a1a18; --ink-muted:#5a5a55; --teal:#019997; --teal-dark:#017a78; --border:#d4cfc6; --accent:#019997; }

/* BANNER */
.banner { width:100%; margin:5px auto 10px; position:relative; overflow:hidden; border-radius:var(--radius-card); box-shadow:var(--shadow-card); display:block; }
.banner img { display:block; width:100%; height:100px; object-fit:cover; object-position:center 60%; z-index:1; }
.banner::before { content:''; position:absolute; inset:0; background:linear-gradient(to bottom,rgba(0,0,0,0.0),rgba(0,0,0,0.0)); z-index:2; }
.banner-title { position:absolute; top:25%; left:50%; transform:translate(-50%,-50%); color:#f1ede6; font-size:2.2rem; font-weight:700; z-index:3; text-shadow:0 4px 12px rgba(0,0,0,0.8); white-space:nowrap; }
.banner-subtitle { position:absolute; top:70%; left:50%; transform:translate(-50%,-50%); color:#f1ede6; font-size:1.2rem; font-weight:700; z-index:3; text-shadow:0 4px 12px rgba(0,0,0,0.8); white-space:nowrap; }
.banner-about { position:absolute !important; top:10px; right:15px; z-index:4; }
.banner-about button { width:40px; height:40px; border-radius:50%; border:none; background:rgba(0,0,0,0.55); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background 0.3s,transform 0.2s; }
.banner-about button:hover { background:rgba(0,0,0,0.85); transform:scale(1.1); }

/* MAIN & GALLERY */
main { max-width:1400px; margin:0 auto; padding:32px 0 64px; }
.gallery { column-count:1; column-gap:1rem; }
@media (min-width:600px) { .gallery { column-count:3; } }
@media (min-width:1024px) { .gallery { column-count:4; } }

/* CARD */
.card { display:inline-block; width:100%; margin-bottom:16px; break-inside:avoid; border-radius:var(--radius-card); overflow:hidden; box-shadow:var(--shadow-card); cursor:pointer; transition:transform 0.3s ease; }
.card:hover { transform:scale(1.02); }
.card-image { width:100%; height:auto; }
.card-content { padding:1rem; }
.card-title { font-size:1.2rem; font-weight:600; }
.card-subtitle { font-size:0.9rem; color:#555; margin-top:0.5rem; }

/* MODAL */
.modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.95); z-index:1000; }
.modal-content { position:relative; width:95%; height:95%; margin:2.5% auto; background:#000; border-radius:20px; overflow:hidden; }
.close-btn { position:absolute; top:20px; right:20px; width:48px; height:48px; border-radius:50%; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2); color:#fff; font-size:24px; cursor:pointer; z-index:1001; display:flex; align-items:center; justify-content:center; transition:background var(--transition); }
.close-btn:hover { background:rgba(255,255,255,0.25); }
#viewer { width:100%; height:100%; }

/* ABOUT OVERLAY */
.about-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.85); z-index:10001; backdrop-filter:blur(5px); }
.about-content { position:relative; width:90%; max-width:700px; max-height:80vh; margin:5vh auto; background:linear-gradient(135deg,#fff 0%,#ccc 100%); color:#4a596f; border-radius:20px; padding:3rem; box-shadow:0 20px 60px rgba(0,0,0,0.5); overflow-y:auto; }
.about-close-btn { position:absolute; top:20px; right:20px; width:40px; height:40px; border-radius:50%; background:rgba(0,0,0,0.1); border:1px solid rgba(0,0,0,0.2); color:#333; font-size:24px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background 0.3s,transform 0.3s; }
.about-close-btn:hover { background:rgba(0,0,0,0.2); transform:rotate(90deg); }

/* TOOLTIP */
.tooltip { position:relative; }
.tooltiptext { visibility:hidden; opacity:0; position:absolute; bottom:-40px; right:0; background:rgba(0,0,0,0.85); color:#fff; padding:6px 10px; border-radius:6px; font-size:13px; white-space:nowrap; transition:opacity 0.25s; }
.tooltip:hover .tooltiptext { visibility:visible; opacity:1; }

/* SECTION */
.section { margin-bottom:28px; border:1px solid var(--border); border-radius:6px; overflow:hidden; background:var(--surface); }
.section-header { padding:10px 18px; background:var(--bg); border-bottom:1px solid var(--border); display:flex; align-items:center; gap:10px; }
.section-header h2 { font-family:'Syne',sans-serif; font-size:13px; font-weight:600; color:var(--accent); text-transform:uppercase; letter-spacing:0.1em; }
.section-header .dot { width:6px; height:6px; border-radius:50%; background:var(--accent2); animation:pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:0.4; transform:scale(0.7); } }
.section-body { padding:0; }

/* MEDIA */
.webcam-img { width:100%; height:auto; display:block; }
.video-wrapper { position:relative; padding-bottom:56.25%; height:0; overflow:hidden; }
.video-wrapper video { position:absolute; inset:0; width:100%; height:100%; background:#000; }

/* HISTORY GRID */
.history-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border); }
.prev-day-item { background:var(--bg); }
.prev-day-label { font-family:'Syne',sans-serif; font-size:11px; text-transform:uppercase; letter-spacing:0.1em; color:var(--accent); padding:8px 10px; border-bottom:1px solid var(--border); }
.prev-day-item .video-wrapper { padding-bottom:56.25%; }

/* LOT */
.lot-img { width:100%; height:auto; display:block; }
.lot-caption { padding:10px 18px 14px; font-size:12px; color:var(--text-dim); line-height:1.5; background:var(--bg); border-top:1px solid var(--border); }

/* GALLERY GRID (inner) */
.gallery-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:16px; background:var(--bg); }
.gallery-grid a { display:block; border:1px solid var(--accent); border-radius:4px; overflow:hidden; transition:border-color 0.2s,box-shadow 0.2s,transform 0.2s; }
.gallery-grid a:hover { border-color:var(--accent2); box-shadow:0 0 0 2px var(--accent2),0 0 28px rgba(239,130,46,0.5); transform:translateY(-3px); }
.gallery-grid img { width:100%; height:auto; display:block; }

@media (max-width:600px) {
  .banner-about { top:8px; right:10px; }
  .banner-title { font-size:1.6rem; }
  .banner-subtitle { font-size:1rem; }
}

/* MAIN */


<style>
  @import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:wght@200;300;400&display=swap');

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

  .ph-wrap {
    font-family: 'DM Sans', sans-serif;
    background: var(--color-background-primary);
    min-height: 560px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3.5rem 2rem;
    position: relative;
    overflow: hidden;
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: var(--border-radius-lg);
  }

  .ph-film-strip {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 52px;
    display: flex;
    align-items: center;
    background: var(--color-text-primary);
    overflow: hidden;
  }
  .ph-film-strip-bot {
    top: auto;
    bottom: 0;
  }
  .ph-perf {
    flex-shrink: 0;
    width: 20px;
    height: 52px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    padding: 6px 4px;
  }
  .ph-perf span {
    display: block;
    width: 10px;
    height: 7px;
    background: var(--color-background-primary);
    border-radius: 2px;
  }
  .ph-frame-cell {
    flex-shrink: 0;
    width: 56px;
    height: 38px;
    border: 1px solid rgba(255,255,255,0.18);
    margin: 0 2px;
  }

  .ph-aperture {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 380px;
    height: 380px;
    border-radius: 50%;
    border: 0.5px solid var(--color-border-tertiary);
    opacity: 0.25;
    pointer-events: none;
  }
  .ph-aperture2 {
    width: 240px;
    height: 240px;
    opacity: 0.15;
  }

  .ph-eyebrow {
    font-size: 10px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--color-text-tertiary);
    font-weight: 300;
    margin-bottom: 1.6rem;
    opacity: 0;
    animation: phUp 0.7s ease 0.15s forwards;
  }

  .ph-title {
    font-family: 'DM Serif Display', serif;
    font-size: clamp(54px, 9vw, 96px);
    font-weight: 400;
    color: var(--color-text-primary);
    line-height: 0.95;
    letter-spacing: -0.02em;
    text-align: center;
    margin-bottom: 0.15em;
    opacity: 0;
    animation: phUp 0.8s ease 0.28s forwards;
  }
  .ph-title em {
    font-style: italic;
    color: var(--color-text-secondary);
  }

  .ph-sub {
    font-size: clamp(13px, 1.8vw, 15px);
    font-weight: 200;
    color: var(--color-text-secondary);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 2.8rem;
    opacity: 0;
    animation: phUp 0.8s ease 0.42s forwards;
  }

  .ph-shutter {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 2.8rem;
    opacity: 0;
    animation: phUp 0.7s ease 0.56s forwards;
  }
  .ph-shutter-line {
    height: 0.5px;
    width: 50px;
    background: var(--color-border-primary);
  }
  .ph-lens {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 0.5px solid var(--color-border-primary);
    display: flex; align-items: center; justify-content: center;
  }
  .ph-lens-inner {
    width: 16px; height: 16px;
    border-radius: 50%;
    border: 0.5px solid var(--color-border-secondary);
    display: flex; align-items: center; justify-content: center;
  }
  .ph-lens-dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--color-text-tertiary);
    opacity: 0.5;
  }

  .ph-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 2.8rem;
    opacity: 0;
    animation: phUp 0.7s ease 0.68s forwards;
  }
  .ph-tag {
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    border: 0.5px solid var(--color-border-secondary);
    padding: 5px 14px;
    font-weight: 300;
  }

  .ph-form {
    display: flex;
    opacity: 0;
    animation: phUp 0.7s ease 0.8s forwards;
  }
  .ph-form input {
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    letter-spacing: 0.1em;
    font-weight: 300;
    border: 0.5px solid var(--color-border-secondary);
    border-right: none;
    padding: 10px 18px;
    background: var(--color-background-primary);
    color: var(--color-text-primary);
    outline: none;
    width: 210px;
  }
  .ph-form input::placeholder { color: var(--color-text-tertiary); }
  .ph-form button {
    font-family: 'DM Sans', sans-serif;
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 400;
    border: 0.5px solid var(--color-border-secondary);
    padding: 10px 20px;
    background: var(--color-text-primary);
    color: var(--color-background-primary);
    cursor: pointer;
    transition: opacity 0.2s;
  }
  .ph-form button:hover { opacity: 0.72; }

  .ph-note {
    margin-top: 2rem;
    font-size: 20px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-text-tertiary);
    font-weight: 300;
    opacity: 0;
    animation: phUp 0.7s ease 0.94s forwards;
  }
  .ph-confirmed {
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    font-weight: 300;
    padding: 10px 0;
  }

  @keyframes phUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
  }
</style>