/* Awards page. The service pages' cream and ink (kisaka-advisory.css),
   so the record reads as part of the firm's own paper, not a night scene.
   The plaque is drawn in slate glass so its lines hold on the cream. */

.kisaka-awards-page
   {
      --aw-ground: #f5f3f0;
      --aw-type: #1d1517;
      --aw-mute: #5d5256;
      --aw-faint: #6f6367;
      --aw-line: #cfc6c0;
      --aw-panel: #e9e5df;
      --aw-glass: #56717f;
      --aw-etch: #26333c;
      --aw-ease: cubic-bezier(0.16, 1, 0.3, 1);
      --aw-ease-in: cubic-bezier(0.55, 0, 0.75, 0.1);
      background: var(--aw-ground);
   }

/* ------------------------------------------------------------------
   Hero: the word on the left; on the right a box in a box. The outer box
   is the service pages' warm panel, running off the right edge; on it lies
   the photograph from EPRC's 30th anniversary gala dinner as an instant
   print: a square picture on textured white paper, the deep bottom margin
   carrying the caption, set down a little crooked. The film look (teal
   shadows, light leak, grain, blur) is baked into the image.
   ------------------------------------------------------------------ */
.aw-hero
   {
      position: relative;
      overflow: hidden;
      background: var(--aw-ground);
      color: var(--aw-type);
   }

.aw-hero__frame
   {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: flex-end;
      min-height: 100svh;
      padding-top: clamp(112px, 15svh, 160px);
      padding-bottom: clamp(40px, 7svh, 80px);
   }

.aw-hero__copy
   {
      width: 46%;
      padding-bottom: clamp(8px, 3svh, 36px);
   }

/* The word is the headline and the type does the work. Its line clips so
   the word can rise into place from under its own baseline. */
.aw-hero__title
   {
      margin: 0;
      overflow: hidden;
      padding-bottom: 0.06em;
      color: var(--aw-type);
      font-family: var(--kisaka-font-accent);
      font-size: clamp(88px, 11.5vw, 200px);
      font-variation-settings: "opsz" 144;
      font-weight: 360;
      letter-spacing: -0.05em;
      line-height: 0.86;
   }

.aw-hero__word
   {
      display: inline-block;
      transform-origin: 0% 100%;
   }

.aw-hero__lead
   {
      max-width: 42ch;
      margin: clamp(20px, 3.2svh, 32px) 0 0;
      color: var(--aw-mute);
      font-family: "Newsreader", Georgia, "Times New Roman", serif;
      font-optical-sizing: auto;
      font-size: clamp(18px, 1.45vw, 21px);
      font-weight: 400;
      line-height: 1.5;
   }

.aw-hero__media
   {
      position: absolute;
      top: calc(var(--kisaka-header-h, 72px) + 24px);
      right: 0;
      bottom: 0;
      width: 49vw;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: clamp(32px, 6svh, 72px) clamp(28px, 4.4vw, 72px);
      overflow: hidden;
      background: var(--aw-panel);
   }

/* The inner box: an instant print. Narrow even borders on three sides,
   the deep one at the foot, paper with a fine tooth to it, and a lift off
   the panel that reads as a print lying on a table, not a floating card.
   Its width is held so the whole print fits the panel's height. */
.aw-hero__print
   {
      --aw-print-tilt: -2deg;
      position: relative;
      width: 100%;
      max-width: min(540px, calc((100svh - 240px) / 1.2));
      margin: 0;
      padding: 5.2% 5.2% 0;
      border-radius: 3px;
      background:
         url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.42 0 0 0 0 0.38 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23p)'/%3E%3C/svg%3E"),
         #f8f7f3;
      box-shadow:
         0 0 0 1px rgba(31, 31, 29, 0.05),
         0 1px 2px rgba(31, 31, 29, 0.08),
         0 22px 44px -14px rgba(52, 36, 28, 0.3);
      transform: rotate(var(--aw-print-tilt));
   }

/* The picture sits square in the print, nearly sharp-cornered, with the
   faint inner edge the emulsion leaves against the paper. */
