/* What we do: the portico.
   Six Ionic columns drawn as an architect's elevation, one per practice area.
   Choosing a column lights it in limestone; its details show below the steps.
   Geometry comes from tools/build_portico.py: viewBox 1000 x 640, column axes
   150 apart from x = 125, so the colonnade runs from 5% to 95% of the width.

   Everything interactive hangs off .portico.is-ready, which src/js/practice.js
   sets once it has taken over. Until then (no JavaScript, or the script failed
   to load) the six areas read as a plain list and the labels link to them. */

/* the chip row's edge fades on phones (registered so they can ease) */
@property --pl-fade-l { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --pl-fade-r { syntax: "<length>"; inherits: false; initial-value: 0px; }

.portico {
  --pl-line: var(--navy);
  --pl-paper: #fff;
  --pl-tone: #EEE6D8;
  --pl-glide: cubic-bezier(.22, .8, .16, 1);
  --pl-rise: cubic-bezier(.3, .6, .12, 1);
  background: #fff;
  overflow: hidden;
}

/* ------------------------------------------------------------ head */
.portico-head {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 28px clamp(40px, 6vw, 104px); align-items: start;
  margin-bottom: clamp(40px, 5vw, 72px);
}
.portico-head h2 { max-width: 12.5em; }
.portico-head .lead { margin-top: 0; }
.portico-head-copy { padding-top: 46px; }
.portico-head .note { margin-top: 16px; }
.portico-head .link-arrow { min-height: 44px; margin-top: 8px; }

/* ------------------------------------------------------------ the drawing */
/* Sized so that the drawing, the labels and the details fit one screen where
   the screen is tall enough; on short laptop screens the drawing keeps a
   generous minimum (680px, where all six labels fit in their columns) and the
   details follow just below. Phones held sideways are sized further down. */
.portico-frame {
  width: min(100%, max(680px, min(920px, (100vh - 384px) * 1.5625)));
  width: min(100%, max(680px, min(920px, (100svh - 384px) * 1.5625)));
  margin-inline: auto;
  container: portico / inline-size;
}
.portico-stage { position: relative; aspect-ratio: 1000 / 640; }
@supports not (aspect-ratio: 1) { .portico-stage::before { content: ""; display: block; padding-top: 64%; } }
.pl-drawing { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.pl-paper { fill: var(--pl-paper); }
.pl-tone { fill: var(--pl-tone); }
.pl-glass { fill: rgba(49, 60, 108, .07); }
.pl-void { fill: rgba(49, 60, 108, .11); }
.pl-1, .pl-2, .pl-3, .pl-axis, .pl-lit-line {
  fill: none; stroke: var(--pl-line); stroke-linecap: round; stroke-linejoin: round;
}
.pl-1 { stroke-width: 1.3; }
.pl-ground { fill: none; stroke-width: 1.3; }
.pl-2 { stroke-width: .85; stroke-opacity: .78; }
.pl-3 { stroke-width: .55; stroke-opacity: .55; }
.pl-3.pl-faint { stroke-opacity: .28; }
.pl-wings { opacity: .6; }
.pl-inlay { fill: var(--navy); }
.pl-axis {
  stroke-width: .9; stroke-opacity: .5; stroke-dasharray: 7 3.5 1.5 3.5;
  transition: stroke .5s ease, stroke-opacity .5s ease, opacity .5s ease;
}
.portico.is-ready .pl-axis.is-on { stroke: var(--orange); stroke-opacity: 1; }
.pl-lit-line { stroke-width: .9; stroke-opacity: .55; }

/* the warm light that follows the selected column. The clip keeps it inside
   the colonnade, so it never spills over the wings or off a phone's edge. */
.portico-glow-clip {
  position: absolute; inset: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 3%, #000 8%, #000 92%, transparent 97%);
          mask-image: linear-gradient(90deg, transparent 3%, #000 8%, #000 92%, transparent 97%);
}
.portico-glow {
  position: absolute; left: -2.5%; width: 30%; top: 22%; height: 78%;
  opacity: 0;
  background:
    radial-gradient(50% 42% at 50% 46%, rgba(246, 196, 128, .30), rgba(246, 196, 128, .11) 55%, rgba(246, 196, 128, 0)),
    radial-gradient(46% 7% at 50% 90%, rgba(236, 170, 96, .26), rgba(236, 170, 96, 0));
  transform: translateX(calc(var(--sel, 0) * 50%));
  transition: transform 1s var(--pl-glide), opacity .9s ease;
}
.portico.is-ready .portico-glow { opacity: 1; }

/* the lit columns: the light rises up the shaft like water filling it */
.portico-lits, .portico-hits { position: absolute; inset: 0; }
.portico-lit {
  position: absolute;
  left: calc(7.8% + var(--i) * 15%); width: 9.4%;
  top: 35.9375%; height: 53.4375%;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to top, #000 42%, transparent 58%);
          mask-image: linear-gradient(to top, #000 42%, transparent 58%);
  -webkit-mask-size: 100% 250%; mask-size: 100% 250%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 0 0; mask-position: 0 0;
  transition: -webkit-mask-position .75s var(--pl-rise), mask-position .75s var(--pl-rise), opacity .6s ease;
}
.portico-lit svg { display: block; width: 100%; height: 100%; overflow: visible; }
.portico.is-ready .portico-lit.is-on {
  -webkit-mask-position: 0 100%; mask-position: 0 100%;
  transition-duration: 1.15s, 1.15s, .6s; transition-delay: .08s, .08s, 0s;
}
.portico.is-ready .portico-lit.is-glint {
  -webkit-mask-position: 0 30%; mask-position: 0 30%; opacity: .8;
  transition-duration: .7s, .7s, .5s;
}
/* hover preview: only a faint pool of light at the foot, clearly secondary to the choice */
@media (hover: hover) {
  .portico.is-ready .portico-lit.is-preview {
    -webkit-mask-position: 0 25%; mask-position: 0 25%; opacity: .62;
    transition-duration: .6s, .6s, .45s;
  }
}
/* before the section is first seen, the lights are off */
.portico.is-dark .portico-lit.is-on { -webkit-mask-position: 0 0; mask-position: 0 0; }
.portico.is-ready.is-dark .portico-glow { opacity: 0; }

.portico-hit {
  position: absolute; top: 33%; bottom: 0;
  left: calc(5% + var(--i) * 15%); width: 15%;
  -webkit-tap-highlight-color: transparent;
}
.portico.is-ready .portico-hit { cursor: pointer; }

/* ------------------------------------------------------------ labels (the tabs) */
.portico-tabs {
  position: relative;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  margin: 0 5%;
}
.portico-tab {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 4px 8px;
  color: var(--muted); text-decoration: none; text-align: center;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  border-radius: var(--radius);
  transition: color .35s ease;
}
.portico-tab-num {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  font: 600 .72rem/1 var(--sans); letter-spacing: .04em; font-variant-numeric: tabular-nums;
  color: var(--navy); background: var(--stone-50);
  box-shadow: inset 0 0 0 1px rgba(49, 60, 108, .45);
  transition: background-color .45s ease, color .45s ease, box-shadow .45s ease;
}
.portico-tab-name { font: 500 .88rem/1.25 var(--sans); hyphens: manual; }
/* Long names stay on one line when there is room and tighten a little when
   there is less. Below 780px "Anti-counterfeiting" is wider than its column
   and would run into "Consultancy", so there it breaks at its hyphen (the
   other names are single words and fit). */
@container portico (min-width: 780px) { .portico-tab-name { white-space: nowrap; } }
@container portico (min-width: 680px) and (max-width: 779.98px) {
  .portico-tab-name { font-size: .78rem; letter-spacing: -.01em; }
}
@container portico (max-width: 679.98px) { .portico-tab-name { font-size: .8rem; } }
@media (hover: hover) {
  .portico-tab:hover { color: var(--ink); }
  .portico-tab:hover .portico-tab-num { box-shadow: inset 0 0 0 1px var(--navy); }
}
.portico.is-ready .portico-tab.is-on { color: var(--ink); }
.portico.is-ready .portico-tab.is-on .portico-tab-name { font-weight: 600; }
.portico.is-ready .portico-tab.is-on .portico-tab-num {
  background: var(--navy); color: #fff;
  box-shadow: inset 0 0 0 1px var(--navy), 0 0 0 3px #fff, 0 0 0 4px var(--orange);
}
.portico-tab:focus-visible { outline: none; }
.portico-tab:focus-visible .portico-tab-name { outline: 2px solid var(--orange); outline-offset: 5px; border-radius: 2px; }

/* ------------------------------------------------------------ details */
.portico-panels {
  display: grid;
  margin: clamp(22px, 3vw, 36px) 5% 0;
  padding-top: clamp(24px, 3vw, 36px);
  border-top: 1px solid var(--line);
}
.portico-panel {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: clamp(28px, 5vw, 72px); align-items: start;
  border-radius: var(--radius);
}
.portico-panel:focus-visible { outline: 2px solid var(--orange); outline-offset: 8px; }
.portico-panel-num {
  font: 600 .78rem/1 var(--sans); letter-spacing: .14em; font-variant-numeric: tabular-nums;
  color: var(--orange-ink);
}
.portico-panel-num span { color: var(--muted); letter-spacing: .08em; }
.portico-panel h3 { margin-top: 12px; font-size: clamp(1.7rem, 1.3rem + 1.1vw, 2.35rem); line-height: 1.08; }
.portico-panel-body p { max-width: 34em; }
.portico-panel .link-arrow { min-height: 44px; margin-top: 10px; }
.portico-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* Enhanced: one panel at a time, stacked in one grid cell so the height never
   jumps (the cell is as tall as the longest panel). Each panel hugs its own
   content at the top of the cell, so short ones keep the same rhythm. */
.portico.is-ready .portico-panel {
  grid-area: 1 / 1; align-self: start; align-content: start;
  transition: opacity .55s var(--ease) .16s, transform .7s var(--pl-glide) .16s, visibility 0s linear 0s;
}
.portico.is-ready .portico-panel:not(.is-on) {
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .22s ease, transform .3s ease, visibility 0s linear .3s;
}
.portico.is-ready .portico-panel-body { transition: transform .8s var(--pl-glide) .22s; }
.portico.is-ready .portico-panel:not(.is-on) .portico-panel-body { transform: translateY(8px); transition: transform .3s ease; }

/* Not enhanced: all six, as a list */
.portico:not(.is-ready) .portico-panels { gap: 28px; }
.portico:not(.is-ready) .portico-panel + .portico-panel { padding-top: 28px; border-top: 1px solid var(--line); }

/* ------------------------------------------------------------ short laptop screens */
@media (min-width: 720px) and (max-height: 820px) {
  .portico-head { margin-bottom: 36px; }
  .portico-panels { margin-top: 14px; padding-top: 22px; }
  .portico-panel h3 { margin-top: 8px; }
}

/* ------------------------------------------------------------ tablet and phone */
@media (max-width: 959px) {
  .portico-head { grid-template-columns: 1fr; }
  .portico-head-copy { padding-top: 0; }
}
/* phones, and phones held sideways: heavier lines, and the labels as a chip row */
@media (max-width: 719px), (max-width: 959px) and (max-height: 520px) and (orientation: landscape) {
  .pl-1, .pl-ground { stroke-width: 2.1; }
  .pl-2 { stroke-width: 1.4; }
  .pl-3 { stroke-width: 1; }
  .pl-fine { display: none; }
  /* the numbered labels move into the chip row, so the axis stubs under the
     ground line have nothing to point at */
  .pl-axes { display: none; }

  /* the labels become a row of chips that scrolls sideways. The ends fade only
     while there is more to scroll that way (practice.js sets is-scrolled and
     is-end), and a spacer after the last chip keeps it clear of the edge. */
  .portico-tabs {
    --pl-fade-l: 0px; --pl-fade-r: 32px;
    display: flex; gap: 8px; margin: 18px calc(-1 * var(--gutter)) 0;
    padding: 6px 0 8px var(--gutter); overflow-x: auto; scroll-padding-inline: var(--gutter);
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--pl-fade-l), #000 calc(100% - var(--pl-fade-r)), transparent);
            mask-image: linear-gradient(to right, transparent, #000 var(--pl-fade-l), #000 calc(100% - var(--pl-fade-r)), transparent);
    transition: --pl-fade-l .35s ease, --pl-fade-r .35s ease;
  }
  .portico-tabs::after { content: ""; flex: 0 0 calc(var(--gutter) - 8px); }
  .portico-tabs::-webkit-scrollbar { display: none; }
  .portico-tabs.is-scrolled { --pl-fade-l: 32px; }
  .portico-tabs.is-end { --pl-fade-r: 0px; }
  .portico-tab {
    flex: none; flex-direction: row; gap: 8px; padding: 0 16px 0 6px; min-height: 44px;
    border-radius: var(--radius); box-shadow: inset 0 0 0 1px rgba(49, 60, 108, .22); background: rgba(255, 255, 255, .55);
    transition: color .35s ease, background-color .35s ease, box-shadow .35s ease;
  }
  .portico-tab-num { width: 32px; height: 32px; background: transparent; box-shadow: none; color: var(--muted); }
  .portico-tab-name { white-space: nowrap; font-size: .92rem; letter-spacing: normal; }
  .portico.is-ready .portico-tab.is-on { background: var(--navy); color: #fff; box-shadow: none; }
  .portico.is-ready .portico-tab.is-on .portico-tab-num { background: transparent; color: var(--navy-200); box-shadow: none; }
  .portico-tab:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
  .portico-tab:focus-visible .portico-tab-name { outline: none; }
}
@media (max-width: 719px) {
  /* the drawing runs edge to edge on phones */
  .portico-stage { margin-inline: calc(-1 * var(--gutter)); }
  .portico-panels { margin: 20px 0 0; padding-top: 24px; }
  .portico-panel { grid-template-columns: 1fr; }
  .portico-panel h3 { margin-top: 10px; }
  .portico-panel-body { margin-top: 14px; }
}
/* Phones held sideways: size the drawing by the screen's height, so the whole
   portico and the chip row fit under the header together (84px is the chip
   row's 18px top margin, its 58px height and 8px to spare). The chips and the
   details keep the full width. */
@media (max-width: 959px) and (max-height: 520px) and (orientation: landscape) {
  .portico-frame { width: 100%; }
  .portico-stage {
    width: min(100%, calc((100vh - var(--header-h) - 84px) * 1.5625));
    width: min(100%, calc((100svh - var(--header-h) - 84px) * 1.5625));
    margin-inline: auto;
  }
}

/* ------------------------------------------------------------ high contrast */
/* Forced colours drop the fills that mark the chosen label, so underline it. */
@media (forced-colors: active) {
  .portico.is-ready .portico-tab.is-on .portico-tab-name { text-decoration: underline 2px; text-underline-offset: 4px; }
  .portico.is-ready .portico-tab.is-on .portico-tab-num { outline: 2px solid Highlight; outline-offset: 2px; }
  .portico-tab-num { border: 1px solid CanvasText; }
}
@media (forced-colors: active) and (max-width: 719px),
       (forced-colors: active) and (max-width: 959px) and (max-height: 520px) and (orientation: landscape) {
  .portico-tab { border: 1px solid CanvasText; }
  .portico-tab-num { border: 0; }
}

/* ------------------------------------------------------------ reduced motion */
@media (prefers-reduced-motion: reduce) {
  .portico-glow, .portico-lit, .portico-panel, .portico-panel-body, .pl-axis,
  .portico-tab, .portico-tab-num, .portico-tabs { transition: none !important; }
  .portico.is-ready .portico-panel:not(.is-on), .portico.is-ready .portico-panel:not(.is-on) .portico-panel-body { transform: none; }
}