/* ===========================================================
   Anika Williams — portfolio styles.
   Covers the work index, the about page, project/more/404.
   Geometry and type are reproduced from live measurement of
   the reference site; markup and styles are written from scratch.

   Two grids are in play, and they are not the same:
     work index — 3 columns, 30px gutter, tiles at 1.4:1
     about      — 6 columns, 20px gutter
   =========================================================== */

:root {
  --band:        #F7F7F7;
  --page:        #FFFFFF;
  --ink:         #020202;
  --ink-body:    #292A2C;   /* measured body/heading colour, rgb(41,42,44) */

  /* Reference measures #727272, which is 4.49:1 on the band — just under
     WCAG AA. #707070 is 4.62:1 and visually indistinguishable at 15px.
     This is the ONE deliberate deviation from the measured reference. */
  --ink-idle:    #707070;

  --rule-idle:   #E2E2E2;   /* measured: 2px solid rgb(226,226,226) */
  --tile-ground: #F0F0F0;

  /* 0.58 is the floor at which white 14px text clears 4.5:1 over the
     lightest tile ground (#F0F0F0). Do not lighten without re-checking. */
  --veil:        rgba(24, 24, 24, 0.58);
  --veil-ink:    #FFFFFF;

  --band-h:      180px;
  --gutter:      30px;
  --margin:      20px;
  --mark-w:      318px;     /* signature width; height follows at 10.82:1 */
  --ratio:       1.4;       /* measured 441.59 x 315.42 = 1.4000 exactly */

  --font: neue-haas-unica, Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;

  --ease: cubic-bezier(0.165, 0.84, 0.44, 1);   /* ease-out-quart */
  --dur:  0.3s;

  --z-skip: 100;

  color-scheme: light;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 200;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.vh {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: -9999px;
  z-index: var(--z-skip);
  padding: 0.75rem 1rem;
  background: var(--ink);
  color: #FFF;
  font-size: 14px;
}
.skip:focus { left: var(--margin); top: var(--margin); }

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
.skip:focus-visible { outline: 2px solid #FFF; outline-offset: -6px; }

/* ---------- masthead ---------- */

.masthead {
  height: var(--band-h);
  background: var(--band);
  /* 58 not 64: the cropped signature stands 29.4px tall against the old
     wordmark's 23, so the top padding gives back the difference and the nav
     stays on the y it was measured at. */
  padding: 58px var(--margin) 0;
  text-align: center;
}

/* Handwritten signature. The source file ships a 0 830 864 60 viewBox whose
   ink only spans x 42.6-647.0 — 43 units of padding on the left against 217
   on the right. A box centred on the page therefore looked ~41px off to the
   left. The local copy is cropped to the ink (viewBox 39.63 833.36 610.41
   56.43, ratio 10.82), so centring the box now centres the signature.
   -uncropped.svg keeps the file exactly as fetched.

   The width constraint lives on the link, not the image: an inline-block
   shrink-wraps to its content's *intrinsic* width and a min()/percentage on
   the child never feeds back into that, which left a full-width link holding
   a narrower image, off-centre inside it. */
.wordmark {
  display: inline-block;
  width: min(var(--mark-w), 100%);
  /* If the SVG fails to load, the alt text is what renders. Without these it
     fell back to default link blue at the UA's default size and overflowed
     the box. */
  color: var(--ink);
  font-size: 20px;
  font-weight: 200;
  letter-spacing: 1.5px;
  text-decoration: none;
  transition: opacity var(--dur) var(--ease);
}
.wordmark img {
  display: block;
  width: 100%;
  height: auto;
}
.wordmark:hover { opacity: 0.62; }

.mainnav {
  /* 7 not 10: the links carry 3px of top padding to reach a 24px target,
     so the text still lands on its measured y. */
  margin-top: 7px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 84px;
}

.mainnav a {
  display: inline-block;
  padding: 3px 4px 6px;   /* 24px tall — WCAG 2.5.8 minimum target */
  font-size: 15px;
  font-weight: 200;
  line-height: 1;
  color: var(--ink-idle);
  text-decoration: none;
  border-bottom: 2px solid var(--rule-idle);
  transition: color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.mainnav a:hover { color: var(--ink); border-bottom-color: var(--ink-idle); }
.mainnav a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* ---------- grid ---------- */

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter);
  max-width: 2200px;
  margin: 0 auto;
  padding: var(--gutter) var(--margin);
  list-style: none;
}

@media (max-width: 1023.98px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 639.98px)  {
  .grid { grid-template-columns: 1fr; }
  .masthead { height: auto; padding-top: 48px; padding-bottom: 36px; }
  .mainnav { gap: 40px; }
}

.tile figure {
  position: relative;
  margin: 0;
}

.tile a {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--ratio);
  background: var(--tile-ground);
  text-decoration: none;
}

.tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 0.62s var(--ease);
}

/* Source images use the full measured frame. This prevents subject cropping. */
.tile img.hero-contain {
  object-fit: contain;
  object-position: center;
  background: #fff;
}

.tile figure:hover img,
.tile a:focus-visible img { transform: scale(1.045); }

/* Caption is a sibling of the link (valid <figure> content model), laid
   over it. pointer-events:none keeps the whole tile clickable. */
.tile figcaption {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 1.25rem;
  text-align: center;
  overflow: hidden;
  background: var(--veil);
  color: var(--veil-ink);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}

.tile figure:hover figcaption,
.tile a:focus-visible + figcaption { opacity: 1; }

.tile .t,
.tile .c {
  transform: translateY(30px);
  transition: transform var(--dur) var(--ease);
}
.tile figure:hover .t,
.tile figure:hover .c,
.tile a:focus-visible + figcaption .t,
.tile a:focus-visible + figcaption .c { transform: none; }

.tile .t {
  margin: 0;
  font-size: 21px;
  font-weight: 200;
  line-height: 1.15;
  letter-spacing: 0.4px;
  text-wrap: balance;
}
/* Full white, separated from the title by size not opacity — dimming it
   was what pushed contrast under the floor. */
.tile .c {
  font-size: 14px;
  font-weight: 200;
  line-height: 1.3;
  color: var(--veil-ink);
}

/* ---------- captions must not depend on hover alone ----------
   Two triggers. (hover:none) covers touch, but a hybrid laptop reports
   hover:hover and never matches it, and a narrow desktop window collapses
   the grid to one column while the names stay locked behind a pointer.
   Either way the visitor gets unlabelled grey rectangles, so coarse pointers
   and narrow viewports both fall back to static captions. */

@media (hover: none), (pointer: coarse), (max-width: 639.98px) {
  .tile figcaption {
    position: static;
    opacity: 1;
    background: none;
    color: var(--ink);
    align-items: flex-start;
    text-align: left;
    padding: 10px 2px 0;
    gap: 2px;
  }
  .tile .t, .tile .c { transform: none; }
  .tile .t { font-size: 17px; }
  .tile .c { font-size: 13px; color: var(--ink-idle); }
  .tile img { transform: none; }
}

/* ---------- more ----------
   A dense image wall under titled sections. Measured from the reference:
   H1 53px/900 on a 66px line, section H2s 32px/900 on 40px, body 18px/200
   on 27px, all at x=146 while the wall runs full width from x=20. Four
   columns of 359px on a 20px gutter — which is exactly what columns:4 with
   a 20px gap yields at 1536.

   CSS multi-column, not a JS masonry: variable-height images pack without
   script, and with no JS there is nothing to fail. The trade is that reading
   order runs down each column rather than across, which is acceptable for
   decorative art carrying empty alt. */

.more {
  padding: 50px var(--margin) 0;
  max-width: 2200px;       /* matches .grid and .about; was uncapped */
  margin-inline: auto;
}

.more-copy { margin-left: 126px; }   /* text at x=146 against the wall's x=20 */

/* The cap belongs on the paragraph: on the container it resolved against the
   inherited 16px, so "72ch" was really about 64 characters of 18px text. */
.more p { max-width: 68ch; }

.more h1 {
  margin: 0 0 4px;
  font-size: 53px;
  font-weight: 900;
  line-height: 66px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--ink-body);
}
.more h2 {
  margin: 0 0 13px;
  font-size: 32px;
  font-weight: 900;
  line-height: 40px;
  color: var(--ink-body);
}
.more p {
  margin: 0;
  font-size: 18px;
  font-weight: 200;
  line-height: 27px;
  color: var(--ink-body);
  text-wrap: pretty;
}

.more section { margin-top: 71px; }