.aw-hero__window
   {
      position: relative;
      overflow: hidden;
      aspect-ratio: 1 / 1;
      border-radius: 1px;
      background: #1c2a2c;
   }

.aw-hero__window::after
   {
      content: "";
      position: absolute;
      inset: 0;
      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
      pointer-events: none;
   }

/* Written in the deep margin, the way a print gets labelled by hand. */
.aw-hero__caption
   {
      display: flex;
      align-items: center;
      min-height: clamp(60px, 7.2vw, 104px);
      padding: 0 2px;
      color: #4a4246;
      font-family: "Newsreader", Georgia, "Times New Roman", serif;
      font-optical-sizing: auto;
      font-size: clamp(15px, 1.15vw, 18px);
      font-style: italic;
      letter-spacing: 0.005em;
   }

/* Held slightly over-scaled so the arrival can ease it back, the zoom
   the edit started. */
.aw-hero__photo
   {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 50% 55%;
      transform: scale(1.04);
   }

/* The WebGL layer. The canvas fills it and never takes the pointer. */
.aw-glass
   {
      position: absolute;
      inset: 0 0 40px;
      opacity: 0;
      transition: opacity 0.6s var(--aw-ease);
      pointer-events: none;
   }

.aw-glass canvas
   {
      display: block;
      width: 100%;
      height: 100%;
   }

.rc-line
   {
      fill: none;
      stroke: var(--aw-glass);
      stroke-width: 1;
      stroke-opacity: 0.55;
   }

