/* other: blueprint and open possibility. Slate and steel blue, a fine drafting grid,
   dimension lines, construction marks and a glass set square. Every rule is scoped to this panel. */
.theme-panel[data-theme="other"]{
  --tp-bg:radial-gradient(70% 80% at 84% 72%,rgba(84,126,186,.24),transparent 70%),linear-gradient(160deg,#16212F 0%,#101926 52%,#0B121B 100%);
  /* photo: see the ::before rule at the end of this file */
  --tp-photo-pos:70% 50%;
  --tp-overlay:linear-gradient(100deg,rgba(10,16,25,.88) 0%,rgba(10,16,25,.8) 60%,rgba(10,16,25,.38) 100%);
  --tp-accent:#7DA6DA; --tp-accent-2:#A9C7EE;
  --tp-text:#EEF3F9; --tp-text-2:#BAC7D8; --tp-line:rgba(169,199,238,.22);
  --tp-card:rgba(169,199,238,.06); --tp-card-border:rgba(169,199,238,.2);
  --tp-font-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --tp-font-body:"Geist",-apple-system,system-ui,sans-serif;
  --tp-font-label:"Geist Mono",ui-monospace,Menlo,monospace;
  --tp-h3-size:clamp(54px,6.4vw,92px); --tp-h3-weight:300; --tp-h3-stretch:125%; --tp-h3-style:normal; --tp-h3-transform:uppercase; --tp-h3-tracking:.01em;
  --tp-radius:20px; --tp-decor-opacity:1;
  --other-ink:rgba(169,199,238,.5);
  box-shadow:inset 0 1px 0 rgba(214,230,255,.1),0 30px 80px rgba(0,0,0,.45);
}

/* the drafting sheet: a 120px major / 24px minor grid, rulers on the right and bottom edges */
.theme-panel[data-theme="other"] .tp-art{
  background-image:
    linear-gradient(116deg,transparent 54%,rgba(214,230,255,.04) 62%,rgba(214,230,255,.015) 68%,transparent 74%),
    linear-gradient(rgba(169,199,238,.085) 1px,transparent 1px),
    linear-gradient(90deg,rgba(169,199,238,.085) 1px,transparent 1px),
    linear-gradient(rgba(169,199,238,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(169,199,238,.035) 1px,transparent 1px);
  background-size:100% 100%,120px 120px,120px 120px,24px 24px,24px 24px;
  background-position:0 0,-1px -1px,-1px -1px,-1px -1px,-1px -1px;
  -webkit-mask-image:radial-gradient(130% 120% at 100% 100%,#000 42%,rgba(0,0,0,.42) 88%);
  mask-image:radial-gradient(130% 120% at 100% 100%,#000 42%,rgba(0,0,0,.42) 88%);
}
.theme-panel[data-theme="other"] .tp-art::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    repeating-linear-gradient(180deg,var(--other-ink) 0 1px,transparent 1px 12px) right top/6px 100% no-repeat,
    repeating-linear-gradient(180deg,var(--other-ink) 0 1px,transparent 1px 60px) right top/13px 100% no-repeat,
    repeating-linear-gradient(90deg,var(--other-ink) 0 1px,transparent 1px 12px) left bottom/100% 6px no-repeat,
    repeating-linear-gradient(90deg,var(--other-ink) 0 1px,transparent 1px 60px) left bottom/100% 13px no-repeat;
  opacity:.7;
}
/* registration targets in the two bottom corners, like the foot of a drawing sheet */
.theme-panel[data-theme="other"] .tp-art::after{
  --m:rgba(196,216,243,.55);
  content:"";position:absolute;inset:18px;pointer-events:none;
  background:
    linear-gradient(var(--m),var(--m)) left 0 bottom 7px/15px 1px no-repeat,
    linear-gradient(var(--m),var(--m)) left 7px bottom 0/1px 15px no-repeat,
    radial-gradient(circle,transparent 3.5px,var(--m) 3.9px 4.8px,transparent 5.2px) left bottom/15px 15px no-repeat,
    linear-gradient(var(--m),var(--m)) right 0 bottom 7px/15px 1px no-repeat,
    linear-gradient(var(--m),var(--m)) right 7px bottom 0/1px 15px no-repeat,
    radial-gradient(circle,transparent 3.5px,var(--m) 3.9px 4.8px,transparent 5.2px) right bottom/15px 15px no-repeat;
}
.theme-panel[data-theme="other"].is-entering .tp-decor{animation:other-sheet 1.3s var(--ease) both}
@keyframes other-sheet{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* label with a registration mark and a dash-dot centerline */
.theme-panel[data-theme="other"] .panel-n{display:flex;align-items:center;gap:12px;letter-spacing:.22em;margin-bottom:18px}
.theme-panel[data-theme="other"] .panel-n::before{
  content:"";flex:none;width:15px;height:15px;
  background:
    linear-gradient(currentColor,currentColor) center/100% 1px no-repeat,
    linear-gradient(currentColor,currentColor) center/1px 100% no-repeat,
    radial-gradient(circle,transparent 3.4px,currentColor 3.9px 4.7px,transparent 5.2px);
}
.theme-panel[data-theme="other"] .panel-n::after{content:"";flex:0 0 58px;height:1px;opacity:.6;
  background:repeating-linear-gradient(90deg,currentColor 0 12px,transparent 12px 16px,currentColor 16px 18px,transparent 18px 22px)}

/* heading in expanded drafting capitals, measured by a dimension line */
.theme-panel[data-theme="other"] h3{
  position:relative;width:fit-content;padding-bottom:26px;margin-bottom:30px;line-height:.98;
  background:linear-gradient(180deg,#FFFFFF 0%,#E1EAF5 46%,#9FB3CC 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.theme-panel[data-theme="other"] h3::after{
  --d:rgba(169,199,238,.75);
  content:"";position:absolute;left:-5px;right:-5px;bottom:0;height:16px;transform-origin:left center;
  background:
    linear-gradient(var(--d),var(--d)) center/calc(100% - 10px) 1px no-repeat,
    linear-gradient(var(--d),var(--d)) 5px 0/1px 100% no-repeat,
    linear-gradient(var(--d),var(--d)) calc(100% - 5px) 0/1px 100% no-repeat,
    linear-gradient(135deg,transparent 44%,var(--d) 44% 56%,transparent 56%) left center/10px 10px no-repeat,
    linear-gradient(135deg,transparent 44%,var(--d) 44% 56%,transparent 56%) right center/10px 10px no-repeat;
}
.theme-panel[data-theme="other"].is-entering h3::after{animation:other-measure 1.1s .2s var(--ease) both}
@keyframes other-measure{from{transform:scaleX(0);opacity:0}to{transform:none;opacity:1}}

.theme-panel[data-theme="other"] .panel-lede{font-size:19px;line-height:1.62;max-width:26em;color:var(--tp-text-2);padding-left:22px;border-left:1px solid var(--tp-line)}

/* tablet and phone: the panel grows so the drawing sits whole under the text */
@media (max-width:820px){
  .theme-panel[data-theme="other"]{--other-art:max(330px,62vw);
    --tp-overlay:linear-gradient(180deg,rgba(10,16,25,.88) 0%,rgba(10,16,25,.78) 55%,rgba(10,16,25,.5) 100%)}
  .theme-panel[data-theme="other"] .tp-body{padding-bottom:var(--other-art)}
  .theme-panel[data-theme="other"] .tp-decor{position:absolute;left:0;right:0;bottom:0;height:var(--other-art);object-position:100% 100%;
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 16%);mask-image:linear-gradient(180deg,transparent 0%,#000 16%)}
  .theme-panel[data-theme="other"] .tp-art{-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.45),#000 70%);mask-image:linear-gradient(180deg,rgba(0,0,0,.45),#000 70%)}
}
@media (max-width:560px){
  /* phones: a drawing about as tall as it is wide, so the crop shows the set square and the whole tower
     and stops cleanly short of the floor plan on the left */
  .theme-panel[data-theme="other"]{--tp-h3-size:clamp(44px,13vw,56px);--other-art:max(330px,calc(101vw - 30px))}
  .theme-panel[data-theme="other"] .panel-lede{font-size:17px;padding-left:16px}
}

/* photo slot: uncomment once assets/themes/other.jpg exists (url resolves relative to this file in every browser) */
/* .theme-panel[data-theme="other"]::before{background-image:var(--tp-overlay),url("other.jpg")} */