/* Columns are packed at build time, not by the browser.

   CSS multi-column balanced this badly: 12 unbreakable items whose heights
   vary 4.3:1, spread over 4 columns, is only ~3 items each — too few to even
   out. Measured ragged bottoms of 260-550px per wall, worsening to 1141px at
   3440px wide.

   Every image height is columnWidth / ratio, and all columns share a width,
   so a column's height is proportional to the sum of 1/ratio of its items.
   That sum is known before the page is written, so the generator greedily
   packs each item into the shortest column. The balance then holds at every
   viewport width rather than being re-guessed per layout.

   Column counts step 4 -> 2 -> 1 so the flex rows always divide evenly; at
   3 the fourth column would wrap alone as an orphan. */
.more-wall {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}
.more-wall .col {
  flex: 1 1 calc(25% - 15px);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 20px;
}
.more-wall img {
  display: block;
  width: 100%;
  height: auto;            /* load-bearing: width/height attrs would pin it */
  background: var(--tile-ground);
}
.more-wall img.more-fill {
  aspect-ratio: var(--frame);
  object-fit: cover;
  object-position: center;
}
.more-wall img.more-fill--contain {
  object-fit: contain;
  background: #FFF;
}

@media (max-width: 1279.98px) {
  .more-copy { margin-left: 80px; }
}
@media (max-width: 899.98px) {
  .more-wall .col { flex-basis: calc(50% - 10px); }
  .more-copy { margin-left: 0; }
}
@media (max-width: 639.98px) {
  .more { padding-top: 36px; }
  .more-wall { margin-top: 28px; }
  .more section { margin-top: 48px; }
  .more h1 { font-size: 38px; line-height: 46px; }
  .more h2 { font-size: 27px; line-height: 34px; }
}
@media (max-width: 479.98px) {
  .more-wall .col { flex-basis: 100%; }
}

/* ---------- home ----------
   A centred intro sitting between the band and the grid. Measured from the
   reference: greeting 18px/700 on a 30px line, body 18px/200 on 27px, block
   426px wide, first baseline 119px below the band, tiles starting at 522. */

/* 466 not 426: box-sizing is border-box, so the 20px of horizontal padding
   comes out of max-width. 466 - 40 leaves the 426px measure the reference
   uses, which is what keeps the description to two lines. */
.home-intro {
  max-width: 466px;
  margin: 0 auto 112px;
  padding: 119px var(--margin) 0;
  text-align: center;
}
.home-intro .greeting {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 30px;
  color: #000;
}
.home-intro p {
  margin: 0;
  font-size: 18px;
  font-weight: 200;
  line-height: 27px;
  color: #000;
  text-wrap: pretty;
}

@media (max-width: 639.98px) {
  .home-intro { padding-top: 64px; margin-bottom: 56px; }
}

/* ---------- about ----------
   Six-column grid on a 20px gutter (the about page uses 20, not the 30
   the work grid uses). At 1440 this yields 216.67px columns, which puts
   the portrait at x=20 and the text column at x=730 — both measured
   from the reference. */

.about {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
  max-width: 2200px;
  margin: 0 auto;
  padding: 86px var(--margin) 0;
  align-content: start;
}

.about-portrait {
  grid-column: 1 / span 2;
  margin: 0;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--tile-ground);
}
/* The photograph is 804x1182 (0.68) going into a square slot, so cover crops
   top and bottom. The face sits in the upper third, so the crop window is
   biased upward — a centred crop cuts the top of the head.

   Below the desktop breakpoint the slot goes full-width and stays PORTRAIT
   (4:5). It was landscape while the art here was an abstract placeholder,
   where shape did not matter; against a real portrait a 4:3 frame threw away
   49% of the image height. 4:5 costs about 15%. */
.about-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  display: block;
}

.about-intro { grid-column: 4 / span 2; }

.about-intro h1 {
  margin: 0 0 26px;
  font-size: 32px;
  font-weight: 900;
  line-height: 40px;
  letter-spacing: -0.005em;
  color: var(--ink-body);
  /* no text-wrap:balance — the line break here is authored with <br> */
}

.about-intro p,
.about-sec p,
.about-sec li {
  font-size: 18px;
  font-weight: 200;
  line-height: 27px;
  color: var(--ink-body);
  text-wrap: pretty;
}
/* Caps the measure at wide viewports the same way .rows > li does. Without
   it the intro ran to 70 characters per line at 2400px. */
.about-intro p { margin: 0 0 27px; max-width: 62ch; }
.about-intro p:last-child { margin-bottom: 0; }

/* three-up photo strip, 3:2, same 20px gutter */
.about-strip {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 46px 0 0;
  padding: 0;
  list-style: none;
}
/* height:auto is load-bearing — the width/height attributes (kept for CLS)
   otherwise give the element a definite height and aspect-ratio is ignored. */