.rc-edge
   {
      stroke: url(#rc-edge-light);
      stroke-opacity: 1;
      stroke-width: 1.25;
   }

/* Each layer of the crest a step fainter, so they read as depth, not ripples. */
.rc-crest--1
   {
      stroke-opacity: 0.72;
   }

.rc-crest--2
   {
      stroke-opacity: 0.46;
   }

.rc-crest--3
   {
      stroke-opacity: 0.26;
   }

.rc-bevel
   {
      stroke: url(#rc-bevel-light);
      stroke-opacity: 1;
   }

.rc-glint
   {
      stroke: #ffffff;
      stroke-opacity: 0.32;
      stroke-linecap: round;
   }

.rc-stand .rc-line
   {
      stroke-opacity: 0.4;
   }

.rc-etch
   {
      fill: var(--aw-etch);
   }

/* EPRC's mark and the 30 Years ribbon are drawn paths, stroke widths set per
   group in the markup so each reads the same weight after its own scale. */
.rc-glyph
   {
      fill: none;
      stroke: var(--aw-etch);
      stroke-linejoin: round;
   }

.rc-tagline,
.rc-years,
.rc-anniversary
   {
      font-family: var(--kisaka-font-accent);
      font-weight: 700;
   }

.rc-tagline
   {
      font-size: 5.2px;
      font-style: italic;
      font-weight: 600;
      word-spacing: 0.25em;
   }

.rc-years
   {
      font-size: 4.8px;
      letter-spacing: 0.04em;
      text-anchor: middle;
   }

.rc-anniversary
   {
      font-size: 4.3px;
      letter-spacing: 0.1em;
   }

.rc-title,
.rc-name,
.rc-cite,
.rc-date
   {
      font-family: "Newsreader", Georgia, serif;
      text-anchor: middle;
   }

.rc-title
   {
      font-size: 12.5px;
      font-style: italic;
      letter-spacing: 0.08em;
   }

.rc-name
   {
      font-size: 15px;
      font-weight: 600;
   }

.rc-cite
   {
      font-size: 10.8px;
      font-style: italic;
      opacity: 0.82;
   }

/* The line the heading quotes stays at full strength. */
.rc-cite--key
   {
      opacity: 1;
   }

.rc-date
   {
      font-size: 13px;
      font-style: italic;
   }

/* ------------------------------------------------------------------
   Arrival. js/kisaka-awards.js holds the hero blank (is-armed) and plays
   it on every visit. Each way has its own move:
   first arrival: the word rises out of its baseline; the photo's window
   opens from the right while the picture eases back from a closer zoom;
   leaving: the word recedes, smaller and dimmer; the window closes upward;
   coming back: the word comes forward, the window reopens from the top.
   ------------------------------------------------------------------ */
.aw-hero.is-armed .aw-hero__word
   {
      transform: translate3d(0, 104%, 0);
   }

.aw-hero.is-armed .aw-hero__lead
   {
      opacity: 0;
      transform: translate3d(0, 14px, 0);
      filter: blur(6px);
   }

/* The panel starts shut against the right edge; the print waits below,
   a little small, with the picture zoomed in. */
.aw-hero.is-armed .aw-hero__media
   {
      clip-path: inset(0 0 0 100%);
   }

.aw-hero.is-armed .aw-hero__print
   {
      opacity: 0;
      transform: translate3d(0, 48px, 0) rotate(2deg) scale(0.96);
   }

.aw-hero.is-armed .aw-hero__photo
   {
      transform: scale(1.16);
   }

.aw-hero.is-armed.is-in .aw-hero__word
   {
      transform: none;
      transition: transform 1.25s var(--aw-ease) 0.1s;
   }

.aw-hero.is-armed.is-in .aw-hero__lead
   {
      opacity: 1;
      transform: none;
      filter: none;
      transition:
         opacity 0.9s var(--aw-ease),
         transform 0.9s var(--aw-ease),
         filter 0.9s var(--aw-ease);
   }

.aw-hero.is-armed.is-in .aw-hero__lead
   {
      transition-delay: 0.45s;
   }

/* The panel opens after the word has begun to rise; the print rises onto
   it a beat later, and the picture settles inside the print more slowly
   still, so it keeps drifting once everything has landed. */
.aw-hero.is-armed.is-in .aw-hero__media
   {
      clip-path: inset(0 0 0 0);
      transition: clip-path 1.1s var(--aw-ease) 0.2s;
   }

.aw-hero.is-armed.is-in .aw-hero__print
   {
      opacity: 1;
      transform: rotate(var(--aw-print-tilt));
      transition:
         opacity 0.9s var(--aw-ease) 0.6s,
         transform 1.3s var(--aw-ease) 0.6s;
   }

.aw-hero.is-armed.is-in .aw-hero__photo
   {
      transform: scale(1.04);
      transition: transform 2.6s var(--aw-ease) 0.6s;
   }

.aw-hero.is-armed.is-gone .aw-hero__word
   {
      opacity: 0.2;
      transform: translate3d(0, 0, 0) scale(0.94);
      transition:
         opacity 0.5s var(--aw-ease-in),
         transform 0.6s var(--aw-ease-in);
   }

.aw-hero.is-armed.is-gone .aw-hero__lead
   {
      opacity: 0;
      transform: translate3d(0, -10px, 0);
      filter: blur(4px);
      transition:
         opacity 0.35s var(--aw-ease-in),
         transform 0.45s var(--aw-ease-in),
         filter 0.45s var(--aw-ease-in);
   }

/* Leaving, the print lifts off first, then the panel closes upward. */
.aw-hero.is-armed.is-gone .aw-hero__print
   {
      opacity: 0;
      transform: translate3d(0, -28px, 0) rotate(-4deg) scale(0.97);
      transition:
         opacity 0.4s var(--aw-ease-in),
         transform 0.45s var(--aw-ease-in);
   }

.aw-hero.is-armed.is-gone .aw-hero__media
   {
      clip-path: inset(0 0 100% 0);
      transition: clip-path 0.55s var(--aw-ease-in) 0.12s;
   }

/* Coming back the word grows from its receded size, quicker than the first time. */
.aw-hero.is-armed.is-back.is-in .aw-hero__word
   {
      opacity: 1;
      transition:
         opacity 0.7s var(--aw-ease),
         transform 0.9s var(--aw-ease);
   }

.aw-hero.is-armed.is-back.is-in .aw-hero__lead
   {
      transition-delay: 0.2s;
   }

/* Coming back the panel reopens downward, from where it closed, and the
   print comes forward from where it lifted to. */
.aw-hero.is-armed.is-back.is-in .aw-hero__media
   {
      transition: clip-path 0.8s var(--aw-ease) 0.05s;
   }

.aw-hero.is-armed.is-back.is-in .aw-hero__print
   {
      transition:
         opacity 0.7s var(--aw-ease) 0.3s,
         transform 1s var(--aw-ease) 0.3s;
   }

.aw-hero.is-armed.is-back.is-in .aw-hero__photo
   {
      transition: transform 1.6s var(--aw-ease) 0.3s;
   }

@media (prefers-reduced-motion: reduce)
   {
      .aw-hero.is-armed .aw-hero__word,
      .aw-hero.is-armed .aw-hero__lead,
      .aw-hero.is-armed .aw-hero__print,
      .aw-hero.is-armed .aw-hero__photo
         {
            opacity: 1;
            transform: none;
            filter: none;
            transition: none;
         }

      .aw-hero.is-armed .aw-hero__media
         {
            clip-path: none;
            transition: none;
         }
   }

/* ------------------------------------------------------------------
   The list: ruled entries, picture on the left, the account beside it.
   ------------------------------------------------------------------ */
.aw-list
   {
      padding: clamp(72px, 12svh, 140px) 0 clamp(80px, 14svh, 160px);
      background: var(--aw-ground);
      color: var(--aw-type);
   }

.aw-list__title
   {
      margin: 0 0 clamp(28px, 4svh, 48px);
      color: var(--aw-type);
      font-family: var(--kisaka-font-accent);
      font-size: clamp(32px, 3.4vw, 52px);
      font-weight: 400;
      letter-spacing: -0.03em;
      line-height: 1.05;
   }

.aw-list__items
   {
      margin: 0;
      padding: 0;
      list-style: none;
      border-top: 1px solid var(--aw-line);
   }

.aw-entry
   {
      display: grid;
      grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
      gap: clamp(24px, 4vw, 64px);
      align-items: start;
      padding: clamp(28px, 4svh, 48px) 0;
      border-bottom: 1px solid var(--aw-line);
   }

.aw-entry__picture
   {
      margin: 0;
   }

/* The plaque stands on the page as it does in the hero: no box behind it.
   The glass and the drawing share the drawing's own proportions. */
.aw-entry__plaque
   {
      position: relative;
      aspect-ratio: 400 / 580;
   }

.aw-entry__plaque .aw-glass
   {
      inset: 0;
   }

.aw-entry__plaque[data-plaque-state="ready"] .aw-glass
   {
      opacity: 1;
   }

.aw-entry__drawing
   {
      display: block;
      width: 100%;
      height: 100%;
      overflow: visible;
      transition: opacity 0.4s var(--aw-ease);
   }

.aw-entry__plaque[data-plaque-state="pending"] .aw-entry__drawing,
.aw-entry__plaque[data-plaque-state="ready"] .aw-entry__drawing
   {
      opacity: 0;
   }

/* The entries that are not plaques show the record itself, drawn at the
   plaque's size so the list keeps one column. */
.aw-entry__doc
   {
      aspect-ratio: 400 / 580;
   }

.aw-entry__doc svg
   {
      display: block;
      width: 100%;
      height: 100%;
   }

/* The record rises in with its entry, a beat before the title; leaving,
   it lifts away with it. */
.aw-entry.is-armed .aw-entry__doc
   {
      opacity: 0;
      transform: translate3d(0, 24px, 0) scale(0.97);
   }

.aw-entry.is-armed.is-in .aw-entry__doc
   {
      opacity: 1;
      transform: none;
      transition:
         opacity 0.9s var(--aw-ease),
         transform 1.1s var(--aw-ease);
   }

.aw-entry.is-armed.is-gone .aw-entry__doc
   {
      opacity: 0;
      transform: translate3d(0, -12px, 0);
      transition:
         opacity 0.35s var(--aw-ease-in),
         transform 0.45s var(--aw-ease-in);
   }

@media (prefers-reduced-motion: reduce)
   {
      .aw-entry.is-armed .aw-entry__doc
         {
            opacity: 1;
            transform: none;
            transition: none;
         }
   }

.aw-entry__name
   {
      margin: 0;
      font-family: var(--kisaka-font-accent);
      font-size: clamp(22px, 2vw, 30px);
      font-weight: 400;
      letter-spacing: -0.015em;
      line-height: 1.2;
   }

.aw-entry__name a
   {
      color: var(--aw-type);
      text-decoration: underline;
      text-decoration-color: rgba(29, 21, 23, 0.3);
      text-decoration-thickness: 1px;
      text-underline-offset: 0.18em;
      transition: text-decoration-color 0.3s var(--aw-ease);
   }

.aw-entry__name a:hover,
.aw-entry__name a:focus-visible
   {
      text-decoration-color: var(--aw-type);
   }

.aw-entry__body
   {
      max-width: 60ch;
      margin: 16px 0 0;
      color: var(--aw-mute);
      font-family: "Newsreader", Georgia, "Times New Roman", serif;
      font-optical-sizing: auto;
      font-size: 18px;
      line-height: 1.6;
   }

/* Each entry arrives every time it comes on screen (js/kisaka-awards.js):
   the title rises in, the account follows it; leaving, both lift away
   faster than they came. The glass runs its own arrival off the same classes. */
.aw-entry.is-armed .aw-entry__name,
.aw-entry.is-armed .aw-entry__body
   {
      opacity: 0;
      transform: translate3d(0, 18px, 0);
      filter: blur(6px);
   }

.aw-entry.is-armed.is-in .aw-entry__name,
.aw-entry.is-armed.is-in .aw-entry__body
   {
      opacity: 1;
      transform: none;
      filter: none;
      transition:
         opacity 0.9s var(--aw-ease),
         transform 0.9s var(--aw-ease),
         filter 0.9s var(--aw-ease);
   }

.aw-entry.is-armed.is-in .aw-entry__name
   {
      transition-delay: 0.15s;
   }

.aw-entry.is-armed.is-in .aw-entry__body
   {
      transition-delay: 0.3s;
   }

.aw-entry.is-armed.is-back.is-in .aw-entry__name
   {
      transition-delay: 0.05s;
   }

.aw-entry.is-armed.is-back.is-in .aw-entry__body
   {
      transition-delay: 0.15s;
   }

.aw-entry.is-armed.is-gone .aw-entry__name,
.aw-entry.is-armed.is-gone .aw-entry__body
   {
      opacity: 0;
      transform: translate3d(0, -10px, 0);
      filter: blur(4px);
      transition:
         opacity 0.35s var(--aw-ease-in),
         transform 0.45s var(--aw-ease-in),
         filter 0.45s var(--aw-ease-in);
   }

@media (prefers-reduced-motion: reduce)
   {
      .aw-entry.is-armed .aw-entry__name,
      .aw-entry.is-armed .aw-entry__body
         {
            opacity: 1;
            transform: none;
            filter: none;
            transition: none;
         }
   }

/* ------------------------------------------------------------------
   Phones: the word and the line, then the panel under them, inset from
   the left and running off the right edge. No glass in the list.
   ------------------------------------------------------------------ */
@media (max-width: 768px)
   {
      .aw-hero__frame
         {
            min-height: 0;
            padding-top: 112px;
            padding-bottom: 36px;
         }

      .aw-hero__copy
         {
            width: 100%;
            padding-bottom: 0;
         }

      .aw-hero__title
         {
            font-size: clamp(64px, 21vw, 104px);
         }

      .aw-hero__lead
         {
            font-size: 18px;
         }

      .aw-hero__media
         {
            position: relative;
            top: auto;
            width: calc(100% - 16px);
            margin: 0 0 48px 16px;
            padding: 28px 24px 32px 20px;
            border-radius: 20px 0 0 20px;
         }

      .aw-hero__print
         {
            max-width: 86%;
         }

      .aw-hero__caption
         {
            min-height: 52px;
            font-size: 14px;
         }

      .aw-glass
         {
            display: none;
         }

      .aw-entry
         {
            grid-template-columns: minmax(0, 1fr);
            gap: 20px;
         }

      .aw-entry__plaque,
      .aw-entry__doc
         {
            width: min(100%, 300px);
            margin: 0 auto;
         }

      .aw-entry__plaque[data-plaque-state] .aw-entry__drawing
         {
            opacity: 1;
         }

      .aw-entry__body
         {
            font-size: 17px;
         }
   }