/* ------------------------------------------------------------------
   How it works and the Gallery (owner, 19 October 2026;
   designs/2026-10-19-owner-list, point 6). Loaded by those two pages
   only; site.css is the ground. Every card and tile in a row is the same
   size, so nothing sits unevenly, on a phone as on a computer.
   ------------------------------------------------------------------ */

/* ---------------------------------------------------- How it works */
.gd{padding-top:22px}
.gd-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:28px;align-items:center;margin:10px 0 26px}
.gd-intro{display:grid;gap:10px;align-content:start}
.gd-intro h1{font-family:var(--display);font-weight:500;font-size:clamp(26px,3vw,38px);line-height:1.12;color:var(--navy)}
.gd-intro p{color:var(--mid);font-size:16px;max-width:52ch}
.gd-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.gd-video{margin:0;display:grid;gap:8px}
.gd-frame{aspect-ratio:16/9;width:100%;border-radius:14px;overflow:hidden;background:var(--navy-deep);box-shadow:0 18px 40px -26px rgba(8,30,54,.6)}
.gd-frame video,.gd-frame iframe{display:block;width:100%;height:100%;border:0;background:#000}
.gd-novideo{height:100%;display:grid;place-content:center;justify-items:center;gap:12px;color:#C9DBEE;font-size:15px}
.gd-novideo span{width:64px;height:64px;border-radius:50%;background:var(--gold);position:relative}
.gd-novideo span::after{content:"";position:absolute;left:26px;top:20px;border-left:18px solid #22190A;border-top:12px solid transparent;border-bottom:12px solid transparent}
.gd-video figcaption{font-size:14px;color:var(--mid);text-align:center}

.gd-tabs{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:18px}
.gd-tabs[hidden]{display:none}
.gd-tabs button{font:inherit;font-size:15px;font-weight:600;border:1px solid var(--line);background:var(--paper);color:var(--mid);
  border-radius:999px;padding:8px 18px;cursor:pointer}
.gd-tabs button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.gd-sec{margin-bottom:26px}
.gd-sec[hidden]{display:none}
.gd-sec h2{font-family:var(--display);font-weight:500;font-size:24px;color:var(--navy);margin-bottom:12px}
.gd-tabbed .gd-sec h2{display:none}
/* Every step, one row each: the real screen with a gold ring on what to
   press, and the words in order (owner, 19 October 2026). */
.gd-count{font-size:14px;color:var(--mid);margin:-4px 0 16px}
.gd-steps{list-style:none;margin:0;padding:0;display:grid;gap:20px}
.gd-step{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:30px;align-items:center;background:var(--paper);
  border:1px solid var(--line);border-radius:18px;padding:20px 24px 20px 20px}
.gd-shot{display:block;width:100%;padding:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;cursor:zoom-in;
  box-shadow:0 18px 40px -26px rgba(8,30,54,.55);text-align:left}
.gd-bar{display:flex;gap:6px;padding:8px 12px;background:#e9eef4;border-bottom:1px solid var(--line-2)}
.gd-bar i{width:9px;height:9px;border-radius:50%;background:#c3ccd7}
.gd-shot img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top}
.gd-shot:focus-visible{outline:3px solid var(--gold-lt);outline-offset:3px}
.gd-tx{display:grid;gap:10px;align-content:center;min-width:0}
.gd-n{font-family:var(--data);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-ink)}
.gd-tx h3{font-family:var(--display);font-weight:500;font-size:26px;line-height:1.15;color:var(--navy);margin:0;text-wrap:balance}
.gd-say{font-size:16px;color:var(--mid);margin:0}
.gd-do{margin:2px 0 0;padding:0;list-style:none;display:grid;gap:9px;counter-reset:gd-do}
.gd-do li{counter-increment:gd-do;display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:start;font-size:15.5px;line-height:1.5;color:var(--ink)}
.gd-do li::before{content:counter(gd-do);width:26px;height:26px;border-radius:50%;background:var(--gold-wash);border:1px solid #f0d9a6;
  color:var(--gold-ink);font-size:13px;font-weight:700;display:grid;place-items:center}
.gd-tip{font-size:14px;line-height:1.5;color:var(--mid);background:var(--ground);border-radius:10px;padding:10px 12px;margin:0}
.gd-go{font-size:14.5px;font-weight:600;color:var(--navy)}
@media (max-width:900px){
  .gd-head{grid-template-columns:minmax(0,1fr)}
  .gd-step{grid-template-columns:minmax(0,1fr);gap:16px;padding:14px}
  .gd-tx h3{font-size:22px}
}
@media (max-width:560px){
  .gd-steps{gap:14px}
  .gd-bar{padding:6px 10px}
  .gd-do li{font-size:15px}
}

/* -------------------------------------------------------- the Gallery */
.gl{padding-top:22px}
.gl-head{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap;margin:10px 0 18px}
.gl-head h1{font-family:var(--display);font-weight:500;font-size:clamp(26px,3vw,36px);color:var(--navy);margin-top:6px}
.gl-tabs{display:flex;gap:6px;flex-wrap:wrap}
.gl-tabs[hidden]{display:none}
.gl-tabs button{font:inherit;font-size:14px;font-weight:600;border:1px solid var(--line);background:var(--paper);color:var(--mid);
  border-radius:999px;padding:7px 16px;cursor:pointer}
.gl-tabs button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.gl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:18px}
.gl-item{margin:0;display:grid;gap:8px;min-width:0}
.gl-item[hidden]{display:none}
.gl-im{position:relative;display:block;width:100%;aspect-ratio:4/3;border:0;padding:0;border-radius:12px;overflow:hidden;background:var(--ground-2);cursor:zoom-in}
.gl-im img,.gl-im video{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.gl-v::after{content:"";position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:rgba(6,17,29,.6)}
.gl-v::before{content:"";position:absolute;left:50%;top:50%;z-index:1;margin:-10px 0 0 -6px;border-left:17px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent}
.gl-item figcaption{font-size:14px;font-weight:500;line-height:1.35;color:var(--ink);min-height:2.7em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gl-empty{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:30px;text-align:center;display:grid;gap:6px;color:var(--mid)}
.gl-empty b{color:var(--ink);font-size:17px}
.gl-box{position:fixed;inset:0;z-index:300;background:rgba(4,14,26,.94);display:grid;grid-template-rows:auto minmax(0,1fr) auto;
  padding:max(12px,env(safe-area-inset-top,0px)) 16px max(16px,env(safe-area-inset-bottom,0px))}
.gl-box[hidden]{display:none}
.gl-x{justify-self:end;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;font-size:26px;cursor:pointer}
.gl-stage{display:grid;place-items:center;min-height:0}
.gl-stage img,.gl-stage video{max-width:100%;max-height:100%;border-radius:8px}
.gl-cap{color:#DCE8F5;text-align:center;font-size:15px;margin:10px 0 0}