.about-strip img {
  width: 100%;
  height: auto;
  aspect-ratio: 1.5;
  object-fit: cover;
  display: block;
  background: var(--tile-ground);
}

/* stacked sections below the strip */
.about-sec { grid-column: 1 / -1; margin-top: 72px; }
.about-sec > h2 {
  margin: 0 0 22px;
  font-size: 32px;
  font-weight: 900;
  line-height: 40px;
  color: var(--ink-body);
}

/* Reference indents section content one column in from its heading. */
.about-sec .rows {
  display: grid;
  gap: 26px;
  margin: 0 0 0 calc((100% - 5 * 20px) / 6 + 20px);
  padding: 0;
  list-style: none;
}
.about-sec .rows > li { max-width: 62ch; }
.about-sec .rows h3 {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 500;
  line-height: 27px;
  color: var(--ink-body);
}
.about-sec .rows p { margin: 0; }
.about-sec .when {
  display: block;
  font-size: 14px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink-idle);
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}

/* skills / interests / currently-learning triple */
.about-triple {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  gap: 20px;
  margin-top: 72px;
}
/* Subgrid derives the heading-row height from the tallest heading, so all
   three lists share a baseline. This replaced a hard-coded min-height of two
   lines, which silently broke whenever the webfont was unavailable and
   "Currently learning more about" wrapped to three lines instead of two. */
.about-triple > section {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  row-gap: 22px;
}
.about-triple h2 {
  margin: 0;
  font-size: 32px;
  font-weight: 900;
  line-height: 40px;
  color: var(--ink-body);
  text-wrap: balance;
}
.about-triple ul { margin: 0; padding: 0; list-style: none; }
.about-triple li { margin-bottom: 4px; }

/* Skills carry a discipline plus the tools used for it. The tools sit on
   their own line in the muted ink so the discipline stays the thing you
   read first; sizes come from the existing scale rather than new values.
   Only Skills uses this, so the other two columns are unaffected. */
.about-triple .tools {
  display: block;
  font-size: 14px;
  line-height: 21px;
  color: var(--ink-idle);
}
.about-triple li:has(.tools) { margin-bottom: 14px; }

.about-contact { grid-column: 1 / -1; margin: 72px 0 0; }
.about-contact h2 {
  margin: 0 0 14px;
  font-size: 32px;
  font-weight: 900;
  line-height: 40px;
  color: var(--ink-body);
  text-wrap: balance;
}
.about-contact p { margin: 0; }
.about-contact a {
  font-size: 18px;
  font-weight: 200;
  color: var(--ink-body);
  text-decoration: underline;
  text-underline-offset: 4px;
  /* an email address is one unbreakable token; without this it forced
     horizontal scroll below ~278px */
  overflow-wrap: break-word;
}
.about-contact a:hover { text-decoration-thickness: 2px; }

/* Mockup marker for unfilled rows. The chip is only half of the signal —
   each marker also carries visually-hidden "Placeholder:" text, because a
   background colour says nothing to a screen reader and disappears entirely
   in print and in forced-colors. Both of those are re-drawn below. */
.todo {
  background: #FFF3D6;
  box-shadow: 0 0 0 1px #E3CE9A;
  padding: 1px 5px;
  font-style: normal;
  /* the inherited #707070 is only 4.49:1 on this chip; 6.2:1 here */
  color: #5A5A5A;
}

/* The reference's 2-column intro reads at a comfortable 47 characters per
   line at 1440, but the same span yields only 31 at 1024 — narrower than the
   tablet layout beneath it, so widening the viewport used to shrink the text.
   The 2-column form is held for wide viewports only; every step down now
   widens the measure instead of narrowing it. */
@media (max-width: 1359.98px) {
  .about-portrait { grid-column: 1 / span 3; }
  .about-intro    { grid-column: 4 / span 3; }
}
@media (max-width: 1023.98px) {
  .about-triple   { grid-template-columns: repeat(2, 1fr); gap: 44px 20px; }
}
@media (max-width: 900px) {
  .about { padding-top: 48px; }
  .about-portrait { grid-column: 1 / -1; aspect-ratio: 4 / 5; }
  .about-intro    { grid-column: 1 / -1; margin-top: 30px; }
}
@media (max-width: 639.98px) {
  .about { padding-top: 40px; }
  .about-portrait { aspect-ratio: 4 / 5; }
  .about-intro h1 { font-size: 27px; line-height: 34px; }
  .about-strip    { grid-template-columns: 1fr; margin-top: 34px; }
  .about-triple   { grid-template-columns: 1fr; gap: 40px; margin-top: 52px; }
  .about-triple > section { display: block; }   /* single column: subgrid is moot */
  .about-sec      { margin-top: 52px; }
  .about-contact  { margin-top: 52px; }
  .about-sec .rows { margin-left: 0; }
  .about-sec > h2, .about-triple h2, .about-contact h2 { font-size: 27px; line-height: 34px; }
}

/* ---------- sub-pages ---------- */

.sheet {
  max-width: 62ch;
  margin: 0 auto;
  padding: clamp(48px, 8vw, 96px) var(--margin) 64px;
}
.sheet h1 {
  margin: 0 0 20px;
  font-size: clamp(28px, 5vw, 44px);
  font-weight: 200;
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.sheet p {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.65;
  color: #3A3A3A;
  text-wrap: pretty;
}
.sheet .meta {
  font-size: 13px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--ink-idle);
  margin-bottom: 28px;
}
.back {
  display: inline-block;
  margin-top: 20px;
  font-size: 14px;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- footer ---------- */

.foot {
  padding: 40px var(--margin) 56px;
  text-align: center;
  font-size: 13px;
  font-weight: 200;
  color: var(--ink-idle);
  font-variant-numeric: tabular-nums;
}
.foot a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  overflow-wrap: break-word;
}
.foot a:hover { text-decoration-thickness: 2px; }

/* ---------- print ---------- */

@media print {
  .skip, .mainnav { display: none; }
  .masthead { height: auto; padding: 0 0 16pt; background: none; }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 12pt; padding: 0; }
  .tile figcaption {
    position: static;
    opacity: 1;
    background: none;
    color: #000;
    padding: 4pt 0 0;
    text-align: left;
    align-items: flex-start;
  }
  .tile .t, .tile .c { transform: none; color: #000; }
  .tile a { break-inside: avoid; }

  /* about: one flowing column, no decorative imagery */
  .about { display: block; padding: 0; }
  .about-portrait, .about-strip { display: none; }
  .about-intro, .about-sec, .about-triple, .about-contact { margin-top: 18pt; }
  .about-triple { display: block; }
  .about-triple section { margin-bottom: 14pt; }
  .about-sec .rows { margin-left: 0; }
  .about-sec .rows > li { break-inside: avoid; }

  /* the chip's background is dropped by print; keep the marker visible */
  .todo { outline: 1px dashed #000; background: none; color: #000; }

  /* home intro carried its 119px screen padding into print */
  .home-intro { padding: 0 0 18pt; margin: 0; max-width: none; }
  .sheet { padding: 0; max-width: none; }
  .foot { padding: 12pt 0 0; }

  /* the wall is decorative; drop it as .about-strip is dropped, and take the
     screen indent off the copy so it does not print inset */
  .more { padding: 0; max-width: none; }
  .more-copy { margin-left: 0; }
  .more p { max-width: none; }
  .more-wall { display: none; }
  .more section { margin-top: 18pt; }
}

/* ---------- forced colors (Windows High Contrast) ---------- */

@media (forced-colors: active) {
  .masthead { border-bottom: 1px solid CanvasText; }
  .mainnav a { border-bottom-width: 1px; }
  /* colour is flattened by HCM, so mark the current page structurally */
  .mainnav a[aria-current="page"] { border-bottom-width: 4px; }
  .tile figcaption {
    background: Canvas;
    color: CanvasText;
    forced-color-adjust: none;
  }
  .tile a { border: 1px solid CanvasText; }

  /* images are exempt from forced-color-adjust, so a pale or failed one
     becomes an invisible box; a border keeps every frame readable, matching
     what .tile a already does */
  .more-wall img { border: 1px solid CanvasText; }

  /* HCM flattens background and box-shadow, so the chip vanishes; a real
     border survives and keeps placeholder rows distinguishable. */
  .todo {
    forced-color-adjust: none;
    border: 1px dashed CanvasText;
    background: Canvas;
    color: CanvasText;
  }
}

/* ---------- motion off ---------- */

@media (prefers-reduced-motion: reduce) {
  .wordmark, .mainnav a { transition: none; }
  .tile img,
  .tile figure:hover img,
  .tile a:focus-visible img { transform: none; transition: none; }
  .tile .t, .tile .c { transition: none; }
  .tile figcaption { transition: opacity 0.01ms; }
}