npm - @nationalarchives/frontend - Versions diffs - 0.1.20-prerelease → 0.1.21-prerelease - Mend

@nationalarchives/frontend 0.1.20-prerelease → 0.1.21-prerelease

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (134) hide show

package/nationalarchives/components/sensitive-image/sensitive-image.css.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/utilities/_typography.scss","../../../../src/nationalarchives/utilities/_a11y.scss","../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/tools/_spacing.scss","../../../../src/nationalarchives/utilities/_global.scss","../../../../src/nationalarchives/tools/_media.scss","../../../../src/nationalarchives/utilities/_overrides.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss","../../../../src/nationalarchives/variables/_grid.scss","../../../../src/nationalarchives/components/sensitive-image/sensitive-image.scss"],"names":[],"mappings":"CAQQ,6CCRR,qBACE,qBACA,sBACA,oBACA,qBAEA,6BACA,uBACA,wBACA,sBAEA,2BAEA,iCAEA,oBAEA,0CAEA,yDAEE,YCkJJ,0BACE,uCACA,uCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEAhFA,yBAEA,4CAPA,4BACA,uBAuHF,0DACE,qCACA,qCACA,uCACA,2BACA,2CACA,iCACA,2CA1HA,sBAEA,0CAPA,4BACA,uBAiJF,8BA7IE,yBAEA,gDA8IA,qBACA,kBACA,oCACA,aACA,wBACA,gBACA,wBACA,oBACA,0BAIA,0BAIA,gCC/PF,4EACE,mBAEA,8IACE,gBCDJ,MFKI,olCEDJ,cACE,gBACA,WACA,YAEA,kBACA,gBACA,iCAEA,eF+EA,yBAEA,wCE7EA,2BFwBE,oCACA,oCACA,yDACA,+BACA,uCACA,sDACA,2DE5BF,4BFdE,olCEiBA,mCAHF,4BFRE,snCEeA,+BAPF,4BFFE,8/BEYE,8BACE,kCAIJ,+DAfF,4BFIE,kjCEgBF,2BFlCE,olCEsCF,0BFhCE,qnCEoCF,mCF9BE,8/BEiCA,qCACE,iCAGF,4DF/BA,ijCE0CF,6BFpCE,0BACA,qCACA,8CACA,oCACA,oCACA,mDACA,+BACA,uCACA,gDACA,qDACA,4CE8BF,2BF5BE,oCACA,oCACA,yDACA,+BACA,uCACA,sDACA,2DASE,sCAEE,6BACA,wCACA,8CACA,+CEYN,6BFhCE,oCACA,oCACA,yDACA,+BACA,uCACA,sDACA,2DASE,sCAOE,6BACA,wCACA,8CACA,+CEWN,4BFpCE,oCACA,oCACA,yDACA,+BACA,uCACA,sDACA,2DASE,sCAYE,6BACA,wCACA,8CACA,+CEUN,2BFxCE,oCACA,oCACA,yDACA,+BACA,uCACA,sDACA,2DASE,sCAiBE,6BACA,wCACA,8CACA,+CESN,+BACE,gBACE,0BACA,4BAKN,oBACE,gBACA,SACA,UAEA,cAEA,oFACE,aACA,sBAEA,6GACE,OAKN,6BAKE,eAEA,cAGF,aAEE,WAGF,SACE,aAGF,QAEE,uBFSA,sBAEA,mCETA,uBAGF,GACE,c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","file":"sensitive-image.css","sourcesContent":["@use \"sass:math\";\n@use \"../tools/colour\";\n@use \"../tools/media\";\n@use \"../tools/spacing\";\n@use \"../tools/typography\";\n@use \"../variables/assets\";\n@use \"../variables/grid\";\n\n@import \"https://use.typekit.net/hkj3kuz.css\";\n\n@font-face {\n font-family: \"Open Sans\";\n src: url(\"#{assets.$tna-font-path}/OpenSans-Medium.ttf\");\n font-weight: normal;\n font-style: normal;\n}\n\n@font-face {\n font-family: \"Open Sans\";\n src: url(\"#{assets.$tna-font-path}/OpenSans-Bold.ttf\");\n font-weight: bold;\n font-style: normal;\n}\n\n@font-face {\n font-family: \"Roboto Mono\";\n src: url(\"#{assets.$tna-font-path}/RobotoMono-Regular.ttf\");\n font-weight: normal;\n font-style: normal;\n}\n\n.tna-template {\n @include colour.colour-font(\"font-base\");\n @include typography.main-font;\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n text-rendering: optimizeLegibility;\n -webkit-text-size-adjust: none;\n direction: ltr;\n}\n\n.tna-template__body {\n color: inherit;\n @include typography.relative-font-size(18);\n // line-height: 1.6;\n line-height: #{math.div(16, 18) * 2};\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nul,\nol {\n margin-top: 0;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nstrong {\n @include typography.main-font-weight-bold;\n}\n\np {\n margin: 0 0 1.5rem;\n\n @include media.on-tiny {\n margin-bottom: 1rem;\n }\n\n &:last-child {\n margin-bottom: 0;\n }\n}\n\na {\n @include colour.colour-font(\"link\");\n text-decoration-thickness: 1.5px;\n\n &:visited {\n @include colour.colour-font(\"link-visited\");\n }\n\n &:hover,\n &:active {\n @include typography.interacted-text-decoration;\n }\n\n &.tna-chip {\n text-decoration: none;\n\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"font-dark\");\n }\n\n &:hover {\n @include typography.interacted-text-decoration;\n }\n }\n}\n\n.tna-ul,\n.tna-ol {\n margin-top: 0;\n margin-right: 0;\n margin-left: 0;\n padding: 0 0 0 2rem;\n\n @include spacing.space-below;\n\n li::marker {\n @include colour.colour-font(\"accent-background\");\n font-weight: 700;\n }\n\n &--plain {\n padding-left: 0;\n\n list-style: none;\n }\n}\n\n%chip {\n max-width: max-content;\n padding: 0.375em 0.5rem;\n\n display: block;\n\n @include colour.colour-font(\"font-dark\");\n @include typography.detail-font-small;\n line-height: 1;\n\n @include colour.accent;\n}\n\n.tna-chip {\n @extend %chip;\n}\n\n.tna-chip-list {\n padding-left: 0;\n\n display: flex;\n flex-wrap: wrap;\n gap: 1rem;\n\n list-style: none;\n\n @include spacing.space-below;\n\n &__item {\n }\n}\n\n%heading {\n @include colour.colour-font(\"font-dark\");\n @include typography.heading-font;\n\n a {\n display: inline-block;\n\n &::after {\n padding-left: 0.25rem;\n\n display: inline-block;\n\n font-weight: 700;\n\n content: \"\\203A\";\n }\n\n &:hover {\n &::after {\n padding-left: 0.5rem;\n }\n }\n }\n}\n\n%heading-xl {\n @include typography.relative-font-size(64);\n line-height: 1.2;\n\n @include media.on-medium {\n // @include typography.relative-font-size(42);\n @include typography.relative-font-size(50);\n }\n\n @include media.on-mobile {\n @include typography.relative-font-size(36);\n }\n}\n\n%heading-l {\n @include typography.relative-font-size(32);\n line-height: 1.4;\n\n @include media.on-medium {\n // @include typography.relative-font-size(26);\n @include typography.relative-font-size(28);\n }\n\n @include media.on-mobile {\n @include typography.relative-font-size(24);\n }\n}\n\n%heading-m {\n @include typography.relative-font-size(20);\n line-height: 1.6;\n}\n\n%heading-s {\n @include typography.relative-font-size(18);\n line-height: 1.6;\n}\n\n.tna-heading {\n @extend %heading;\n\n &--xl {\n @extend %heading-xl;\n }\n\n &--l {\n @extend %heading-l;\n }\n\n &--m {\n @extend %heading-m;\n }\n\n &--s {\n @extend %heading-s;\n }\n}\n\n.tna-hgroup {\n &__supertitle {\n margin: 0 0 0.5rem;\n\n @extend %chip;\n }\n\n &__title {\n margin: 0;\n\n display: block;\n\n @extend %heading;\n }\n\n &--xl &__title {\n @extend %heading-xl;\n }\n\n &--l &__title {\n @extend %heading-l;\n }\n\n &--m &__title {\n @extend %heading-m;\n }\n\n &--s &__title {\n @extend %heading-s;\n }\n}\n\n.tna-heading,\n.tna-hgroup {\n margin-top: 3rem;\n margin-bottom: 1rem;\n\n &:first-child {\n margin-top: 0;\n }\n\n &:last-child {\n margin-bottom: 0;\n }\n}\n\n.tna-blockquote {\n margin-top: 0;\n margin-right: 0;\n margin-left: 0;\n padding: 1rem 1rem 1rem 2rem;\n\n @include colour.colour-border(\"accent-background\", 0.35rem, solid, left);\n\n @include spacing.space-below;\n\n &__quote {\n font-weight: 700;\n }\n\n &__author {\n font-style: italic;\n\n .tna-blockquote & {\n margin: 1rem 0 0;\n }\n\n &::before {\n content: \"\\2014\" \" \";\n }\n }\n}\n\n.tna-scene-setter {\n @include typography.detail-font;\n @include colour.colour-font(\"font-dark\");\n @include typography.relative-font-size(30);\n line-height: math.div(50, 30);\n\n @include spacing.space-below;\n\n @include media.on-mobile {\n @include typography.relative-font-size(24);\n line-height: 2;\n }\n\n a {\n color: inherit;\n text-decoration-thickness: 2px;\n\n &:hover {\n text-decoration-thickness: 4.5px;\n }\n }\n}\n\n.tna-columns {\n column-gap: grid.$gutter-width;\n\n &--2 {\n column-count: 2;\n }\n\n &--3 {\n column-count: 3;\n }\n\n @include media.on-mobile {\n column-gap: grid.$gutter-width-mobile;\n }\n\n @include media.on-small {\n @for $i from 1 through 4 {\n &--#{$i}-small {\n column-count: $i;\n }\n }\n }\n\n @include media.on-tiny {\n @for $i from 1 through 4 {\n &--#{$i}-tiny {\n column-count: $i;\n }\n }\n }\n\n &__block {\n break-inside: avoid;\n }\n\n &:has(&__block:only-of-type) {\n column-count: 1;\n }\n}\n",".tna-visually-hidden {\n width: 1px !important;\n height: 1px !important;\n margin: 0 !important;\n padding: 0 !important;\n\n position: absolute !important;\n top: -9999px !important;\n left: -9999px !important;\n z-index: -1 !important;\n\n overflow: hidden !important;\n\n clip: rect(0, 0, 0, 0) !important;\n\n border: 0 !important;\n\n background-color: transparent !important;\n\n &::before,\n &::after {\n content: \"\\00a0\";\n }\n}\n","@use \"sass:map\";\n@use \"../features\";\n@use \"../variables/colour\";\n@use \"../tools/media\";\n\n@function brand-colour($colour) {\n @return map.get(colour.$colour-palette-brand, $colour);\n}\n\n@mixin colour-css-vars() {\n @each $name, $value in colour.$colour-palette-default {\n --#{$name}: #{$value};\n }\n}\n\n@mixin colour-css-vars-dark() {\n @each $name, $value in colour.$colour-palette-dark {\n --#{$name}: #{$value};\n }\n}\n\n@mixin colour-css-vars-high-contrast() {\n @each $name, $value in colour.$colour-palette-high-contrast {\n --#{$name}: #{$value};\n }\n}\n\n@mixin colour-css-vars-high-contrast-dark() {\n @each $name, $value in colour.$colour-palette-high-contrast-dark {\n --#{$name}: #{$value};\n }\n}\n\n@mixin accent-css-vars($colour) {\n @if $colour == \"yellow\" {\n --accent: #{brand-colour(\"yellow\")} !important;\n --accent-background: #{brand-colour(\"yellow\")} !important;\n --accent-background-light: #{brand-colour(\"cream\")} !important;\n --accent-font-base: #{brand-colour(\"black\")} !important;\n --accent-font-dark: #{brand-colour(\"black\")} !important;\n --accent-font-light: #{rgba(brand-colour(\"black\"), 0.7)} !important;\n --accent-link: #{brand-colour(\"black\")} !important;\n --accent-link-visited: #{brand-colour(\"black\")} !important;\n --accent-keyline: #{rgba(brand-colour(\"black\"), 0.5)} !important;\n --accent-keyline-dark: #{rgba(brand-colour(\"black\"), 0.8)} !important;\n --button-accent-background: #{brand-colour(\"yellow\")} !important;\n } @else {\n --accent-font-base: #{brand-colour(\"white\")} !important;\n --accent-font-dark: #{brand-colour(\"white\")} !important;\n --accent-font-light: #{rgba(brand-colour(\"white\"), 0.7)} !important;\n --accent-link: #{brand-colour(\"white\")} !important;\n --accent-link-visited: #{brand-colour(\"white\")} !important;\n --accent-keyline: #{rgba(brand-colour(\"white\"), 0.5)} !important;\n --accent-keyline-dark: #{rgba(brand-colour(\"white\"), 0.8)} !important;\n\n @if $colour == \"black\" {\n // --accent: #{brand-colour(\"light-grey\")} !important;\n // --accent-background: #{brand-colour(\"black\")} !important;\n // --accent-background-light: #{brand-colour(\"light-grey\")} !important;\n // --button-accent-text: #{brand-colour(\"black\")} !important;\n // --button-accent-background: #{brand-colour(\"grey\")} !important;\n } @else {\n --button-accent-text: #{brand-colour(\"white\")} !important;\n @if $colour == \"pink\" {\n --accent: #{brand-colour(\"pink\")} !important;\n --accent-background: #{brand-colour(\"maroon\")} !important;\n --accent-background-light: #{brand-colour(\"pastel-pink\")} !important;\n --button-accent-background: #{brand-colour(\"maroon\")} !important;\n } @else if $colour == \"orange\" {\n --accent: #{brand-colour(\"orange\")} !important;\n --accent-background: #{brand-colour(\"chestnut\")} !important;\n --accent-background-light: #{brand-colour(\"pastel-orange\")} !important;\n --button-accent-background: #{brand-colour(\"chestnut\")} !important;\n } @else if $colour == \"green\" {\n --accent: #{brand-colour(\"green\")} !important;\n --accent-background: #{brand-colour(\"forest\")} !important;\n --accent-background-light: #{brand-colour(\"pastel-green\")} !important;\n --button-accent-background: #{brand-colour(\"forest\")} !important;\n } @else if $colour == \"blue\" {\n --accent: #{brand-colour(\"blue\")} !important;\n --accent-background: #{brand-colour(\"navy\")} !important;\n --accent-background-light: #{brand-colour(\"pastel-blue\")} !important;\n --button-accent-background: #{brand-colour(\"navy\")} !important;\n }\n }\n }\n}\n\n@mixin colour-font(\n $colour,\n $important: false,\n $default-palette: colour.$colour-palette-default\n) {\n color: map.get($default-palette, $colour) if($important, !important, null);\n color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n background-color: map.get(colour.$colour-palette-default, $colour)\n if($important, !important, null);\n background-color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-border(\n $colour,\n $width: \"\",\n $style: solid,\n $direction: \"\",\n $important: false\n) {\n @if $direction != \"\" {\n @if $width != \"\" {\n $property: border-#{$direction};\n border-#{$direction}: $width\n map.get(colour.$colour-palette-default, $colour)\n $style\n if($important, !important, null);\n border-#{$direction}: $width\n var(--#{$colour})\n $style\n if($important, !important, null);\n } @else {\n border-#{$direction}-color: map.get(\n colour.$colour-palette-default,\n $colour\n )\n if($important, !important, null);\n border-#{$direction}-color: var(--#{$colour})\n if($important, !important, null);\n }\n } @else {\n @if $width != \"\" {\n border: $width\n map.get(colour.$colour-palette-default, $colour)\n $style\n if($important, !important, null);\n border: $width var(--#{$colour}) $style if($important, !important, null);\n } @else {\n border-color: map.get(colour.$colour-palette-default, $colour)\n if($important, !important, null);\n border-color: var(--#{$colour}) if($important, !important, null);\n }\n }\n}\n\n@mixin colour-outline($colour, $important: false) {\n outline-color: map.get(colour.$colour-palette-default, $colour)\n if($important, !important, null);\n outline-color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-fill($colour, $important: false) {\n fill: map.get(colour.$colour-palette-default, $colour)\n if($important, !important, null);\n fill: var(--#{$colour}) if($important, !important, null);\n}\n\n%fixed {\n @include colour-css-vars;\n\n @include colour-font(\"font-base\");\n}\n\n@mixin fixed {\n @extend %fixed;\n}\n\n%invert {\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n\n @include colour-background(\"contrast-background\");\n\n @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin invert {\n @extend %invert;\n}\n\n%invert-on-mobile {\n @include media.on-mobile {\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n\n @include colour-background(\"contrast-background\");\n\n @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n }\n}\n\n@mixin invert-on-mobile {\n @extend %invert-on-mobile;\n}\n\n%accent {\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link-visited);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n\n @include colour-background(\"accent-background\");\n\n @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin accent {\n @extend %accent;\n}\n\n%accent-background {\n @include colour-background(\"accent-background\");\n}\n\n@mixin accent-background {\n @extend %accent-background;\n}\n\n%light-accent-background {\n @include colour-background(\"accent-background-light\");\n\n --font-base: #{map.get(colour.$colour-palette-default, \"font-base\")};\n --font-dark: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n --font-light: #{map.get(colour.$colour-palette-default, \"font-light\")};\n --link: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n --keyline: #{map.get(colour.$colour-palette-default, \"keyline\")};\n --keyline-dark: #{map.get(colour.$colour-palette-default, \"keyline-dark\")};\n --button-text: #{map.get(colour.$colour-palette-default, \"button-text\")};\n --button-background: #{map.get(\n colour.$colour-palette-default,\n \"button-background\"\n )};\n --button-hover-text: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-text\"\n )};\n --button-hover-background: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-background\"\n )};\n}\n\n@mixin light-accent-background {\n @extend %light-accent-background;\n}\n\n@mixin on-high-contrast {\n .tna-template--high-contrast-theme & {\n @content;\n }\n\n .tna-template--system-theme & {\n @media (prefers-contrast: more) {\n @content;\n }\n }\n}\n","@use \"sass:map\";\n@use \"../variables/spacing\";\n\n%space-below {\n margin-bottom: 2rem;\n\n &:last-child {\n margin-bottom: 0;\n }\n}\n\n@mixin space-below {\n @extend %space-below;\n}\n\n@function spacing($size) {\n @return map.get(spacing.$spacing, $size);\n}\n\n@function spacing-mobile($size) {\n @return map.get(spacing.$spacing-mobile, $size);\n}\n","@use \"../features\";\n@use \"../tools/colour\";\n@use \"../tools/media\";\n@use \"../tools/spacing\";\n@use \"../variables/typography\";\n\n:root {\n @include colour.colour-css-vars;\n}\n\n.tna-template {\n min-width: 320px;\n width: 100%;\n height: 100%;\n\n overflow-x: hidden;\n overflow-y: auto;\n -webkit-overflow-scrolling: touch;\n\n font-size: #{typography.$base-font-size-px}px;\n\n @include colour.colour-background(\"page-background\");\n\n accent-color: var(--accent);\n\n &--system-theme {\n @include colour.colour-css-vars;\n\n @media (prefers-color-scheme: dark) {\n @include colour.colour-css-vars-dark;\n }\n\n @media (prefers-contrast: more) {\n @include colour.colour-css-vars-high-contrast;\n\n * {\n background-image: none !important;\n }\n }\n\n @media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n @include colour.colour-css-vars-high-contrast-dark;\n }\n }\n\n &--light-theme {\n @include colour.colour-css-vars;\n }\n\n &--dark-theme {\n @include colour.colour-css-vars-dark;\n }\n\n &--high-contrast-theme {\n @include colour.colour-css-vars-high-contrast;\n\n * {\n background-image: none !important;\n }\n\n &.tna-template--dark-theme {\n @include colour.colour-css-vars-high-contrast-dark;\n }\n }\n\n @include colour.accent-css-vars(\"black\"); // TODO: Temp\n\n // &--black-accent {\n // @include colour.accent-css-vars(\"black\");\n // }\n\n &--yellow-accent {\n @include colour.accent-css-vars(\"yellow\");\n }\n\n &--pink-accent {\n @include colour.accent-css-vars(\"pink\");\n }\n\n &--orange-accent {\n @include colour.accent-css-vars(\"orange\");\n }\n\n &--green-accent {\n @include colour.accent-css-vars(\"green\");\n }\n\n &--blue-accent {\n @include colour.accent-css-vars(\"blue\");\n }\n\n @media (prefers-reduced-motion) {\n * {\n animation: none !important;\n transition: none !important;\n }\n }\n}\n\n.tna-template__body {\n min-height: 100%;\n margin: 0;\n padding: 0;\n\n overflow: auto;\n\n &:has(.tna-header):has(#main-content[role=\"main\"]):has(.tna-footer) {\n display: flex;\n flex-direction: column;\n\n #main-content[role=\"main\"] {\n flex: 1;\n }\n }\n}\n\nimg,\nsvg,\npicture,\nvideo,\ncanvas {\n max-width: 100%;\n\n display: block;\n}\n\nvideo,\ncanvas {\n width: 100%;\n}\n\n[hidden] {\n display: none;\n}\n\n:focus {\n // outline: 0.3125rem colour.$focus-colour solid;\n outline: 0.3125rem solid;\n @include colour.colour-outline(\"focus-outline\");\n outline-offset: 0.125rem;\n}\n\nhr {\n margin: 2rem 0;\n\n border-width: 1px 0 0;\n @include colour.colour-border(\"keyline\");\n border-style: solid;\n\n // @include colour.on-high-contrast {\n // border-style: solid;\n // }\n}\n\n.tna-section {\n padding-top: 3rem;\n padding-bottom: 3rem;\n\n @include media.on-mobile {\n padding-top: 2rem;\n padding-bottom: 2rem;\n }\n}\n\n.tna-aside {\n padding: 2rem;\n\n @include spacing.space-below;\n\n @include media.on-mobile {\n padding: 1rem;\n }\n\n @include colour.on-high-contrast {\n @include colour.colour-border(\"keyline-dark\", 1px);\n }\n}\n\n.tna-background--contrast {\n @include colour.invert;\n}\n\n.tna-background--accent {\n @include colour.accent;\n}\n\n.tna-background--accent-light {\n @include colour.light-accent-background;\n}\n","@use \"../variables/media\";\n\n// 0 ======= 320 = 480 ===== 768 == 1024 ========================== min-width/max-width (px)\n// \| . \| \| \|\n// \|-TINY----------\|-SMALL---\|-MED--\|-LARGE------------------------\n// \| . \| \| \|\n// \|<------------->\| \| \| on-tiny\n// \|<----------------------->\| \| on-mobile\n// \|<------------------------------>\| on-smaller-than-large\n// \| . \|<------->\| \| on-small\n// \| . \|<------------------------- on-larger-than-tiny\n// \| . \| \|<---->\| on-medium\n// \| . \| \|<--------------- on-larger-than-mobile\n// \| . \| \| \|<-------- on-large\n// \|<------->. \| \| \| Smallest device\n\n@mixin on-large() {\n @media #{media.$media-large} {\n @content;\n }\n}\n\n@mixin on-medium() {\n @media #{media.$media-medium} {\n @content;\n }\n}\n\n@mixin on-small() {\n @media #{media.$media-small} {\n @content;\n }\n}\n\n@mixin on-tiny() {\n @media #{media.$media-tiny} {\n @content;\n }\n}\n\n@mixin on-larger-than-mobile() {\n @media #{media.$media-gt-mobile} {\n @content;\n }\n}\n\n@mixin on-larger-than-tiny() {\n @media #{media.$media-gt-tiny} {\n @content;\n }\n}\n\n@mixin on-smaller-than-large() {\n @media #{media.$media-lt-large} {\n @content;\n }\n}\n\n@mixin on-mobile() {\n @media #{media.$media-mobile} {\n @content;\n }\n}\n","@use \"../variables/spacing\";\n@use \"../tools/media\";\n\n@mixin no-spacing-generator($suffix: \"\") {\n @if $suffix != \"\" {\n $suffix: \"-\" + $suffix;\n }\n\n @each $property in margin, padding {\n @each $direction in top, bottom {\n .tna-\\!--no-#{$property}-#{$direction}#{$suffix},\n .tna-\\!--no-#{$property}-vertical#{$suffix} {\n #{$property}-#{$direction}: 0 !important;\n }\n }\n }\n}\n\n@mixin overrides($spacing, $suffix: \"\") {\n @if $suffix != \"\" {\n $suffix: \"-\" + $suffix;\n }\n\n @each $property in margin, padding {\n @each $direction in top, bottom {\n @each $size, $amount in $spacing {\n .tna-\\!--#{$property}-#{$direction}-#{$size}#{$suffix},\n .tna-\\!--#{$property}-vertical-#{$size}#{$suffix} {\n #{$property}-#{$direction}: #{$amount} !important;\n }\n }\n }\n }\n}\n\n@include no-spacing-generator;\n@include overrides(spacing.$spacing);\n\n@include media.on-medium {\n @include no-spacing-generator(\"medium\");\n @include overrides(spacing.$spacing, \"medium\");\n}\n\n@include media.on-small {\n @include no-spacing-generator(\"small\");\n @include overrides(spacing.$spacing-mobile, \"small\");\n}\n\n@include media.on-tiny {\n @include no-spacing-generator(\"tiny\");\n @include overrides(spacing.$spacing-mobile, \"tiny\");\n}\n","@use \"sass:math\";\n@use \"../variables/typography\";\n\n@mixin relative-font-size($fontSizePx) {\n font-size: #{math.div($fontSizePx, typography.$base-font-size-px)}rem;\n}\n\n@mixin interacted-text-decoration {\n text-decoration: underline;\n text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n}\n\n@mixin main-font-weight {\n font-weight: typography.$font-weight-main;\n}\n\n@mixin main-font-weight-bold {\n font-weight: typography.$font-weight-main-bold;\n}\n\n@mixin main-font {\n font-family: typography.$font-family-main;\n @include main-font-weight;\n}\n\n@mixin heading-font {\n font-family: typography.$font-family-heading;\n font-weight: typography.$font-weight-heading;\n}\n\n@mixin detail-font {\n font-family: typography.$font-family-detail;\n font-weight: typography.$font-weight-detail;\n}\n\n@mixin detail-font-small {\n @include detail-font;\n @include relative-font-size(14);\n text-transform: uppercase;\n line-height: #{math.div(typography.$base-font-size-px, 14)};\n // line-height: 1;\n}\n","$base-font-size-px: 16;\n\n$interactive-text-decoration-thickness: 3.5px;\n\n$font-family-main: \"Open Sans\", serif;\n// $font-weight-main: 500;\n$font-weight-main: normal;\n// $font-weight-main-bold: 700;\n$font-weight-main-bold: bold;\n\n$font-family-heading: supria-sans-condensed, \"Arial Narrow\", sans-serif;\n$font-weight-heading: 400;\n\n$font-family-detail: \"Roboto Mono\", monospace;\n// $font-weight-detail: 400;\n$font-weight-detail: normal;\n","$largest-container-width: 75.25rem !default;\n\n$gutter-width: 2rem !default;\n$gutter-width-mobile: 1.5rem !default;\n\n$column-count: 12 !default;\n$column-count-medium: 6 !default;\n$column-count-small: 4 !default;\n$column-count-tiny: 2 !default;\n","@use \"../../tools/typography\";\n@use \"../../utilities\";\n\n.tna-sensitive-image {\n &__warning {\n }\n\n &__details {\n position: relative;\n\n // overflow: hidden;\n\n &::after {\n width: 100%;\n padding-bottom: calc(\n 100% var(--sensitive-image-height) / var(--sensitive-image-width)\n );\n\n display: block;\n\n position: relative;\n z-index: -1;\n\n background-image: var(--sensitive-image);\n background-clip: padding-box;\n background-size: contain;\n\n filter: blur(20px) saturate(0);\n\n content: \"\";\n }\n }\n\n &__show {\n display: flex;\n align-items: center;\n justify-content: center;\n\n position: absolute;\n inset: 0;\n z-index: 1;\n\n font-size: 0;\n\n cursor: pointer;\n\n &::after {\n padding: 0.5rem 2rem;\n\n @include typography.relative-font-size(16);\n background-color: #ff0;\n\n content: attr(data-action);\n }\n\n &:hover {\n &::after {\n color: #fff;\n\n background-color: #000;\n }\n }\n }\n\n &__container {\n }\n\n &__image {\n width: 100%;\n }\n\n &__details[open] {\n &::after,\n .tna-sensitive-image__show {\n display: none;\n }\n }\n}\n"]}
1	+ {"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/utilities/_typography.scss","../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/utilities/_a11y.scss","../../../../src/nationalarchives/tools/_spacing.scss","../../../../src/nationalarchives/utilities/_global.scss","../../../../src/nationalarchives/tools/_media.scss","../../../../src/nationalarchives/utilities/_overrides.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss","../../../../src/nationalarchives/variables/_grid.scss","../../../../src/nationalarchives/components/sensitive-image/sensitive-image.scss"],"names":[],"mappings":"CASQ,6CCuKR,0BACE,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEAxFA,mCAPA,4BACA,uBAmIF,0DACE,uCACA,qCACA,qCACA,uCACA,uCACA,2BACA,2CACA,iCACA,2CAtIA,mCAPA,4BACA,uBAuJF,sBAnJE,yBAEA,wCAiKF,8BACE,6CACA,qBACA,0BACA,gCACA,qBACA,wBACA,8BACA,wBACA,kCACA,kCAIA,kCAIA,8CAnLA,mCCnGF,qBACE,qBACA,sBACA,oBACA,qBAEA,6BACA,uBACA,wBACA,sBAEA,2BAEA,iCAEA,oBAEA,0CAEA,yDAEE,YAIJ,QACE,UDwHE,+BAIA,4CCzHF,uBAIA,8BACE,aCjCJ,oFACE,mBAEA,iKACE,gBCFJ,MHKI,w7CGDJ,cACE,gBACA,WACA,YAUA,iCAEA,eH2EA,yBAEA,wCGzEA,2BHmBE,kDACA,kDACA,qDACA,sDACA,6CACA,qDACA,kDACA,uDGxBF,4BHpBE,w7CGuBA,mCAHF,4BHdE,4+CGqBA,+BAPF,4BHRE,85CGkBE,8BACE,kCAIJ,+DAfF,4BHFE,y/CGsBF,2BHxCE,w7CG4CF,0BHtCE,2+CG0CF,mCHpCE,85CGuCA,qCACE,iCAGF,4DHrCA,w/CGgDF,6BH1CE,sCACA,iDACA,yDACA,4CACA,4CACA,+CACA,gDACA,uCACA,+CACA,4CACA,iDACA,wDGmCF,2BHjCE,kDACA,kDACA,qDACA,sDACA,6CACA,qDACA,kDACA,uDASE,oDAEE,sCACA,iDACA,yDACA,wDGgBN,6BHrCE,kDACA,kDACA,qDACA,sDACA,6CACA,qDACA,kDACA,uDASE,oDAOE,qCACA,iDACA,yDACA,wDGeN,4BHzCE,kDACA,kDACA,qDACA,sDACA,6CACA,qDACA,kDACA,uDASE,oDAYE,uCACA,+CACA,yDACA,sDGcN,2BH7CE,kDACA,kDACA,qDACA,sDACA,6CACA,qDACA,kDACA,uDASE,oDAiBE,sCACA,gDACA,yDACA,uDGaN,+BACE,gBACE,0BACA,4BAKN,oBACE,gBACA,SACA,UAEA,oF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","file":"sensitive-image.css","sourcesContent":["@use \"sass:math\";\n@use \"../tools/colour\";\n@use \"../tools/media\";\n@use \"../tools/spacing\";\n@use \"../tools/typography\";\n@use \"../variables/assets\";\n@use \"../variables/grid\";\n@use \"../variables/typography\" as typographyVars;\n\n@import \"https://use.typekit.net/hkj3kuz.css\";\n\n@font-face {\n font-family: \"Open Sans\";\n src: url(\"#{assets.$tna-font-path}/OpenSans-Medium.ttf\");\n font-weight: normal;\n font-style: normal;\n}\n\n@font-face {\n font-family: \"Open Sans\";\n src: url(\"#{assets.$tna-font-path}/OpenSans-Bold.ttf\");\n font-weight: bold;\n font-style: normal;\n}\n\n@font-face {\n font-family: \"Roboto Mono\";\n src: url(\"#{assets.$tna-font-path}/RobotoMono-Regular.ttf\");\n font-weight: normal;\n font-style: normal;\n}\n\n.tna-template {\n @include colour.colour-font(\"font-base\");\n @include typography.main-font;\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n text-rendering: optimizeLegibility;\n -webkit-text-size-adjust: none;\n direction: ltr;\n}\n\n.tna-template__body {\n color: inherit;\n @include typography.relative-font-size(typographyVars.$body-font-size-px);\n line-height: typographyVars.$body-line-height;\n\n @include media.on-mobile {\n @include typography.relative-font-size(\n typographyVars.$body-font-size-px-mobile\n );\n }\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nul,\nol {\n margin-top: 0;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nstrong {\n @include typography.main-font-weight-bold;\n}\n\np {\n margin: 0 0 1rem;\n\n @include media.on-tiny {\n margin-bottom: 1rem;\n }\n\n &:last-child {\n margin-bottom: 0;\n }\n}\n\na {\n @include colour.colour-font(\"link\");\n text-decoration-thickness: 1.5px;\n\n &:visited {\n @include colour.colour-font(\"link-visited\");\n }\n\n &:hover,\n &:active {\n @include typography.interacted-text-decoration;\n }\n\n &.tna-chip {\n text-decoration: none;\n\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"font-dark\");\n }\n\n &:hover {\n @include typography.interacted-text-decoration;\n }\n }\n}\n\nsmall {\n @include typography.relative-font-size(\n typographyVars.$body-font-size-px * 0.85\n );\n}\n\n.tna-ul,\n.tna-ol {\n margin-top: 0;\n margin-right: 0;\n margin-left: 0;\n padding: 0 0 0 2rem;\n\n @include spacing.space-below;\n\n li::marker {\n @include colour.colour-font(\"accent-background\");\n font-weight: 700;\n }\n\n &--plain {\n padding-left: 0;\n\n list-style: none;\n }\n}\n\n.tna-dl {\n display: flex;\n flex-wrap: wrap;\n\n @include spacing.space-below;\n\n dt,\n dd {\n margin: 0;\n padding: 0.5rem 1rem;\n\n position: relative;\n\n box-sizing: border-box;\n\n word-wrap: break-word;\n // word-break: break-all;\n }\n\n &--plain {\n dt {\n padding-left: 0;\n }\n\n dd {\n padding-right: 0;\n }\n }\n\n dt {\n width: 25%;\n\n @include typography.main-font-weight-bold;\n }\n\n dd {\n width: 75%;\n\n + dd {\n margin-left: 25%;\n }\n }\n\n &--icon-padding {\n dt {\n padding-left: 3rem !important;\n\n position: relative;\n\n .fa-solid {\n overflow: visible;\n\n position: absolute;\n top: 50%;\n left: 1rem;\n\n @include colour.colour-font(\"icon-light\");\n text-align: left;\n\n transform: translateY(-50%);\n }\n }\n }\n\n &--icon-padding#{&}--plain {\n dt {\n padding-left: 2rem !important;\n\n .fa-solid {\n left: 0;\n }\n }\n }\n\n &:not(&--plain) {\n dt,\n dd {\n // padding-left: 1rem;\n // padding-right: 1rem;\n }\n\n dt:first-child,\n dd:nth-of-type(2n) + dt,\n dd:nth-of-type(2n + 1) {\n @include colour.colour-background(\"background-tint\");\n }\n }\n\n @include media.on-small {\n dt {\n width: 35%;\n }\n\n dd {\n width: 65%;\n\n + dd {\n margin-left: 35%;\n }\n }\n }\n\n @include media.on-tiny {\n dt,\n dd {\n width: 100%;\n margin-left: 0;\n }\n\n dd {\n padding-left: 1rem;\n }\n\n &--plain {\n dt {\n padding-bottom: 0;\n }\n\n dd {\n padding-top: 0;\n // padding-left: 2rem;\n\n + dt {\n // @include colour.colour-border(\"keyline\", 1px, solid, top);\n }\n }\n }\n\n &:not(&--plain) {\n dt {\n @include colour.colour-background(\"background-tint\");\n }\n\n dd {\n background: transparent !important;\n }\n }\n }\n\n @include colour.on-high-contrast {\n @include colour.colour-border(\"keyline-dark\", 1px, solid, bottom);\n\n dt,\n dd {\n // padding-left: 0;\n // padding-right: 0;\n\n background: transparent !important;\n\n @include colour.colour-border(\"keyline-dark\", 1px, solid, top);\n }\n }\n}\n\n%chip {\n max-width: max-content;\n padding: 0.125em 0.25rem;\n\n display: block;\n\n @include typography.detail-font-small;\n line-height: 1;\n\n @include colour.accent;\n\n @include colour.colour-border(\"accent-background\", 0.125rem);\n}\n\n.tna-chip {\n @extend %chip;\n}\n\n.tna-chip-list {\n padding-left: 0;\n\n display: flex;\n flex-wrap: wrap;\n gap: 1rem;\n\n list-style: none;\n\n @include spacing.space-below;\n\n &__item {\n }\n}\n\n%heading {\n @include colour.colour-font(\"font-dark\");\n\n text-wrap: balance;\n\n &:not(.tna-heading--no-link-arrow) {\n a {\n display: inline-block;\n\n &::after {\n padding-left: 0.25rem;\n\n display: inline-block;\n\n font-weight: 700;\n\n content: \"\\203A\";\n }\n\n &:hover {\n &::after {\n padding-left: 0.5rem;\n }\n }\n }\n }\n}\n\n%heading-xl {\n @include typography.heading-font;\n @include typography.relative-font-size(64);\n line-height: 1.2;\n\n @include media.on-medium {\n @include typography.relative-font-size(42);\n }\n\n @include media.on-mobile {\n @include typography.relative-font-size(36);\n }\n}\n\n%heading-l {\n @include typography.heading-font;\n @include typography.relative-font-size(32);\n line-height: 1.3;\n\n @include media.on-medium {\n @include typography.relative-font-size(26);\n }\n\n @include media.on-mobile {\n @include typography.relative-font-size(24);\n }\n}\n\n%heading-m {\n @include typography.main-font-weight-bold;\n @include typography.relative-font-size(22);\n line-height: 1.6;\n}\n\n%heading-s {\n @include typography.main-font-weight-bold;\n @include typography.relative-font-size(18);\n line-height: 1.6;\n}\n\n.tna-heading {\n @extend %heading;\n\n &--xl {\n @extend %heading-xl;\n }\n\n &--l {\n @extend %heading-l;\n }\n\n &--m {\n @extend %heading-m;\n }\n\n &--s {\n @extend %heading-s;\n }\n}\n\n.tna-hgroup {\n &__supertitle {\n margin: 0 0 0.25rem;\n\n @extend %chip;\n }\n\n &__title {\n margin: 0;\n\n display: block;\n\n @extend %heading;\n }\n\n &--xl &__title {\n @extend %heading-xl;\n }\n\n &--l &__title {\n @extend %heading-l;\n }\n\n &--m &__title {\n @extend %heading-m;\n }\n\n &--s &__title {\n @extend %heading-s;\n }\n}\n\n.tna-heading,\n.tna-hgroup {\n margin-top: 3rem;\n margin-bottom: 1rem;\n\n // &--m,\n // &--s {\n // margin-bottom: 0.5rem;\n // }\n\n &:first-child {\n margin-top: 0;\n }\n\n &:last-child {\n margin-bottom: 0;\n }\n}\n\n.tna-blockquote {\n margin-top: 0;\n margin-right: 0;\n margin-left: 0;\n padding: 1rem 1rem 1rem 2rem;\n\n @include colour.colour-border(\"accent-background\", 0.35rem, solid, left);\n\n @include spacing.space-below;\n\n &__quote {\n font-weight: 700;\n }\n\n &__author {\n font-style: italic;\n\n .tna-blockquote & {\n margin: 1rem 0 0;\n }\n\n &::before {\n content: \"\\2014\" \" \";\n }\n }\n}\n\n.tna-scene-setter {\n @include typography.detail-font;\n @include colour.colour-font(\"font-dark\");\n @include typography.relative-font-size(30);\n line-height: math.div(50, 30);\n\n @include spacing.space-below;\n\n @include media.on-mobile {\n @include typography.relative-font-size(24);\n line-height: 2;\n }\n\n a {\n color: inherit;\n text-decoration-thickness: 2px;\n\n &:hover {\n text-decoration-thickness: 4.5px;\n }\n }\n}\n\n.tna-columns {\n column-gap: grid.$gutter-width;\n\n &--2 {\n column-count: 2;\n }\n\n &--3 {\n column-count: 3;\n }\n\n @include media.on-tiny {\n column-gap: grid.$gutter-width-tiny;\n }\n\n @include media.on-small {\n @for $i from 1 through 4 {\n &--#{$i}-small {\n column-count: $i;\n }\n }\n }\n\n @include media.on-tiny {\n @for $i from 1 through 4 {\n &--#{$i}-tiny {\n column-count: $i;\n }\n }\n }\n\n &__block {\n break-inside: avoid;\n }\n\n &:has(&__block:only-of-type) {\n column-count: 1;\n }\n}\n","@use \"sass:map\";\n@use \"../variables/colour\";\n@use \"../tools/media\";\n\n@function brand-colour($colour, $opacity: 1) {\n @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars() {\n @each $name, $value in colour.$colour-palette-default {\n --#{$name}: #{$value};\n }\n}\n\n@mixin colour-css-vars-dark() {\n @each $name, $value in colour.$colour-palette-dark {\n --#{$name}: #{$value};\n }\n}\n\n@mixin colour-css-vars-high-contrast() {\n @each $name, $value in colour.$colour-palette-high-contrast {\n --#{$name}: #{$value};\n }\n}\n\n@mixin colour-css-vars-high-contrast-dark() {\n @each $name, $value in colour.$colour-palette-high-contrast-dark {\n --#{$name}: #{$value};\n }\n}\n\n@mixin accent-css-vars($colour) {\n @if $colour == \"yellow\" {\n --accent: #{brand-colour(\"yellow\")} !important;\n --accent-background: #{brand-colour(\"yellow\")} !important;\n --accent-background-light: #{brand-colour(\"cream\")} !important;\n --accent-font-base: #{brand-colour(\"black\")} !important;\n --accent-font-dark: #{brand-colour(\"black\")} !important;\n --accent-font-light: #{brand-colour(\"black\", 0.7)} !important;\n --accent-icon-light: #{brand-colour(\"black\", 0.45)} !important;\n --accent-link: #{brand-colour(\"black\")} !important;\n --accent-link-visited: #{brand-colour(\"black\")} !important;\n --accent-keyline: #{brand-colour(\"black\", 0.5)} !important;\n --accent-keyline-dark: #{brand-colour(\"black\", 0.8)} !important;\n --button-accent-background: #{brand-colour(\"yellow\")} !important;\n } @else {\n --accent-font-base: #{brand-colour(\"white\")} !important;\n --accent-font-dark: #{brand-colour(\"white\")} !important;\n --accent-font-light: #{brand-colour(\"white\", 0.7)} !important;\n --accent-icon-light: #{brand-colour(\"white\", 0.45)} !important;\n --accent-link: #{brand-colour(\"white\")} !important;\n --accent-link-visited: #{brand-colour(\"white\")} !important;\n --accent-keyline: #{brand-colour(\"white\", 0.5)} !important;\n --accent-keyline-dark: #{brand-colour(\"white\", 0.8)} !important;\n\n @if $colour == \"black\" {\n // --accent: #{brand-colour(\"light-grey\")} !important;\n // --accent-background: #{brand-colour(\"black\")} !important;\n // --accent-background-light: #{brand-colour(\"light-grey\")} !important;\n // --button-accent-text: #{brand-colour(\"black\")} !important;\n // --button-accent-background: #{brand-colour(\"grey\")} !important;\n } @else {\n --button-accent-text: #{brand-colour(\"white\")} !important;\n @if $colour == \"pink\" {\n --accent: #{brand-colour(\"pink\")} !important;\n --accent-background: #{brand-colour(\"maroon\")} !important;\n --accent-background-light: #{brand-colour(\"pastel-pink\")} !important;\n --button-accent-background: #{brand-colour(\"maroon\")} !important;\n } @else if $colour == \"orange\" {\n --accent: #{brand-colour(\"orange\")} !important;\n --accent-background: #{brand-colour(\"chestnut\")} !important;\n --accent-background-light: #{brand-colour(\"pastel-orange\")} !important;\n --button-accent-background: #{brand-colour(\"chestnut\")} !important;\n } @else if $colour == \"green\" {\n --accent: #{brand-colour(\"green\")} !important;\n --accent-background: #{brand-colour(\"forest\")} !important;\n --accent-background-light: #{brand-colour(\"pastel-green\")} !important;\n --button-accent-background: #{brand-colour(\"forest\")} !important;\n } @else if $colour == \"blue\" {\n --accent: #{brand-colour(\"blue\")} !important;\n --accent-background: #{brand-colour(\"navy\")} !important;\n --accent-background-light: #{brand-colour(\"pastel-blue\")} !important;\n --button-accent-background: #{brand-colour(\"navy\")} !important;\n }\n }\n }\n}\n\n@mixin colour-font(\n $colour,\n $important: false,\n $default-palette: colour.$colour-palette-default\n) {\n color: map.get($default-palette, $colour) if($important, !important, null);\n color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n background-color: map.get(colour.$colour-palette-default, $colour)\n if($important, !important, null);\n background-color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-border(\n $colour,\n $width: \"\",\n $style: solid,\n $direction: \"\",\n $important: false\n) {\n @if $direction != \"\" {\n @if $width != \"\" {\n $property: border-#{$direction};\n border-#{$direction}: $width\n map.get(colour.$colour-palette-default, $colour)\n $style\n if($important, !important, null);\n border-#{$direction}: $width\n var(--#{$colour})\n $style\n if($important, !important, null);\n } @else {\n border-#{$direction}-color: map.get(\n colour.$colour-palette-default,\n $colour\n )\n if($important, !important, null);\n border-#{$direction}-color: var(--#{$colour})\n if($important, !important, null);\n }\n } @else {\n @if $width != \"\" {\n border: $width\n map.get(colour.$colour-palette-default, $colour)\n $style\n if($important, !important, null);\n border: $width var(--#{$colour}) $style if($important, !important, null);\n } @else {\n border-color: map.get(colour.$colour-palette-default, $colour)\n if($important, !important, null);\n border-color: var(--#{$colour}) if($important, !important, null);\n }\n }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n @if $width != \"\" {\n outline: $width\n map.get(colour.$colour-palette-default, $colour)\n $style\n if($important, !important, null);\n outline: $width var(--#{$colour}) $style if($important, !important, null);\n } @else {\n outline-color: map.get(colour.$colour-palette-default, $colour)\n if($important, !important, null);\n outline-color: var(--#{$colour}) if($important, !important, null);\n }\n}\n\n@mixin colour-fill($colour, $important: false) {\n fill: map.get(colour.$colour-palette-default, $colour)\n if($important, !important, null);\n fill: var(--#{$colour}) if($important, !important, null);\n}\n\n%fixed {\n @include colour-css-vars;\n\n @include colour-font(\"font-base\");\n}\n\n@mixin fixed {\n @extend %fixed;\n}\n\n%invert {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin invert {\n @extend %invert;\n}\n\n%invert-on-mobile {\n @include media.on-mobile {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n }\n}\n\n@mixin invert-on-mobile {\n @extend %invert-on-mobile;\n}\n\n%accent {\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link-visited);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin accent {\n @extend %accent;\n}\n\n%tint-background {\n @include colour-background(\"background-tint\");\n}\n\n@mixin tint-background {\n @extend %tint-background;\n}\n\n%accent-background {\n @include colour-background(\"accent-background\");\n}\n\n@mixin accent-background {\n @extend %accent-background;\n}\n\n%light-accent-background {\n --background: var(--accent-background-light);\n --font-base: #{map.get(colour.$colour-palette-default, \"font-base\")};\n --font-dark: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n --font-light: #{map.get(colour.$colour-palette-default, \"font-light\")};\n --link: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n --keyline: #{map.get(colour.$colour-palette-default, \"keyline\")};\n --keyline-dark: #{map.get(colour.$colour-palette-default, \"keyline-dark\")};\n --button-text: #{map.get(colour.$colour-palette-default, \"button-text\")};\n --button-background: #{map.get(\n colour.$colour-palette-default,\n \"button-background\"\n )};\n --button-hover-text: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-text\"\n )};\n --button-hover-background: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-background\"\n )};\n\n @include colour-background(\"background\");\n}\n\n@mixin light-accent-background {\n @extend %light-accent-background;\n}\n\n@mixin on-high-contrast {\n .tna-template--high-contrast-theme & {\n @content;\n }\n\n .tna-template--system-theme & {\n @media (prefers-contrast: more) {\n @content;\n }\n }\n}\n","@use \"../tools/colour\";\n\n.tna-visually-hidden {\n width: 1px !important;\n height: 1px !important;\n margin: 0 !important;\n padding: 0 !important;\n\n position: absolute !important;\n top: -9999px !important;\n left: -9999px !important;\n z-index: -1 !important;\n\n overflow: hidden !important;\n\n clip: rect(0, 0, 0, 0) !important;\n\n border: 0 !important;\n\n background-color: transparent !important;\n\n &::before,\n &::after {\n content: \"\\00a0\";\n }\n}\n\n:focus {\n z-index: 9;\n\n @include colour.colour-outline(\"focus-outline\", 0.3125rem, solid);\n outline-offset: 0.125rem;\n}\n\n.tna-\\!--no-focus-style {\n &:focus {\n outline: none;\n }\n}\n","@use \"sass:map\";\n@use \"../variables/spacing\";\n\n%space-below {\n margin-bottom: 2rem;\n\n &:last-child {\n margin-bottom: 0;\n }\n}\n\n@mixin space-below {\n @extend %space-below;\n}\n\n@function spacing($size) {\n @return map.get(spacing.$spacing, $size);\n}\n\n@function spacing-mobile($size) {\n @return map.get(spacing.$spacing-mobile, $size);\n}\n","@use \"../tools/colour\";\n@use \"../tools/media\";\n@use \"../tools/spacing\";\n@use \"../variables/typography\";\n\n:root {\n @include colour.colour-css-vars;\n}\n\n.tna-template {\n min-width: 320px;\n width: 100%;\n height: 100%;\n\n /\n * ------------------------------------------\n * Support ended with iOS 13 released on 19th\n * September 2019. Deprecate in the future if\n * iOS <13 share drops low enough.\n * https://caniuse.com/mdn-css_properties_-webkit-overflow-scrolling\n * ------------------------------------------\n /\n -webkit-overflow-scrolling: touch;\n\n font-size: #{typography.$relative-1rem-px}px;\n\n @include colour.colour-background(\"page-background\");\n\n accent-color: var(--accent);\n\n &--system-theme {\n @include colour.colour-css-vars;\n\n @media (prefers-color-scheme: dark) {\n @include colour.colour-css-vars-dark;\n }\n\n @media (prefers-contrast: more) {\n @include colour.colour-css-vars-high-contrast;\n\n {\n background-image: none !important;\n }\n }\n\n @media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n @include colour.colour-css-vars-high-contrast-dark;\n }\n }\n\n &--light-theme {\n @include colour.colour-css-vars;\n }\n\n &--dark-theme {\n @include colour.colour-css-vars-dark;\n }\n\n &--high-contrast-theme {\n @include colour.colour-css-vars-high-contrast;\n\n * {\n background-image: none !important;\n }\n\n &.tna-template--dark-theme {\n @include colour.colour-css-vars-high-contrast-dark;\n }\n }\n\n @include colour.accent-css-vars(\"black\"); // TODO: Temp\n\n // &--black-accent {\n // @include colour.accent-css-vars(\"black\");\n // }\n\n &--yellow-accent {\n @include colour.accent-css-vars(\"yellow\");\n }\n\n &--pink-accent {\n @include colour.accent-css-vars(\"pink\");\n }\n\n &--orange-accent {\n @include colour.accent-css-vars(\"orange\");\n }\n\n &--green-accent {\n @include colour.accent-css-vars(\"green\");\n }\n\n &--blue-accent {\n @include colour.accent-css-vars(\"blue\");\n }\n\n @media (prefers-reduced-motion) {\n * {\n animation: none !important;\n transition: none !important;\n }\n }\n}\n\n.tna-template__body {\n min-height: 100%;\n margin: 0;\n padding: 0;\n\n &:has(.tna-header):has(#main-content[role=\"main\"]):has(.tna-footer) {\n display: flex;\n flex-direction: column;\n\n #main-content[role=\"main\"] {\n flex: 1;\n }\n }\n}\n\nimg,\nsvg,\npicture,\nvideo,\ncanvas {\n max-width: 100%;\n\n display: block;\n}\n\nvideo,\ncanvas {\n width: 100%;\n}\n\n[hidden] {\n display: none;\n}\n\nhr {\n margin: 2rem 0;\n\n border-width: 1px 0 0;\n @include colour.colour-border(\"keyline\");\n border-style: solid;\n}\n\n.tna-section {\n padding-top: 3rem;\n padding-bottom: 3rem;\n\n @include media.on-mobile {\n padding-top: 2rem;\n padding-bottom: 2rem;\n }\n}\n\n.tna-aside {\n padding: 2rem;\n\n @include spacing.space-below;\n\n @include media.on-mobile {\n padding: 1rem;\n }\n\n @include colour.on-high-contrast {\n @include colour.colour-border(\"keyline-dark\", 1px);\n }\n}\n\n.tna-background {\n &--contrast {\n @include colour.invert;\n }\n\n &--accent {\n @include colour.accent;\n }\n\n &--accent-light {\n @include colour.light-accent-background;\n }\n\n &--tint {\n @include colour.tint-background;\n }\n}\n","@use \"../variables/media\";\n\n// 0 ======= 320 = 480 ===== 768 == 1024 ========================== min-width/max-width (px)\n// \| . \| \| \|\n// \|-TINY----------\|-SMALL---\|-MED--\|-LARGE------------------------\n// \| . \| \| \|\n// \|<------------->\| \| \| on-tiny\n// \|<----------------------->\| \| on-mobile\n// \|<------------------------------>\| on-smaller-than-large\n// \| . \|<------->\| \| on-small\n// \| . \|<------------------------- on-larger-than-tiny\n// \| . \| \|<---->\| on-medium\n// \| . \| \|<--------------- on-larger-than-mobile\n// \| . \| \| \|<-------- on-large\n// \|<------->. \| \| \| Smallest device\n\n@mixin on-large() {\n @media #{media.$media-large} {\n @content;\n }\n}\n\n@mixin on-medium() {\n @media #{media.$media-medium} {\n @content;\n }\n}\n\n@mixin on-small() {\n @media #{media.$media-small} {\n @content;\n }\n}\n\n@mixin on-tiny() {\n @media #{media.$media-tiny} {\n @content;\n }\n}\n\n@mixin on-larger-than-mobile() {\n @media #{media.$media-gt-mobile} {\n @content;\n }\n}\n\n@mixin on-larger-than-tiny() {\n @media #{media.$media-gt-tiny} {\n @content;\n }\n}\n\n@mixin on-smaller-than-large() {\n @media #{media.$media-lt-large} {\n @content;\n }\n}\n\n@mixin on-mobile() {\n @media #{media.$media-mobile} {\n @content;\n }\n}\n\n@mixin on-print() {\n @media print {\n @content;\n }\n}\n","@use \"../variables/spacing\";\n@use \"../tools/media\";\n\n@mixin no-spacing-generator($suffix: \"\") {\n @if $suffix != \"\" {\n $suffix: \"-\" + $suffix;\n }\n\n @each $property in margin, padding {\n @each $direction in top, bottom {\n .tna-\\!--no-#{$property}-#{$direction}#{$suffix},\n .tna-\\!--no-#{$property}-vertical#{$suffix} {\n #{$property}-#{$direction}: 0 !important;\n }\n }\n }\n}\n\n@mixin overrides($spacing, $suffix: \"\") {\n @if $suffix != \"\" {\n $suffix: \"-\" + $suffix;\n }\n\n @each $property in margin, padding {\n @each $direction in top, bottom {\n @each $size, $amount in $spacing {\n .tna-\\!--#{$property}-#{$direction}-#{$size}#{$suffix},\n .tna-\\!--#{$property}-vertical-#{$size}#{$suffix} {\n #{$property}-#{$direction}: #{$amount} !important;\n }\n }\n }\n }\n}\n\n@include no-spacing-generator;\n@include overrides(spacing.$spacing);\n\n@include media.on-medium {\n @include no-spacing-generator(\"medium\");\n @include overrides(spacing.$spacing, \"medium\");\n}\n\n@include media.on-small {\n @include no-spacing-generator(\"small\");\n @include overrides(spacing.$spacing-mobile, \"small\");\n}\n\n@include media.on-tiny {\n @include no-spacing-generator(\"tiny\");\n @include overrides(spacing.$spacing-mobile, \"tiny\");\n}\n","@use \"sass:math\";\n@use \"colour\";\n@use \"../variables/typography\";\n\n@mixin relative-font-size($fontSizePx) {\n font-size: #{math.div($fontSizePx, typography.$relative-1rem-px)}rem;\n}\n\n@mixin interacted-text-decoration {\n text-decoration: underline;\n text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n}\n\n@mixin main-font-weight {\n font-weight: typography.$font-weight-main;\n}\n\n@mixin main-font-weight-bold {\n font-weight: typography.$font-weight-main-bold;\n}\n\n@mixin main-font {\n font-family: typography.$font-family-main;\n @include main-font-weight;\n}\n\n@mixin heading-font {\n font-family: typography.$font-family-heading;\n font-weight: typography.$font-weight-heading;\n}\n\n@mixin detail-font {\n font-family: typography.$font-family-detail;\n font-weight: typography.$font-weight-detail;\n}\n\n@mixin detail-font-small {\n @include colour.colour-font(\"font-dark\");\n @include detail-font;\n @include relative-font-size(14);\n text-transform: uppercase;\n line-height: #{math.div(typography.$relative-1rem-px, 14)};\n // line-height: 1;\n}\n","@use \"sass:math\";\n\n$relative-1rem-px: 16;\n\n$body-font-size-px: 18 !default;\n$body-font-size-px-mobile: 17 !default;\n$body-line-height: #{math.div(16, 18) * 2} !default; // 1.77777\n\n$interactive-text-decoration-thickness: 3.5px !default;\n\n$font-family-main: \"Open Sans\", sans-serif !default;\n$font-weight-main: normal !default;\n$font-weight-main-bold: bold !default;\n\n$font-family-heading: supria-sans-condensed, \"Arial Narrow\", sans-serif !default;\n$font-weight-heading: 400 !default;\n\n$font-family-detail: \"Roboto Mono\", monospace !default;\n$font-weight-detail: normal !default;\n","$largest-container-width: 75.25rem !default;\n\n$gutter-width: 2rem !default;\n$gutter-width-tiny: 1rem !default;\n\n$column-count: 12;\n$column-count-medium: 6;\n$column-count-small: 4;\n$column-count-tiny: 2;\n","@use \"../../tools/typography\";\n@use \"../../utilities\";\n\n.tna-sensitive-image {\n &__warning {\n }\n\n &__details {\n position: relative;\n\n // overflow: hidden;\n\n &::after {\n width: 100%;\n padding-bottom: calc(\n 100% * var(--sensitive-image-height) / var(--sensitive-image-width)\n );\n\n display: block;\n\n position: relative;\n z-index: -1;\n\n background-image: var(--sensitive-image);\n background-clip: padding-box;\n background-size: contain;\n\n filter: blur(20px) saturate(0);\n\n content: \"\";\n }\n }\n\n &__show {\n display: flex;\n align-items: center;\n justify-content: center;\n\n position: absolute;\n inset: 0;\n z-index: 1;\n\n font-size: 0;\n\n cursor: pointer;\n\n &::after {\n padding: 0.5rem 2rem;\n\n @include typography.relative-font-size(16);\n background-color: #ff0;\n\n content: attr(data-action);\n }\n\n &:hover {\n &::after {\n color: #fff;\n\n background-color: #000;\n }\n }\n }\n\n &__container {\n }\n\n &__image {\n width: 100%;\n }\n\n &__details[open] {\n &::after,\n .tna-sensitive-image__show {\n display: none;\n }\n }\n}\n"]}

package/nationalarchives/components/skip-link/fixtures.json CHANGED Viewed

@@ -4,7 +4,7 @@
     {
       "name": "minimal",
       "options": {},
-      "html": "<a href=\"#main-content\" class=\"tna-skip-link \">Skip to main content</a>",
+      "html": "<a href=\"#main-content\" class=\"tna-skip-link \" data-module=\"tna-skip-link\">Skip to main content</a>",
       "hidden": false
     }
   ]

package/nationalarchives/components/skip-link/skip-link.css CHANGED Viewed

	@@ -1 +1 @@
1	- @import"https://use.typekit.net/hkj3kuz.css";.tna-background--contrast{--font-base: var(--contrast-font-base);--font-dark: var(--contrast-font-dark);--font-light: var(--contrast-font-light);--link: var(--contrast-link);--link-visited: var(--contrast-link-visited);--keyline: var(--contrast-keyline);--keyline-dark: var(--contrast-keyline-dark);--button-text: var(--contrast-button-text);--button-background: var(--contrast-button-background);--button-hover-text: var(--contrast-button-hover-text);--button-hover-background: var(--contrast-button-hover-background);background-color:#1e1e1e;background-color:var(--contrast-background);color:rgba(255,255,255,.95);color:var(--font-base)}.tna-chip,.tna-hgroup__supertitle,.tna-background--accent{--font-base: var(--accent-font-base);--font-dark: var(--accent-font-dark);--font-light: var(--accent-font-light);--link: var(--accent-link);--link-visited: var(--accent-link-visited);--keyline: var(--accent-keyline);--keyline-dark: var(--accent-keyline-dark);background-color:#111;background-color:var(--accent-background);color:rgba(255,255,255,.95);color:var(--font-base)}.tna-background--accent-light{background-color:#d9d9d6;background-color:var(--accent-background-light);--font-base: #343338;--font-dark: #000;--font-light: rgba(52, 51, 56, 0.7);--link: #000;--link-visited: #4c2c92;--keyline: #ccc;--keyline-dark: #26262a;--button-text: #fff;--button-background: #000;--button-hover-text: #000;--button-hover-background: #fff}.tna-visually-hidden{width:1px !important;height:1px !important;margin:0 !important;padding:0 !important;position:absolute !important;top:-9999px !important;left:-9999px !important;z-index:-1 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;border:0 !important;background-color:rgba(0,0,0,0) !important}.tna-visually-hidden::before,.tna-visually-hidden::after{content:" "}.tna-ul,.tna-ol,.tna-chip-list,.tna-blockquote,.tna-scene-setter,.tna-aside{margin-bottom:2rem}.tna-ul:last-child,.tna-ol:last-child,.tna-chip-list:last-child,.tna-blockquote:last-child,.tna-scene-setter:last-child,.tna-aside:last-child{margin-bottom:0}:root{--page-background: #f4f4f4;--font-base: #343338;--font-dark: #000;--font-light: rgba(52, 51, 56, 0.7);--link: #1d70ab;--link-visited: #4c2c92;--focus-outline: #00b0ff;--keyline: #ccc;--keyline-dark: #26262a;--button-text: #fff;--button-background: #000;--button-hover-text: #000;--button-hover-background: #fff;--contrast-background: #1e1e1e;--contrast-font-base: #fff;--contrast-font-dark: #fff;--contrast-font-light: rgba(255, 255, 255, 0.7);--contrast-link: #fff;--contrast-link-visited: #fff;--contrast-keyline: rgba(255, 255, 255, 0.5);--contrast-keyline-dark: rgba(255, 255, 255, 0.8);--contrast-button-text: #000;--contrast-button-background: #fff;--contrast-button-hover-text: #fff;--contrast-button-hover-background: #000;--accent: #d9d9d6;--accent-background: #111;--accent-background-light: #d9d9d6;--accent-font-base: #fff;--accent-font-dark: #fff;--accent-font-light: rgba(255, 255, 255, 0.7);--accent-link: #fff;--accent-link-visited: #b9f;--accent-keyline: rgba(255, 255, 255, 0.5);--accent-keyline-dark: rgba(255, 255, 255, 0.8);--button-accent-text: #000;--button-accent-background: #8c9694}.tna-template{min-width:320px;width:100%;height:100%;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;font-size:16px;background-color:#f4f4f4;background-color:var(--page-background);accent-color:var(--accent);--accent-font-base: #fff !important;--accent-font-dark: #fff !important;--accent-font-light: rgba(255, 255, 255, 0.7) !important;--accent-link: #fff !important;--accent-link-visited: #fff !important;--accent-keyline: rgba(255, 255, 255, 0.5) !important;--accent-keyline-dark: rgba(255, 255, 255, 0.8) !important}.tna-template--system-theme{--page-background: #f4f4f4;--font-base: #343338;--font-dark: #000;--font-light: rgba(52, 51, 56, 0.7);--link: #1d70ab;--link-visited: #4c2c92;--focus-outline: #00b0ff;--keyline: #ccc;--keyline-dark: #26262a;--button-text: #fff;--button-background: #000;--button-hover-text: #000;--button-hover-background: #fff;--contrast-background: #1e1e1e;--contrast-font-base: #fff;--contrast-font-dark: #fff;--contrast-font-light: rgba(255, 255, 255, 0.7);--contrast-link: #fff;--contrast-link-visited: #fff;--contrast-keyline: rgba(255, 255, 255, 0.5);--contrast-keyline-dark: rgba(255, 255, 255, 0.8);--contrast-button-text: #000;--contrast-button-background: #fff;--contrast-button-hover-text: #fff;--contrast-button-hover-background: #000;--accent: #d9d9d6;--accent-background: #111;--accent-background-light: #d9d9d6;--accent-font-base: #fff;--accent-font-dark: #fff;--accent-font-light: rgba(255, 255, 255, 0.7);--accent-link: #fff;--accent-link-visited: #b9f;--accent-keyline: rgba(255, 255, 255, 0.5);--accent-keyline-dark: rgba(255, 255, 255, 0.8);--button-accent-text: #000;--button-accent-background: #8c9694}@media(prefers-color-scheme: dark){.tna-template--system-theme{--page-background: #111;--font-base: rgba(255, 255, 255, 0.95);--font-dark: #fff;--font-light: rgba(255, 255, 255, 0.5);--link: #00b0ff;--link-visited: #fff;--focus-outline: #00b0ff;--keyline: rgba(255, 255, 255, 0.25);--keyline-dark: #fff;--button-text: #000;--button-background: #fff;--button-hover-text: #fff;--button-hover-background: #000;--contrast-background: #1e1e1e;--contrast-font-base: #fff;--contrast-font-dark: #fff;--contrast-font-light: rgba(255, 255, 255, 0.7);--contrast-link: #fff;--contrast-link-visited: #fff;--contrast-keyline: rgba(255, 255, 255, 0.5);--contrast-keyline-dark: rgba(255, 255, 255, 0.8);--contrast-button-text: #000;--contrast-button-background: #fff;--contrast-button-hover-text: #fff;--contrast-button-hover-background: #000;--accent: #d9d9d6;--accent-background: #111;--accent-background-light: #8c9694;--accent-font-base: #fff;--accent-font-dark: #fff;--accent-font-light: rgba(255, 255, 255, 0.7);--accent-link: #fff;--accent-link-visited: #b9f;--accent-keyline: rgba(255, 255, 255, 0.5);--accent-keyline-dark: rgba(255, 255, 255, 0.8);--button-accent-text: #000;--button-accent-background: #8c9694}}@media(prefers-contrast: more){.tna-template--system-theme{--page-background: #fff;--font-base: #000;--font-dark: #000;--font-light: #000;--link: #004c7e;--link-visited: #000;--focus-outline: #fd3f03;--keyline: #000;--keyline-dark: #000;--button-text: #fff;--button-background: #000;--button-hover-text: #000;--button-hover-background: #fff;--contrast-background: #f4f4f4;--contrast-font-base: #000;--contrast-font-dark: #000;--contrast-font-light: #000;--contrast-link: #004c7e;--contrast-link-visited: #000;--contrast-keyline: #000;--contrast-keyline-dark: #000;--contrast-button-text: #fff;--contrast-button-background: #000;--contrast-button-hover-text: #000;--contrast-button-hover-background: #fff;--accent: #d9d9d6;--accent-background: #111;--accent-background-light: #d9d9d6;--accent-font-base: #fff;--accent-font-dark: #fff;--accent-font-light: rgba(255, 255, 255, 0.7);--accent-link: #fff;--accent-link-visited: #b9f;--accent-keyline: rgba(255, 255, 255, 0.5);--accent-keyline-dark: rgba(255, 255, 255, 0.8);--button-accent-text: #000;--button-accent-background: #8c9694}.tna-template--system-theme {background-image:none !important}}@media(prefers-contrast: more)and (prefers-color-scheme: dark){.tna-template--system-theme{--page-background: #000;--font-base: #fff;--font-dark: #fff;--font-light: #fff;--link: #fff;--link-visited: #fff;--focus-outline: #00b0ff;--keyline: #fff;--keyline-dark: #fff;--button-text: #000;--button-background: #fff;--button-hover-text: #fff;--button-hover-background: #000;--contrast-background: #111;--contrast-font-base: #fff;--contrast-font-dark: #fff;--contrast-font-light: rgba(255, 255, 255, 0.7);--contrast-link: #fff;--contrast-link-visited: #fff;--contrast-keyline: rgba(255, 255, 255, 0.5);--contrast-keyline-dark: rgba(255, 255, 255, 0.8);--contrast-button-text: #000;--contrast-button-background: #fff;--contrast-button-hover-text: #fff;--contrast-button-hover-background: #000;--accent: #d9d9d6;--accent-background: #111;--accent-background-light: #8c9694;--accent-font-base: #fff;--accent-font-dark: #fff;--accent-font-light: rgba(255, 255, 255, 0.7);--accent-link: #fff;--accent-link-visited: #b9f;--accent-keyline: rgba(255, 255, 255, 0.5);--accent-keyline-dark: rgba(255, 255, 255, 0.8);--button-accent-text: #000;--button-accent-background: #8c9694}}.tna-template--light-theme{--page-background: #f4f4f4;--font-base: #343338;--font-dark: #000;--font-light: rgba(52, 51, 56, 0.7);--link: #1d70ab;--link-visited: #4c2c92;--focus-outline: #00b0ff;--keyline: #ccc;--keyline-dark: #26262a;--button-text: #fff;--button-background: #000;--button-hover-text: #000;--button-hover-background: #fff;--contrast-background: #1e1e1e;--contrast-font-base: #fff;--contrast-font-dark: #fff;--contrast-font-light: rgba(255, 255, 255, 0.7);--contrast-link: #fff;--contrast-link-visited: #fff;--contrast-keyline: rgba(255, 255, 255, 0.5);--contrast-keyline-dark: rgba(255, 255, 255, 0.8);--contrast-button-text: #000;--contrast-button-background: #fff;--contrast-button-hover-text: #fff;--contrast-button-hover-background: #000;--accent: #d9d9d6;--accent-background: #111;--accent-background-light: #d9d9d6;--accent-font-base: #fff;--accent-font-dark: #fff;--accent-font-light: rgba(255, 255, 255, 0.7);--accent-link: #fff;--accent-link-visited: #b9f;--accent-keyline: rgba(255, 255, 255, 0.5);--accent-keyline-dark: rgba(255, 255, 255, 0.8);--button-accent-text: #000;--button-accent-background: #8c9694}.tna-template--dark-theme{--page-background: #111;--font-base: rgba(255, 255, 255, 0.95);--font-dark: #fff;--font-light: rgba(255, 255, 255, 0.5);--link: #00b0ff;--link-visited: #fff;--focus-outline: #00b0ff;--keyline: rgba(255, 255, 255, 0.25);--keyline-dark: #fff;--button-text: #000;--button-background: #fff;--button-hover-text: #fff;--button-hover-background: #000;--contrast-background: #1e1e1e;--contrast-font-base: #fff;--contrast-font-dark: #fff;--contrast-font-light: rgba(255, 255, 255, 0.7);--contrast-link: #fff;--contrast-link-visited: #fff;--contrast-keyline: rgba(255, 255, 255, 0.5);--contrast-keyline-dark: rgba(255, 255, 255, 0.8);--contrast-button-text: #000;--contrast-button-background: #fff;--contrast-button-hover-text: #fff;--contrast-button-hover-background: #000;--accent: #d9d9d6;--accent-background: #111;--accent-background-light: #8c9694;--accent-font-base: #fff;--accent-font-dark: #fff;--accent-font-light: rgba(255, 255, 255, 0.7);--accent-link: #fff;--accent-link-visited: #b9f;--accent-keyline: rgba(255, 255, 255, 0.5);--accent-keyline-dark: rgba(255, 255, 255, 0.8);--button-accent-text: #000;--button-accent-background: #8c9694}.tna-template--high-contrast-theme{--page-background: #fff;--font-base: #000;--font-dark: #000;--font-light: #000;--link: #004c7e;--link-visited: #000;--focus-outline: #fd3f03;--keyline: #000;--keyline-dark: #000;--button-text: #fff;--button-background: #000;--button-hover-text: #000;--button-hover-background: #fff;--contrast-background: #f4f4f4;--contrast-font-base: #000;--contrast-font-dark: #000;--contrast-font-light: #000;--contrast-link: #004c7e;--contrast-link-visited: #000;--contrast-keyline: #000;--contrast-keyline-dark: #000;--contrast-button-text: #fff;--contrast-button-background: #000;--contrast-button-hover-text: #000;--contrast-button-hover-background: #fff;--accent: #d9d9d6;--accent-background: #111;--accent-background-light: #d9d9d6;--accent-font-base: #fff;--accent-font-dark: #fff;--accent-font-light: rgba(255, 255, 255, 0.7);--accent-link: #fff;--accent-link-visited: #b9f;--accent-keyline: rgba(255, 255, 255, 0.5);--accent-keyline-dark: rgba(255, 255, 255, 0.8);--button-accent-text: #000;--button-accent-background: #8c9694}.tna-template--high-contrast-theme {background-image:none !important}.tna-template--high-contrast-theme.tna-template--dark-theme{--page-background: #000;--font-base: #fff;--font-dark: #fff;--font-light: #fff;--link: #fff;--link-visited: #fff;--focus-outline: #00b0ff;--keyline: #fff;--keyline-dark: #fff;--button-text: #000;--button-background: #fff;--button-hover-text: #fff;--button-hover-background: #000;--contrast-background: #111;--contrast-font-base: #fff;--contrast-font-dark: #fff;--contrast-font-light: rgba(255, 255, 255, 0.7);--contrast-link: #fff;--contrast-link-visited: #fff;--contrast-keyline: rgba(255, 255, 255, 0.5);--contrast-keyline-dark: rgba(255, 255, 255, 0.8);--contrast-button-text: #000;--contrast-button-background: #fff;--contrast-button-hover-text: #fff;--contrast-button-hover-background: #000;--accent: #d9d9d6;--accent-background: #111;--accent-background-light: #8c9694;--accent-font-base: #fff;--accent-font-dark: #fff;--accent-font-light: rgba(255, 255, 255, 0.7);--accent-link: #fff;--accent-link-visited: #b9f;--accent-keyline: rgba(255, 255, 255, 0.5);--accent-keyline-dark: rgba(255, 255, 255, 0.8);--button-accent-text: #000;--button-accent-background: #8c9694}.tna-template--yellow-accent{--accent: #fc0 !important;--accent-background: #fc0 !important;--accent-background-light: #f9f7e2 !important;--accent-font-base: #000 !important;--accent-font-dark: #000 !important;--accent-font-light: rgba(0, 0, 0, 0.7) !important;--accent-link: #000 !important;--accent-link-visited: #000 !important;--accent-keyline: rgba(0, 0, 0, 0.5) !important;--accent-keyline-dark: rgba(0, 0, 0, 0.8) !important;--button-accent-background: #fc0 !important}.tna-template--pink-accent{--accent-font-base: #fff !important;--accent-font-dark: #fff !important;--accent-font-light: rgba(255, 255, 255, 0.7) !important;--accent-link: #fff !important;--accent-link-visited: #fff !important;--accent-keyline: rgba(255, 255, 255, 0.5) !important;--accent-keyline-dark: rgba(255, 255, 255, 0.8) !important;--button-accent-text: #fff !important;--accent: #fe1d57 !important;--accent-background: #9c193a !important;--accent-background-light: #fad3d4 !important;--button-accent-background: #9c193a !important}.tna-template--orange-accent{--accent-font-base: #fff !important;--accent-font-dark: #fff !important;--accent-font-light: rgba(255, 255, 255, 0.7) !important;--accent-link: #fff !important;--accent-link-visited: #fff !important;--accent-keyline: rgba(255, 255, 255, 0.5) !important;--accent-keyline-dark: rgba(255, 255, 255, 0.8) !important;--button-accent-text: #fff !important;--accent: #fd3f03 !important;--accent-background: #8f3415 !important;--accent-background-light: #f9e1bc !important;--button-accent-background: #8f3415 !important}.tna-template--green-accent{--accent-font-base: #fff !important;--accent-font-dark: #fff !important;--accent-font-light: rgba(255, 255, 255, 0.7) !important;--accent-link: #fff !important;--accent-link-visited: #fff !important;--accent-keyline: rgba(255, 255, 255, 0.5) !important;--accent-keyline-dark: rgba(255, 255, 255, 0.8) !important;--button-accent-text: #fff !important;--accent: #86bc25 !important;--accent-background: #00623b !important;--accent-background-light: #dde5d5 !important;--button-accent-background: #00623b !important}.tna-template--blue-accent{--accent-font-base: #fff !important;--accent-font-dark: #fff !important;--accent-font-light: rgba(255, 255, 255, 0.7) !important;--accent-link: #fff !important;--accent-link-visited: #fff !important;--accent-keyline: rgba(255, 255, 255, 0.5) !important;--accent-keyline-dark: rgba(255, 255, 255, 0.8) !important;--button-accent-text: #fff !important;--accent: #00b0ff !important;--accent-background: #004c7e !important;--accent-background-light: #d4e5ef !important;--button-accent-background: #004c7e !important}@media(prefers-reduced-motion){.tna-template {animation:none !important;transition:none !important}}.tna-template__body{min-height:100%;margin:0;padding:0;overflow:auto}.tna-template__body:has(.tna-header):has(#main-content[role=main]):has(.tna-footer){display:flex;flex-direction:column}.tna-template__body:has(.tna-header):has(#main-content[role=main]):has(.tna-footer) #main-content[role=main]{flex:1}img,svg,picture,video,canvas{max-width:100%;display:block}video,canvas{width:100%}[hidden]{display:none}:focus{outline:.3125rem solid;outline-color:#00b0ff;outline-color:var(--focus-outline);outline-offset:.125rem}hr{margin:2rem 0;border-width:1px 0 0;border-color:#ccc;border-color:var(--keyline);border-style:solid}.tna-section{padding-top:3rem;padding-bottom:3rem}@media(max-width: 48em){.tna-section{padding-top:2rem;padding-bottom:2rem}}.tna-aside{padding:2rem}@media(max-width: 48em){.tna-aside{padding:1rem}}.tna-template--high-contrast-theme .tna-aside{border:1px #26262a solid;border:1px var(--keyline-dark) solid}@media(prefers-contrast: more){.tna-template--system-theme .tna-aside{border:1px #26262a solid;border:1px var(--keyline-dark) solid}}.tna-\!--no-margin-top,.tna-\!--no-margin-vertical{margin-top:0 !important}.tna-\!--no-margin-bottom,.tna-\!--no-margin-vertical{margin-bottom:0 !important}.tna-\!--no-padding-top,.tna-\!--no-padding-vertical{padding-top:0 !important}.tna-\!--no-padding-bottom,.tna-\!--no-padding-vertical{padding-bottom:0 !important}.tna-\!--margin-top-xs,.tna-\!--margin-vertical-xs{margin-top:0.5rem !important}.tna-\!--margin-top-s,.tna-\!--margin-vertical-s{margin-top:1rem !important}.tna-\!--margin-top-m,.tna-\!--margin-vertical-m{margin-top:2rem !important}.tna-\!--margin-top-l,.tna-\!--margin-vertical-l{margin-top:3rem !important}.tna-\!--margin-top-xl,.tna-\!--margin-vertical-xl{margin-top:5rem !important}.tna-\!--margin-top-xxl,.tna-\!--margin-vertical-xxl{margin-top:8rem !important}.tna-\!--margin-bottom-xs,.tna-\!--margin-vertical-xs{margin-bottom:0.5rem !important}.tna-\!--margin-bottom-s,.tna-\!--margin-vertical-s{margin-bottom:1rem !important}.tna-\!--margin-bottom-m,.tna-\!--margin-vertical-m{margin-bottom:2rem !important}.tna-\!--margin-bottom-l,.tna-\!--margin-vertical-l{margin-bottom:3rem !important}.tna-\!--margin-bottom-xl,.tna-\!--margin-vertical-xl{margin-bottom:5rem !important}.tna-\!--margin-bottom-xxl,.tna-\!--margin-vertical-xxl{margin-bottom:8rem !important}.tna-\!--padding-top-xs,.tna-\!--padding-vertical-xs{padding-top:0.5rem !important}.tna-\!--padding-top-s,.tna-\!--padding-vertical-s{padding-top:1rem !important}.tna-\!--padding-top-m,.tna-\!--padding-vertical-m{padding-top:2rem !important}.tna-\!--padding-top-l,.tna-\!--padding-vertical-l{padding-top:3rem !important}.tna-\!--padding-top-xl,.tna-\!--padding-vertical-xl{padding-top:5rem !important}.tna-\!--padding-top-xxl,.tna-\!--padding-vertical-xxl{padding-top:8rem !important}.tna-\!--padding-bottom-xs,.tna-\!--padding-vertical-xs{padding-bottom:0.5rem !important}.tna-\!--padding-bottom-s,.tna-\!--padding-vertical-s{padding-bottom:1rem !important}.tna-\!--padding-bottom-m,.tna-\!--padding-vertical-m{padding-bottom:2rem !important}.tna-\!--padding-bottom-l,.tna-\!--padding-vertical-l{padding-bottom:3rem !important}.tna-\!--padding-bottom-xl,.tna-\!--padding-vertical-xl{padding-bottom:5rem !important}.tna-\!--padding-bottom-xxl,.tna-\!--padding-vertical-xxl{padding-bottom:8rem !important}@media(min-width: 48.0625em)and (max-width: 64em){.tna-\!--no-margin-top-medium,.tna-\!--no-margin-vertical-medium{margin-top:0 !important}.tna-\!--no-margin-bottom-medium,.tna-\!--no-margin-vertical-medium{margin-bottom:0 !important}.tna-\!--no-padding-top-medium,.tna-\!--no-padding-vertical-medium{padding-top:0 !important}.tna-\!--no-padding-bottom-medium,.tna-\!--no-padding-vertical-medium{padding-bottom:0 !important}.tna-\!--margin-top-xs-medium,.tna-\!--margin-vertical-xs-medium{margin-top:0.5rem !important}.tna-\!--margin-top-s-medium,.tna-\!--margin-vertical-s-medium{margin-top:1rem !important}.tna-\!--margin-top-m-medium,.tna-\!--margin-vertical-m-medium{margin-top:2rem !important}.tna-\!--margin-top-l-medium,.tna-\!--margin-vertical-l-medium{margin-top:3rem !important}.tna-\!--margin-top-xl-medium,.tna-\!--margin-vertical-xl-medium{margin-top:5rem !important}.tna-\!--margin-top-xxl-medium,.tna-\!--margin-vertical-xxl-medium{margin-top:8rem !important}.tna-\!--margin-bottom-xs-medium,.tna-\!--margin-vertical-xs-medium{margin-bottom:0.5rem !important}.tna-\!--margin-bottom-s-medium,.tna-\!--margin-vertical-s-medium{margin-bottom:1rem !important}.tna-\!--margin-bottom-m-medium,.tna-\!--margin-vertical-m-medium{margin-bottom:2rem !important}.tna-\!--margin-bottom-l-medium,.tna-\!--margin-vertical-l-medium{margin-bottom:3rem !important}.tna-\!--margin-bottom-xl-medium,.tna-\!--margin-vertical-xl-medium{margin-bottom:5rem !important}.tna-\!--margin-bottom-xxl-medium,.tna-\!--margin-vertical-xxl-medium{margin-bottom:8rem !important}.tna-\!--padding-top-xs-medium,.tna-\!--padding-vertical-xs-medium{padding-top:0.5rem !important}.tna-\!--padding-top-s-medium,.tna-\!--padding-vertical-s-medium{padding-top:1rem !important}.tna-\!--padding-top-m-medium,.tna-\!--padding-vertical-m-medium{padding-top:2rem !important}.tna-\!--padding-top-l-medium,.tna-\!--padding-vertical-l-medium{padding-top:3rem !important}.tna-\!--padding-top-xl-medium,.tna-\!--padding-vertical-xl-medium{padding-top:5rem !important}.tna-\!--padding-top-xxl-medium,.tna-\!--padding-vertical-xxl-medium{padding-top:8rem !important}.tna-\!--padding-bottom-xs-medium,.tna-\!--padding-vertical-xs-medium{padding-bottom:0.5rem !important}.tna-\!--padding-bottom-s-medium,.tna-\!--padding-vertical-s-medium{padding-bottom:1rem !important}.tna-\!--padding-bottom-m-medium,.tna-\!--padding-vertical-m-medium{padding-bottom:2rem !important}.tna-\!--padding-bottom-l-medium,.tna-\!--padding-vertical-l-medium{padding-bottom:3rem !important}.tna-\!--padding-bottom-xl-medium,.tna-\!--padding-vertical-xl-medium{padding-bottom:5rem !important}.tna-\!--padding-bottom-xxl-medium,.tna-\!--padding-vertical-xxl-medium{padding-bottom:8rem !important}}@media(min-width: 30.0625em)and (max-width: 48em){.tna-\!--no-margin-top-small,.tna-\!--no-margin-vertical-small{margin-top:0 !important}.tna-\!--no-margin-bottom-small,.tna-\!--no-margin-vertical-small{margin-bottom:0 !important}.tna-\!--no-padding-top-small,.tna-\!--no-padding-vertical-small{padding-top:0 !important}.tna-\!--no-padding-bottom-small,.tna-\!--no-padding-vertical-small{padding-bottom:0 !important}.tna-\!--margin-top-xs-small,.tna-\!--margin-vertical-xs-small{margin-top:0.5rem !important}.tna-\!--margin-top-s-small,.tna-\!--margin-vertical-s-small{margin-top:0.75rem !important}.tna-\!--margin-top-m-small,.tna-\!--margin-vertical-m-small{margin-top:1.5rem !important}.tna-\!--margin-top-l-small,.tna-\!--margin-vertical-l-small{margin-top:2rem !important}.tna-\!--margin-top-xl-small,.tna-\!--margin-vertical-xl-small{margin-top:3rem !important}.tna-\!--margin-top-xxl-small,.tna-\!--margin-vertical-xxl-small{margin-top:5rem !important}.tna-\!--margin-bottom-xs-small,.tna-\!--margin-vertical-xs-small{margin-bottom:0.5rem !important}.tna-\!--margin-bottom-s-small,.tna-\!--margin-vertical-s-small{margin-bottom:0.75rem !important}.tna-\!--margin-bottom-m-small,.tna-\!--margin-vertical-m-small{margin-bottom:1.5rem !important}.tna-\!--margin-bottom-l-small,.tna-\!--margin-vertical-l-small{margin-bottom:2rem !important}.tna-\!--margin-bottom-xl-small,.tna-\!--margin-vertical-xl-small{margin-bottom:3rem !important}.tna-\!--margin-bottom-xxl-small,.tna-\!--margin-vertical-xxl-small{margin-bottom:5rem !important}.tna-\!--padding-top-xs-small,.tna-\!--padding-vertical-xs-small{padding-top:0.5rem !important}.tna-\!--padding-top-s-small,.tna-\!--padding-vertical-s-small{padding-top:0.75rem !important}.tna-\!--padding-top-m-small,.tna-\!--padding-vertical-m-small{padding-top:1.5rem !important}.tna-\!--padding-top-l-small,.tna-\!--padding-vertical-l-small{padding-top:2rem !important}.tna-\!--padding-top-xl-small,.tna-\!--padding-vertical-xl-small{padding-top:3rem !important}.tna-\!--padding-top-xxl-small,.tna-\!--padding-vertical-xxl-small{padding-top:5rem !important}.tna-\!--padding-bottom-xs-small,.tna-\!--padding-vertical-xs-small{padding-bottom:0.5rem !important}.tna-\!--padding-bottom-s-small,.tna-\!--padding-vertical-s-small{padding-bottom:0.75rem !important}.tna-\!--padding-bottom-m-small,.tna-\!--padding-vertical-m-small{padding-bottom:1.5rem !important}.tna-\!--padding-bottom-l-small,.tna-\!--padding-vertical-l-small{padding-bottom:2rem !important}.tna-\!--padding-bottom-xl-small,.tna-\!--padding-vertical-xl-small{padding-bottom:3rem !important}.tna-\!--padding-bottom-xxl-small,.tna-\!--padding-vertical-xxl-small{padding-bottom:5rem !important}}@media(max-width: 30em){.tna-\!--no-margin-top-tiny,.tna-\!--no-margin-vertical-tiny{margin-top:0 !important}.tna-\!--no-margin-bottom-tiny,.tna-\!--no-margin-vertical-tiny{margin-bottom:0 !important}.tna-\!--no-padding-top-tiny,.tna-\!--no-padding-vertical-tiny{padding-top:0 !important}.tna-\!--no-padding-bottom-tiny,.tna-\!--no-padding-vertical-tiny{padding-bottom:0 !important}.tna-\!--margin-top-xs-tiny,.tna-\!--margin-vertical-xs-tiny{margin-top:0.5rem !important}.tna-\!--margin-top-s-tiny,.tna-\!--margin-vertical-s-tiny{margin-top:0.75rem !important}.tna-\!--margin-top-m-tiny,.tna-\!--margin-vertical-m-tiny{margin-top:1.5rem !important}.tna-\!--margin-top-l-tiny,.tna-\!--margin-vertical-l-tiny{margin-top:2rem !important}.tna-\!--margin-top-xl-tiny,.tna-\!--margin-vertical-xl-tiny{margin-top:3rem !important}.tna-\!--margin-top-xxl-tiny,.tna-\!--margin-vertical-xxl-tiny{margin-top:5rem !important}.tna-\!--margin-bottom-xs-tiny,.tna-\!--margin-vertical-xs-tiny{margin-bottom:0.5rem !important}.tna-\!--margin-bottom-s-tiny,.tna-\!--margin-vertical-s-tiny{margin-bottom:0.75rem !important}.tna-\!--margin-bottom-m-tiny,.tna-\!--margin-vertical-m-tiny{margin-bottom:1.5rem !important}.tna-\!--margin-bottom-l-tiny,.tna-\!--margin-vertical-l-tiny{margin-bottom:2rem !important}.tna-\!--margin-bottom-xl-tiny,.tna-\!--margin-vertical-xl-tiny{margin-bottom:3rem !important}.tna-\!--margin-bottom-xxl-tiny,.tna-\!--margin-vertical-xxl-tiny{margin-bottom:5rem !important}.tna-\!--padding-top-xs-tiny,.tna-\!--padding-vertical-xs-tiny{padding-top:0.5rem !important}.tna-\!--padding-top-s-tiny,.tna-\!--padding-vertical-s-tiny{padding-top:0.75rem !important}.tna-\!--padding-top-m-tiny,.tna-\!--padding-vertical-m-tiny{padding-top:1.5rem !important}.tna-\!--padding-top-l-tiny,.tna-\!--padding-vertical-l-tiny{padding-top:2rem !important}.tna-\!--padding-top-xl-tiny,.tna-\!--padding-vertical-xl-tiny{padding-top:3rem !important}.tna-\!--padding-top-xxl-tiny,.tna-\!--padding-vertical-xxl-tiny{padding-top:5rem !important}.tna-\!--padding-bottom-xs-tiny,.tna-\!--padding-vertical-xs-tiny{padding-bottom:0.5rem !important}.tna-\!--padding-bottom-s-tiny,.tna-\!--padding-vertical-s-tiny{padding-bottom:0.75rem !important}.tna-\!--padding-bottom-m-tiny,.tna-\!--padding-vertical-m-tiny{padding-bottom:1.5rem !important}.tna-\!--padding-bottom-l-tiny,.tna-\!--padding-vertical-l-tiny{padding-bottom:2rem !important}.tna-\!--padding-bottom-xl-tiny,.tna-\!--padding-vertical-xl-tiny{padding-bottom:3rem !important}.tna-\!--padding-bottom-xxl-tiny,.tna-\!--padding-vertical-xxl-tiny{padding-bottom:5rem !important}}@font-face{font-family:"Open Sans";src:url("assets/fonts/OpenSans-Medium.ttf");font-weight:normal;font-style:normal}@font-face{font-family:"Open Sans";src:url("assets/fonts/OpenSans-Bold.ttf");font-weight:bold;font-style:normal}@font-face{font-family:"Roboto Mono";src:url("assets/fonts/RobotoMono-Regular.ttf");font-weight:normal;font-style:normal}.tna-template{color:#343338;color:var(--font-base);font-family:"Open Sans",serif;font-weight:normal;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-webkit-text-size-adjust:none;direction:ltr}.tna-template__body{color:inherit;font-size:1.125rem;line-height:1.7777777778}h1,h2,h3,h4,h5,h6,ul,ol{margin-top:0}h1,h2,h3,h4,h5,h6,strong{font-weight:bold}p{margin:0 0 1.5rem}@media(max-width: 30em){p{margin-bottom:1rem}}p:last-child{margin-bottom:0}a{color:#1d70ab;color:var(--link);text-decoration-thickness:1.5px}a:visited{color:#4c2c92;color:var(--link-visited)}a:hover,a:active{text-decoration:underline;text-decoration-thickness:3.5px}a.tna-chip{text-decoration:none}a.tna-chip,a.tna-chip:link,a.tna-chip:visited{color:#000;color:var(--font-dark)}a.tna-chip:hover{text-decoration:underline;text-decoration-thickness:3.5px}.tna-ul,.tna-ol{margin-top:0;margin-right:0;margin-left:0;padding:0 0 0 2rem}.tna-ul li::marker,.tna-ol li::marker{color:#111;color:var(--accent-background);font-weight:700}.tna-ul--plain,.tna-ol--plain{padding-left:0;list-style:none}.tna-hgroup__supertitle,.tna-chip{max-width:max-content;padding:.375em .5rem;display:block;color:#000;color:var(--font-dark);font-family:"Roboto Mono",monospace;font-weight:normal;font-size:0.875rem;text-transform:uppercase;line-height:1.1428571429;line-height:1}.tna-chip-list{padding-left:0;display:flex;flex-wrap:wrap;gap:1rem;list-style:none}.tna-hgroup__title,.tna-heading{color:#000;color:var(--font-dark);font-family:supria-sans-condensed,"Arial Narrow",sans-serif;font-weight:400}.tna-hgroup__title a,.tna-heading a{display:inline-block}.tna-hgroup__title a::after,.tna-heading a::after{padding-left:.25rem;display:inline-block;font-weight:700;content:"›"}.tna-hgroup__title a:hover::after,.tna-heading a:hover::after{padding-left:.5rem}.tna-hgroup--xl .tna-hgroup__title,.tna-heading--xl{font-size:4rem;line-height:1.2}@media(min-width: 48.0625em)and (max-width: 64em){.tna-hgroup--xl .tna-hgroup__title,.tna-heading--xl{font-size:3.125rem}}@media(max-width: 48em){.tna-hgroup--xl .tna-hgroup__title,.tna-heading--xl{font-size:2.25rem}}.tna-hgroup--l .tna-hgroup__title,.tna-heading--l{font-size:2rem;line-height:1.4}@media(min-width: 48.0625em)and (max-width: 64em){.tna-hgroup--l .tna-hgroup__title,.tna-heading--l{font-size:1.75rem}}@media(max-width: 48em){.tna-hgroup--l .tna-hgroup__title,.tna-heading--l{font-size:1.5rem}}.tna-hgroup--m .tna-hgroup__title,.tna-heading--m{font-size:1.25rem;line-height:1.6}.tna-hgroup--s .tna-hgroup__title,.tna-heading--s{font-size:1.125rem;line-height:1.6}.tna-hgroup__supertitle{margin:0 0 .5rem}.tna-hgroup__title{margin:0;display:block}.tna-heading,.tna-hgroup{margin-top:3rem;margin-bottom:1rem}.tna-heading:first-child,.tna-hgroup:first-child{margin-top:0}.tna-heading:last-child,.tna-hgroup:last-child{margin-bottom:0}.tna-blockquote{margin-top:0;margin-right:0;margin-left:0;padding:1rem 1rem 1rem 2rem;border-left:.35rem #111 solid;border-left:.35rem var(--accent-background) solid}.tna-blockquote__quote{font-weight:700}.tna-blockquote__author{font-style:italic}.tna-blockquote .tna-blockquote__author{margin:1rem 0 0}.tna-blockquote__author::before{content:"—" " "}.tna-scene-setter{font-family:"Roboto Mono",monospace;font-weight:normal;color:#000;color:var(--font-dark);font-size:1.875rem;line-height:1.6666666667}@media(max-width: 48em){.tna-scene-setter{font-size:1.5rem;line-height:2}}.tna-scene-setter a{color:inherit;text-decoration-thickness:2px}.tna-scene-setter a:hover{text-decoration-thickness:4.5px}.tna-columns{column-gap:2rem}.tna-columns--2{column-count:2}.tna-columns--3{column-count:3}@media(max-width: 48em){.tna-columns{column-gap:1.5rem}}@media(min-width: 30.0625em)and (max-width: 48em){.tna-columns--1-small{column-count:1}.tna-columns--2-small{column-count:2}.tna-columns--3-small{column-count:3}.tna-columns--4-small{column-count:4}}@media(max-width: 30em){.tna-columns--1-tiny{column-count:1}.tna-columns--2-tiny{column-count:2}.tna-columns--3-tiny{column-count:3}.tna-columns--4-tiny{column-count:4}}.tna-columns__block{break-inside:avoid}.tna-columns:has(.tna-columns__block:only-of-type){column-count:1}.tna-skip-link{width:1px !important;height:1px !important;margin:0 !important;padding:1rem !important;display:block !important;position:absolute !important;overflow:hidden !important;white-space:nowrap !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important}.tna-skip-link,.tna-skip-link:link,.tna-skip-link:visited{color:#fff !important;color:var(--button-text) !important}.tna-skip-link:active,.tna-skip-link:focus{width:auto !important;height:auto !important;margin:inherit !important;position:static !important;overflow:visible !important;white-space:inherit !important;clip:auto !important;-webkit-clip-path:none !important;clip-path:none !important}.tna-skip-link:focus{background-color:#000 !important;background-color:var(--button-background) !important;border:.3125rem #00b0ff solid !important;border:.3125rem var(--focus-outline) solid !important;outline:none !important}.tna-skip-link:hover{color:#000 !important;color:var(--button-hover-text) !important;background-color:#fff !important;background-color:var(--button-hover-background) !important}/# sourceMappingURL=skip-link.css.map /
1	+ @import"https://use.typekit.net/hkj3kuz.css";.tna-background--contrast{--background: var(--contrast-background);--font-base: var(--contrast-font-base);--font-dark: var(--contrast-font-dark);--font-light: var(--contrast-font-light);--icon-light: var(--contrast-icon-light);--link: var(--contrast-link);--link-visited: var(--contrast-link-visited);--keyline: var(--contrast-keyline);--keyline-dark: var(--contrast-keyline-dark);--button-text: var(--contrast-button-text);--button-background: var(--contrast-button-background);--button-hover-text: var(--contrast-button-hover-text);--button-hover-background: var(--contrast-button-hover-background);background-color:var(--background);color:rgb(255 255 255/0.95);color:var(--font-base)}.tna-chip,.tna-hgroup__supertitle,.tna-background--accent{--background: var(--accent-background);--font-base: var(--accent-font-base);--font-dark: var(--accent-font-dark);--font-light: var(--accent-font-light);--icon-light: var(--accent-icon-light);--link: var(--accent-link);--link-visited: var(--accent-link-visited);--keyline: var(--accent-keyline);--keyline-dark: var(--accent-keyline-dark);background-color:var(--background);color:rgb(255 255 255/0.95);color:var(--font-base)}.tna-background--tint{background-color:#d8d8d8;background-color:var(--background-tint)}.tna-background--accent-light{--background: var(--accent-background-light);--font-base: #343338;--font-dark: rgb(0, 0, 0);--font-light: rgb(52 51 56/0.7);--link: rgb(0, 0, 0);--link-visited: #4c2c92;--keyline: rgb(38 38 42/0.25);--keyline-dark: #26262a;--button-text: rgb(255, 255, 255);--button-background: rgb(0, 0, 0);--button-hover-text: rgb(0, 0, 0);--button-hover-background: rgb(255, 255, 255);background-color:var(--background)}.tna-visually-hidden{width:1px !important;height:1px !important;margin:0 !important;padding:0 !important;position:absolute !important;top:-9999px !important;left:-9999px !important;z-index:-1 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;border:0 !important;background-color:rgba(0,0,0,0) !important}.tna-visually-hidden::before,.tna-visually-hidden::after{content:" "}:focus{z-index:9;outline:.3125rem #00b0ff solid;outline:.3125rem var(--focus-outline) solid;outline-offset:.125rem}.tna-\!--no-focus-style:focus{outline:none}.tna-ul,.tna-ol,.tna-dl,.tna-chip-list,.tna-blockquote,.tna-scene-setter,.tna-aside{margin-bottom:2rem}.tna-ul:last-child,.tna-ol:last-child,.tna-dl:last-child,.tna-chip-list:last-child,.tna-blockquote:last-child,.tna-scene-setter:last-child,.tna-aside:last-child{margin-bottom:0}:root{--page-background: #f4f4f4;--background-tint: #d8d8d8;--font-base: #343338;--font-dark: rgb(0, 0, 0);--font-light: rgb(52 51 56/0.7);--icon-light: rgb(52 51 56/0.45);--link: #1d70ab;--link-visited: #4c2c92;--focus-outline: rgb(0, 176, 255);--keyline: rgb(38 38 42/0.25);--keyline-dark: #26262a;--button-text: rgb(255, 255, 255);--button-background: rgb(0, 0, 0);--button-hover-text: rgb(0, 0, 0);--button-hover-background: rgb(255, 255, 255);--contrast-background: #1e1e1e;--contrast-font-base: rgb(255, 255, 255);--contrast-font-dark: rgb(255, 255, 255);--contrast-font-light: rgb(255 255 255/0.7);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: rgb(255, 255, 255);--contrast-link-visited: rgb(255, 255, 255);--contrast-keyline: rgb(255 255 255/0.5);--contrast-keyline-dark: rgb(255 255 255/0.8);--contrast-button-text: rgb(0, 0, 0);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(0, 0, 0);--accent: #d9d9d6;--accent-background: #111;--accent-background-light: #d9d9d6;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}.tna-template{min-width:320px;width:100%;height:100%;-webkit-overflow-scrolling:touch;font-size:16px;background-color:#f4f4f4;background-color:var(--page-background);accent-color:var(--accent);--accent-font-base: rgb(255, 255, 255) !important;--accent-font-dark: rgb(255, 255, 255) !important;--accent-font-light: rgb(255 255 255/0.7) !important;--accent-icon-light: rgb(255 255 255/0.45) !important;--accent-link: rgb(255, 255, 255) !important;--accent-link-visited: rgb(255, 255, 255) !important;--accent-keyline: rgb(255 255 255/0.5) !important;--accent-keyline-dark: rgb(255 255 255/0.8) !important}.tna-template--system-theme{--page-background: #f4f4f4;--background-tint: #d8d8d8;--font-base: #343338;--font-dark: rgb(0, 0, 0);--font-light: rgb(52 51 56/0.7);--icon-light: rgb(52 51 56/0.45);--link: #1d70ab;--link-visited: #4c2c92;--focus-outline: rgb(0, 176, 255);--keyline: rgb(38 38 42/0.25);--keyline-dark: #26262a;--button-text: rgb(255, 255, 255);--button-background: rgb(0, 0, 0);--button-hover-text: rgb(0, 0, 0);--button-hover-background: rgb(255, 255, 255);--contrast-background: #1e1e1e;--contrast-font-base: rgb(255, 255, 255);--contrast-font-dark: rgb(255, 255, 255);--contrast-font-light: rgb(255 255 255/0.7);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: rgb(255, 255, 255);--contrast-link-visited: rgb(255, 255, 255);--contrast-keyline: rgb(255 255 255/0.5);--contrast-keyline-dark: rgb(255 255 255/0.8);--contrast-button-text: rgb(0, 0, 0);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(0, 0, 0);--accent: #d9d9d6;--accent-background: #111;--accent-background-light: #d9d9d6;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}@media(prefers-color-scheme: dark){.tna-template--system-theme{--page-background: #111;--background-tint: #333;--font-base: rgb(255 255 255/0.95);--font-dark: rgb(255, 255, 255);--font-light: rgb(255 255 255/0.5);--icon-light: rgb(255 255 255/0.35);--link: rgb(0, 176, 255);--link-visited: #a8f;--focus-outline: rgb(0, 176, 255);--keyline: rgb(255 255 255/0.25);--keyline-dark: rgb(255, 255, 255);--button-text: rgb(0, 0, 0);--button-background: rgb(255, 255, 255);--button-hover-text: rgb(255, 255, 255);--button-hover-background: rgb(0, 0, 0);--contrast-background: #1e1e1e;--contrast-font-base: rgb(255, 255, 255);--contrast-font-dark: rgb(255, 255, 255);--contrast-font-light: rgb(255 255 255/0.7);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: rgb(255, 255, 255);--contrast-link-visited: rgb(255, 255, 255);--contrast-keyline: rgb(255 255 255/0.5);--contrast-keyline-dark: rgb(255 255 255/0.8);--contrast-button-text: rgb(0, 0, 0);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(0, 0, 0);--accent: #d9d9d6;--accent-background: #111;--accent-background-light: rgb(140, 150, 148);--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}}@media(prefers-contrast: more){.tna-template--system-theme{--page-background: rgb(255, 255, 255);--background-tint: #d8d8d8;--font-base: rgb(0, 0, 0);--font-dark: rgb(0, 0, 0);--font-light: rgb(0, 0, 0);--icon-light: rgb(0 0 0/0.75);--link: rgb(0, 76, 126);--link-visited: rgb(0, 0, 0);--focus-outline: rgb(253, 63, 3);--keyline: rgb(0, 0, 0);--keyline-dark: rgb(0, 0, 0);--button-text: rgb(255, 255, 255);--button-background: rgb(0, 0, 0);--button-hover-text: rgb(0, 0, 0);--button-hover-background: rgb(255, 255, 255);--contrast-background: #f4f4f4;--contrast-font-base: rgb(0, 0, 0);--contrast-font-dark: rgb(0, 0, 0);--contrast-font-light: rgb(0, 0, 0);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: rgb(0, 76, 126);--contrast-link-visited: rgb(0, 0, 0);--contrast-keyline: rgb(0, 0, 0);--contrast-keyline-dark: rgb(0, 0, 0);--contrast-button-text: rgb(255, 255, 255);--contrast-button-background: rgb(0, 0, 0);--contrast-button-hover-text: rgb(0, 0, 0);--contrast-button-hover-background: rgb(255, 255, 255);--accent: #d9d9d6;--accent-background: #111;--accent-background-light: #d9d9d6;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}.tna-template--system-theme {background-image:none !important}}@media(prefers-contrast: more)and (prefers-color-scheme: dark){.tna-template--system-theme{--page-background: rgb(0, 0, 0);--background-tint: #333;--font-base: rgb(255, 255, 255);--font-dark: rgb(255, 255, 255);--font-light: rgb(255, 255, 255);--icon-light: rgb(255 255 255/0.75);--link: rgb(255, 255, 255);--link-visited: rgb(255, 255, 255);--focus-outline: rgb(0, 176, 255);--keyline: rgb(255, 255, 255);--keyline-dark: rgb(255, 255, 255);--button-text: rgb(0, 0, 0);--button-background: rgb(255, 255, 255);--button-hover-text: rgb(255, 255, 255);--button-hover-background: rgb(0, 0, 0);--contrast-background: #111;--contrast-font-base: rgb(255, 255, 255);--contrast-font-dark: rgb(255, 255, 255);--contrast-font-light: rgb(255 255 255/0.7);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: rgb(255, 255, 255);--contrast-link-visited: rgb(255, 255, 255);--contrast-keyline: rgb(255 255 255/0.5);--contrast-keyline-dark: rgb(255 255 255/0.8);--contrast-button-text: rgb(0, 0, 0);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(0, 0, 0);--accent: #d9d9d6;--accent-background: #111;--accent-background-light: rgb(140, 150, 148);--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}}.tna-template--light-theme{--page-background: #f4f4f4;--background-tint: #d8d8d8;--font-base: #343338;--font-dark: rgb(0, 0, 0);--font-light: rgb(52 51 56/0.7);--icon-light: rgb(52 51 56/0.45);--link: #1d70ab;--link-visited: #4c2c92;--focus-outline: rgb(0, 176, 255);--keyline: rgb(38 38 42/0.25);--keyline-dark: #26262a;--button-text: rgb(255, 255, 255);--button-background: rgb(0, 0, 0);--button-hover-text: rgb(0, 0, 0);--button-hover-background: rgb(255, 255, 255);--contrast-background: #1e1e1e;--contrast-font-base: rgb(255, 255, 255);--contrast-font-dark: rgb(255, 255, 255);--contrast-font-light: rgb(255 255 255/0.7);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: rgb(255, 255, 255);--contrast-link-visited: rgb(255, 255, 255);--contrast-keyline: rgb(255 255 255/0.5);--contrast-keyline-dark: rgb(255 255 255/0.8);--contrast-button-text: rgb(0, 0, 0);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(0, 0, 0);--accent: #d9d9d6;--accent-background: #111;--accent-background-light: #d9d9d6;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}.tna-template--dark-theme{--page-background: #111;--background-tint: #333;--font-base: rgb(255 255 255/0.95);--font-dark: rgb(255, 255, 255);--font-light: rgb(255 255 255/0.5);--icon-light: rgb(255 255 255/0.35);--link: rgb(0, 176, 255);--link-visited: #a8f;--focus-outline: rgb(0, 176, 255);--keyline: rgb(255 255 255/0.25);--keyline-dark: rgb(255, 255, 255);--button-text: rgb(0, 0, 0);--button-background: rgb(255, 255, 255);--button-hover-text: rgb(255, 255, 255);--button-hover-background: rgb(0, 0, 0);--contrast-background: #1e1e1e;--contrast-font-base: rgb(255, 255, 255);--contrast-font-dark: rgb(255, 255, 255);--contrast-font-light: rgb(255 255 255/0.7);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: rgb(255, 255, 255);--contrast-link-visited: rgb(255, 255, 255);--contrast-keyline: rgb(255 255 255/0.5);--contrast-keyline-dark: rgb(255 255 255/0.8);--contrast-button-text: rgb(0, 0, 0);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(0, 0, 0);--accent: #d9d9d6;--accent-background: #111;--accent-background-light: rgb(140, 150, 148);--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}.tna-template--high-contrast-theme{--page-background: rgb(255, 255, 255);--background-tint: #d8d8d8;--font-base: rgb(0, 0, 0);--font-dark: rgb(0, 0, 0);--font-light: rgb(0, 0, 0);--icon-light: rgb(0 0 0/0.75);--link: rgb(0, 76, 126);--link-visited: rgb(0, 0, 0);--focus-outline: rgb(253, 63, 3);--keyline: rgb(0, 0, 0);--keyline-dark: rgb(0, 0, 0);--button-text: rgb(255, 255, 255);--button-background: rgb(0, 0, 0);--button-hover-text: rgb(0, 0, 0);--button-hover-background: rgb(255, 255, 255);--contrast-background: #f4f4f4;--contrast-font-base: rgb(0, 0, 0);--contrast-font-dark: rgb(0, 0, 0);--contrast-font-light: rgb(0, 0, 0);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: rgb(0, 76, 126);--contrast-link-visited: rgb(0, 0, 0);--contrast-keyline: rgb(0, 0, 0);--contrast-keyline-dark: rgb(0, 0, 0);--contrast-button-text: rgb(255, 255, 255);--contrast-button-background: rgb(0, 0, 0);--contrast-button-hover-text: rgb(0, 0, 0);--contrast-button-hover-background: rgb(255, 255, 255);--accent: #d9d9d6;--accent-background: #111;--accent-background-light: #d9d9d6;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}.tna-template--high-contrast-theme {background-image:none !important}.tna-template--high-contrast-theme.tna-template--dark-theme{--page-background: rgb(0, 0, 0);--background-tint: #333;--font-base: rgb(255, 255, 255);--font-dark: rgb(255, 255, 255);--font-light: rgb(255, 255, 255);--icon-light: rgb(255 255 255/0.75);--link: rgb(255, 255, 255);--link-visited: rgb(255, 255, 255);--focus-outline: rgb(0, 176, 255);--keyline: rgb(255, 255, 255);--keyline-dark: rgb(255, 255, 255);--button-text: rgb(0, 0, 0);--button-background: rgb(255, 255, 255);--button-hover-text: rgb(255, 255, 255);--button-hover-background: rgb(0, 0, 0);--contrast-background: #111;--contrast-font-base: rgb(255, 255, 255);--contrast-font-dark: rgb(255, 255, 255);--contrast-font-light: rgb(255 255 255/0.7);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: rgb(255, 255, 255);--contrast-link-visited: rgb(255, 255, 255);--contrast-keyline: rgb(255 255 255/0.5);--contrast-keyline-dark: rgb(255 255 255/0.8);--contrast-button-text: rgb(0, 0, 0);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(0, 0, 0);--accent: #d9d9d6;--accent-background: #111;--accent-background-light: rgb(140, 150, 148);--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}.tna-template--yellow-accent{--accent: rgb(255, 204, 0) !important;--accent-background: rgb(255, 204, 0) !important;--accent-background-light: rgb(249, 247, 226) !important;--accent-font-base: rgb(0, 0, 0) !important;--accent-font-dark: rgb(0, 0, 0) !important;--accent-font-light: rgb(0 0 0/0.7) !important;--accent-icon-light: rgb(0 0 0/0.45) !important;--accent-link: rgb(0, 0, 0) !important;--accent-link-visited: rgb(0, 0, 0) !important;--accent-keyline: rgb(0 0 0/0.5) !important;--accent-keyline-dark: rgb(0 0 0/0.8) !important;--button-accent-background: rgb(255, 204, 0) !important}.tna-template--pink-accent{--accent-font-base: rgb(255, 255, 255) !important;--accent-font-dark: rgb(255, 255, 255) !important;--accent-font-light: rgb(255 255 255/0.7) !important;--accent-icon-light: rgb(255 255 255/0.45) !important;--accent-link: rgb(255, 255, 255) !important;--accent-link-visited: rgb(255, 255, 255) !important;--accent-keyline: rgb(255 255 255/0.5) !important;--accent-keyline-dark: rgb(255 255 255/0.8) !important;--button-accent-text: rgb(255, 255, 255) !important;--accent: rgb(254, 29, 87) !important;--accent-background: rgb(156, 25, 58) !important;--accent-background-light: rgb(250, 211, 212) !important;--button-accent-background: rgb(156, 25, 58) !important}.tna-template--orange-accent{--accent-font-base: rgb(255, 255, 255) !important;--accent-font-dark: rgb(255, 255, 255) !important;--accent-font-light: rgb(255 255 255/0.7) !important;--accent-icon-light: rgb(255 255 255/0.45) !important;--accent-link: rgb(255, 255, 255) !important;--accent-link-visited: rgb(255, 255, 255) !important;--accent-keyline: rgb(255 255 255/0.5) !important;--accent-keyline-dark: rgb(255 255 255/0.8) !important;--button-accent-text: rgb(255, 255, 255) !important;--accent: rgb(253, 63, 3) !important;--accent-background: rgb(143, 52, 21) !important;--accent-background-light: rgb(249, 225, 188) !important;--button-accent-background: rgb(143, 52, 21) !important}.tna-template--green-accent{--accent-font-base: rgb(255, 255, 255) !important;--accent-font-dark: rgb(255, 255, 255) !important;--accent-font-light: rgb(255 255 255/0.7) !important;--accent-icon-light: rgb(255 255 255/0.45) !important;--accent-link: rgb(255, 255, 255) !important;--accent-link-visited: rgb(255, 255, 255) !important;--accent-keyline: rgb(255 255 255/0.5) !important;--accent-keyline-dark: rgb(255 255 255/0.8) !important;--button-accent-text: rgb(255, 255, 255) !important;--accent: rgb(134, 188, 37) !important;--accent-background: rgb(0, 98, 59) !important;--accent-background-light: rgb(221, 229, 213) !important;--button-accent-background: rgb(0, 98, 59) !important}.tna-template--blue-accent{--accent-font-base: rgb(255, 255, 255) !important;--accent-font-dark: rgb(255, 255, 255) !important;--accent-font-light: rgb(255 255 255/0.7) !important;--accent-icon-light: rgb(255 255 255/0.45) !important;--accent-link: rgb(255, 255, 255) !important;--accent-link-visited: rgb(255, 255, 255) !important;--accent-keyline: rgb(255 255 255/0.5) !important;--accent-keyline-dark: rgb(255 255 255/0.8) !important;--button-accent-text: rgb(255, 255, 255) !important;--accent: rgb(0, 176, 255) !important;--accent-background: rgb(0, 76, 126) !important;--accent-background-light: rgb(212, 229, 239) !important;--button-accent-background: rgb(0, 76, 126) !important}@media(prefers-reduced-motion){.tna-template {animation:none !important;transition:none !important}}.tna-template__body{min-height:100%;margin:0;padding:0}.tna-template__body:has(.tna-header):has(#main-content[role=main]):has(.tna-footer){display:flex;flex-direction:column}.tna-template__body:has(.tna-header):has(#main-content[role=main]):has(.tna-footer) #main-content[role=main]{flex:1}img,svg,picture,video,canvas{max-width:100%;display:block}video,canvas{width:100%}[hidden]{display:none}hr{margin:2rem 0;border-width:1px 0 0;border-color:rgb(38 38 42/0.25);border-color:var(--keyline);border-style:solid}.tna-section{padding-top:3rem;padding-bottom:3rem}@media(max-width: 48em){.tna-section{padding-top:2rem;padding-bottom:2rem}}.tna-aside{padding:2rem}@media(max-width: 48em){.tna-aside{padding:1rem}}.tna-template--high-contrast-theme .tna-aside{border:1px #26262a solid;border:1px var(--keyline-dark) solid}@media(prefers-contrast: more){.tna-template--system-theme .tna-aside{border:1px #26262a solid;border:1px var(--keyline-dark) solid}}.tna-\!--no-margin-top,.tna-\!--no-margin-vertical{margin-top:0 !important}.tna-\!--no-margin-bottom,.tna-\!--no-margin-vertical{margin-bottom:0 !important}.tna-\!--no-padding-top,.tna-\!--no-padding-vertical{padding-top:0 !important}.tna-\!--no-padding-bottom,.tna-\!--no-padding-vertical{padding-bottom:0 !important}.tna-\!--margin-top-xs,.tna-\!--margin-vertical-xs{margin-top:0.5rem !important}.tna-\!--margin-top-s,.tna-\!--margin-vertical-s{margin-top:1rem !important}.tna-\!--margin-top-m,.tna-\!--margin-vertical-m{margin-top:2rem !important}.tna-\!--margin-top-l,.tna-\!--margin-vertical-l{margin-top:3rem !important}.tna-\!--margin-top-xl,.tna-\!--margin-vertical-xl{margin-top:5rem !important}.tna-\!--margin-top-xxl,.tna-\!--margin-vertical-xxl{margin-top:8rem !important}.tna-\!--margin-bottom-xs,.tna-\!--margin-vertical-xs{margin-bottom:0.5rem !important}.tna-\!--margin-bottom-s,.tna-\!--margin-vertical-s{margin-bottom:1rem !important}.tna-\!--margin-bottom-m,.tna-\!--margin-vertical-m{margin-bottom:2rem !important}.tna-\!--margin-bottom-l,.tna-\!--margin-vertical-l{margin-bottom:3rem !important}.tna-\!--margin-bottom-xl,.tna-\!--margin-vertical-xl{margin-bottom:5rem !important}.tna-\!--margin-bottom-xxl,.tna-\!--margin-vertical-xxl{margin-bottom:8rem !important}.tna-\!--padding-top-xs,.tna-\!--padding-vertical-xs{padding-top:0.5rem !important}.tna-\!--padding-top-s,.tna-\!--padding-vertical-s{padding-top:1rem !important}.tna-\!--padding-top-m,.tna-\!--padding-vertical-m{padding-top:2rem !important}.tna-\!--padding-top-l,.tna-\!--padding-vertical-l{padding-top:3rem !important}.tna-\!--padding-top-xl,.tna-\!--padding-vertical-xl{padding-top:5rem !important}.tna-\!--padding-top-xxl,.tna-\!--padding-vertical-xxl{padding-top:8rem !important}.tna-\!--padding-bottom-xs,.tna-\!--padding-vertical-xs{padding-bottom:0.5rem !important}.tna-\!--padding-bottom-s,.tna-\!--padding-vertical-s{padding-bottom:1rem !important}.tna-\!--padding-bottom-m,.tna-\!--padding-vertical-m{padding-bottom:2rem !important}.tna-\!--padding-bottom-l,.tna-\!--padding-vertical-l{padding-bottom:3rem !important}.tna-\!--padding-bottom-xl,.tna-\!--padding-vertical-xl{padding-bottom:5rem !important}.tna-\!--padding-bottom-xxl,.tna-\!--padding-vertical-xxl{padding-bottom:8rem !important}@media(min-width: 48.0625em)and (max-width: 64em){.tna-\!--no-margin-top-medium,.tna-\!--no-margin-vertical-medium{margin-top:0 !important}.tna-\!--no-margin-bottom-medium,.tna-\!--no-margin-vertical-medium{margin-bottom:0 !important}.tna-\!--no-padding-top-medium,.tna-\!--no-padding-vertical-medium{padding-top:0 !important}.tna-\!--no-padding-bottom-medium,.tna-\!--no-padding-vertical-medium{padding-bottom:0 !important}.tna-\!--margin-top-xs-medium,.tna-\!--margin-vertical-xs-medium{margin-top:0.5rem !important}.tna-\!--margin-top-s-medium,.tna-\!--margin-vertical-s-medium{margin-top:1rem !important}.tna-\!--margin-top-m-medium,.tna-\!--margin-vertical-m-medium{margin-top:2rem !important}.tna-\!--margin-top-l-medium,.tna-\!--margin-vertical-l-medium{margin-top:3rem !important}.tna-\!--margin-top-xl-medium,.tna-\!--margin-vertical-xl-medium{margin-top:5rem !important}.tna-\!--margin-top-xxl-medium,.tna-\!--margin-vertical-xxl-medium{margin-top:8rem !important}.tna-\!--margin-bottom-xs-medium,.tna-\!--margin-vertical-xs-medium{margin-bottom:0.5rem !important}.tna-\!--margin-bottom-s-medium,.tna-\!--margin-vertical-s-medium{margin-bottom:1rem !important}.tna-\!--margin-bottom-m-medium,.tna-\!--margin-vertical-m-medium{margin-bottom:2rem !important}.tna-\!--margin-bottom-l-medium,.tna-\!--margin-vertical-l-medium{margin-bottom:3rem !important}.tna-\!--margin-bottom-xl-medium,.tna-\!--margin-vertical-xl-medium{margin-bottom:5rem !important}.tna-\!--margin-bottom-xxl-medium,.tna-\!--margin-vertical-xxl-medium{margin-bottom:8rem !important}.tna-\!--padding-top-xs-medium,.tna-\!--padding-vertical-xs-medium{padding-top:0.5rem !important}.tna-\!--padding-top-s-medium,.tna-\!--padding-vertical-s-medium{padding-top:1rem !important}.tna-\!--padding-top-m-medium,.tna-\!--padding-vertical-m-medium{padding-top:2rem !important}.tna-\!--padding-top-l-medium,.tna-\!--padding-vertical-l-medium{padding-top:3rem !important}.tna-\!--padding-top-xl-medium,.tna-\!--padding-vertical-xl-medium{padding-top:5rem !important}.tna-\!--padding-top-xxl-medium,.tna-\!--padding-vertical-xxl-medium{padding-top:8rem !important}.tna-\!--padding-bottom-xs-medium,.tna-\!--padding-vertical-xs-medium{padding-bottom:0.5rem !important}.tna-\!--padding-bottom-s-medium,.tna-\!--padding-vertical-s-medium{padding-bottom:1rem !important}.tna-\!--padding-bottom-m-medium,.tna-\!--padding-vertical-m-medium{padding-bottom:2rem !important}.tna-\!--padding-bottom-l-medium,.tna-\!--padding-vertical-l-medium{padding-bottom:3rem !important}.tna-\!--padding-bottom-xl-medium,.tna-\!--padding-vertical-xl-medium{padding-bottom:5rem !important}.tna-\!--padding-bottom-xxl-medium,.tna-\!--padding-vertical-xxl-medium{padding-bottom:8rem !important}}@media(min-width: 30.0625em)and (max-width: 48em){.tna-\!--no-margin-top-small,.tna-\!--no-margin-vertical-small{margin-top:0 !important}.tna-\!--no-margin-bottom-small,.tna-\!--no-margin-vertical-small{margin-bottom:0 !important}.tna-\!--no-padding-top-small,.tna-\!--no-padding-vertical-small{padding-top:0 !important}.tna-\!--no-padding-bottom-small,.tna-\!--no-padding-vertical-small{padding-bottom:0 !important}.tna-\!--margin-top-xs-small,.tna-\!--margin-vertical-xs-small{margin-top:0.5rem !important}.tna-\!--margin-top-s-small,.tna-\!--margin-vertical-s-small{margin-top:0.75rem !important}.tna-\!--margin-top-m-small,.tna-\!--margin-vertical-m-small{margin-top:1.5rem !important}.tna-\!--margin-top-l-small,.tna-\!--margin-vertical-l-small{margin-top:2rem !important}.tna-\!--margin-top-xl-small,.tna-\!--margin-vertical-xl-small{margin-top:3rem !important}.tna-\!--margin-top-xxl-small,.tna-\!--margin-vertical-xxl-small{margin-top:5rem !important}.tna-\!--margin-bottom-xs-small,.tna-\!--margin-vertical-xs-small{margin-bottom:0.5rem !important}.tna-\!--margin-bottom-s-small,.tna-\!--margin-vertical-s-small{margin-bottom:0.75rem !important}.tna-\!--margin-bottom-m-small,.tna-\!--margin-vertical-m-small{margin-bottom:1.5rem !important}.tna-\!--margin-bottom-l-small,.tna-\!--margin-vertical-l-small{margin-bottom:2rem !important}.tna-\!--margin-bottom-xl-small,.tna-\!--margin-vertical-xl-small{margin-bottom:3rem !important}.tna-\!--margin-bottom-xxl-small,.tna-\!--margin-vertical-xxl-small{margin-bottom:5rem !important}.tna-\!--padding-top-xs-small,.tna-\!--padding-vertical-xs-small{padding-top:0.5rem !important}.tna-\!--padding-top-s-small,.tna-\!--padding-vertical-s-small{padding-top:0.75rem !important}.tna-\!--padding-top-m-small,.tna-\!--padding-vertical-m-small{padding-top:1.5rem !important}.tna-\!--padding-top-l-small,.tna-\!--padding-vertical-l-small{padding-top:2rem !important}.tna-\!--padding-top-xl-small,.tna-\!--padding-vertical-xl-small{padding-top:3rem !important}.tna-\!--padding-top-xxl-small,.tna-\!--padding-vertical-xxl-small{padding-top:5rem !important}.tna-\!--padding-bottom-xs-small,.tna-\!--padding-vertical-xs-small{padding-bottom:0.5rem !important}.tna-\!--padding-bottom-s-small,.tna-\!--padding-vertical-s-small{padding-bottom:0.75rem !important}.tna-\!--padding-bottom-m-small,.tna-\!--padding-vertical-m-small{padding-bottom:1.5rem !important}.tna-\!--padding-bottom-l-small,.tna-\!--padding-vertical-l-small{padding-bottom:2rem !important}.tna-\!--padding-bottom-xl-small,.tna-\!--padding-vertical-xl-small{padding-bottom:3rem !important}.tna-\!--padding-bottom-xxl-small,.tna-\!--padding-vertical-xxl-small{padding-bottom:5rem !important}}@media(max-width: 30em){.tna-\!--no-margin-top-tiny,.tna-\!--no-margin-vertical-tiny{margin-top:0 !important}.tna-\!--no-margin-bottom-tiny,.tna-\!--no-margin-vertical-tiny{margin-bottom:0 !important}.tna-\!--no-padding-top-tiny,.tna-\!--no-padding-vertical-tiny{padding-top:0 !important}.tna-\!--no-padding-bottom-tiny,.tna-\!--no-padding-vertical-tiny{padding-bottom:0 !important}.tna-\!--margin-top-xs-tiny,.tna-\!--margin-vertical-xs-tiny{margin-top:0.5rem !important}.tna-\!--margin-top-s-tiny,.tna-\!--margin-vertical-s-tiny{margin-top:0.75rem !important}.tna-\!--margin-top-m-tiny,.tna-\!--margin-vertical-m-tiny{margin-top:1.5rem !important}.tna-\!--margin-top-l-tiny,.tna-\!--margin-vertical-l-tiny{margin-top:2rem !important}.tna-\!--margin-top-xl-tiny,.tna-\!--margin-vertical-xl-tiny{margin-top:3rem !important}.tna-\!--margin-top-xxl-tiny,.tna-\!--margin-vertical-xxl-tiny{margin-top:5rem !important}.tna-\!--margin-bottom-xs-tiny,.tna-\!--margin-vertical-xs-tiny{margin-bottom:0.5rem !important}.tna-\!--margin-bottom-s-tiny,.tna-\!--margin-vertical-s-tiny{margin-bottom:0.75rem !important}.tna-\!--margin-bottom-m-tiny,.tna-\!--margin-vertical-m-tiny{margin-bottom:1.5rem !important}.tna-\!--margin-bottom-l-tiny,.tna-\!--margin-vertical-l-tiny{margin-bottom:2rem !important}.tna-\!--margin-bottom-xl-tiny,.tna-\!--margin-vertical-xl-tiny{margin-bottom:3rem !important}.tna-\!--margin-bottom-xxl-tiny,.tna-\!--margin-vertical-xxl-tiny{margin-bottom:5rem !important}.tna-\!--padding-top-xs-tiny,.tna-\!--padding-vertical-xs-tiny{padding-top:0.5rem !important}.tna-\!--padding-top-s-tiny,.tna-\!--padding-vertical-s-tiny{padding-top:0.75rem !important}.tna-\!--padding-top-m-tiny,.tna-\!--padding-vertical-m-tiny{padding-top:1.5rem !important}.tna-\!--padding-top-l-tiny,.tna-\!--padding-vertical-l-tiny{padding-top:2rem !important}.tna-\!--padding-top-xl-tiny,.tna-\!--padding-vertical-xl-tiny{padding-top:3rem !important}.tna-\!--padding-top-xxl-tiny,.tna-\!--padding-vertical-xxl-tiny{padding-top:5rem !important}.tna-\!--padding-bottom-xs-tiny,.tna-\!--padding-vertical-xs-tiny{padding-bottom:0.5rem !important}.tna-\!--padding-bottom-s-tiny,.tna-\!--padding-vertical-s-tiny{padding-bottom:0.75rem !important}.tna-\!--padding-bottom-m-tiny,.tna-\!--padding-vertical-m-tiny{padding-bottom:1.5rem !important}.tna-\!--padding-bottom-l-tiny,.tna-\!--padding-vertical-l-tiny{padding-bottom:2rem !important}.tna-\!--padding-bottom-xl-tiny,.tna-\!--padding-vertical-xl-tiny{padding-bottom:3rem !important}.tna-\!--padding-bottom-xxl-tiny,.tna-\!--padding-vertical-xxl-tiny{padding-bottom:5rem !important}}@font-face{font-family:"Open Sans";src:url("./assets/fonts/OpenSans-Medium.ttf");font-weight:normal;font-style:normal}@font-face{font-family:"Open Sans";src:url("./assets/fonts/OpenSans-Bold.ttf");font-weight:bold;font-style:normal}@font-face{font-family:"Roboto Mono";src:url("./assets/fonts/RobotoMono-Regular.ttf");font-weight:normal;font-style:normal}.tna-template{color:#343338;color:var(--font-base);font-family:"Open Sans",sans-serif;font-weight:normal;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-webkit-text-size-adjust:none;direction:ltr}.tna-template__body{color:inherit;font-size:1.125rem;line-height:1.7777777778}@media(max-width: 48em){.tna-template__body{font-size:1.0625rem}}h1,h2,h3,h4,h5,h6,ul,ol{margin-top:0}h1,h2,h3,h4,h5,h6,strong{font-weight:bold}p{margin:0 0 1rem}@media(max-width: 30em){p{margin-bottom:1rem}}p:last-child{margin-bottom:0}a{color:#1d70ab;color:var(--link);text-decoration-thickness:1.5px}a:visited{color:#4c2c92;color:var(--link-visited)}a:hover,a:active{text-decoration:underline;text-decoration-thickness:3.5px}a.tna-chip{text-decoration:none}a.tna-chip,a.tna-chip:link,a.tna-chip:visited{color:#000;color:var(--font-dark)}a.tna-chip:hover{text-decoration:underline;text-decoration-thickness:3.5px}small{font-size:0.95625rem}.tna-ul,.tna-ol{margin-top:0;margin-right:0;margin-left:0;padding:0 0 0 2rem}.tna-ul li::marker,.tna-ol li::marker{color:#111;color:var(--accent-background);font-weight:700}.tna-ul--plain,.tna-ol--plain{padding-left:0;list-style:none}.tna-dl{display:flex;flex-wrap:wrap}.tna-dl dt,.tna-dl dd{margin:0;padding:.5rem 1rem;position:relative;box-sizing:border-box;word-wrap:break-word}.tna-dl--plain dt{padding-left:0}.tna-dl--plain dd{padding-right:0}.tna-dl dt{width:25%;font-weight:bold}.tna-dl dd{width:75%}.tna-dl dd+dd{margin-left:25%}.tna-dl--icon-padding dt{padding-left:3rem !important;position:relative}.tna-dl--icon-padding dt .fa-solid{overflow:visible;position:absolute;top:50%;left:1rem;color:rgb(52 51 56/0.45);color:var(--icon-light);text-align:left;transform:translateY(-50%)}.tna-dl--icon-padding.tna-dl--plain dt{padding-left:2rem !important}.tna-dl--icon-padding.tna-dl--plain dt .fa-solid{left:0}.tna-dl:not(.tna-dl--plain) dt:first-child,.tna-dl:not(.tna-dl--plain) dd:nth-of-type(2n)+dt,.tna-dl:not(.tna-dl--plain) dd:nth-of-type(2n + 1){background-color:#d8d8d8;background-color:var(--background-tint)}@media(min-width: 30.0625em)and (max-width: 48em){.tna-dl dt{width:35%}.tna-dl dd{width:65%}.tna-dl dd+dd{margin-left:35%}}@media(max-width: 30em){.tna-dl dt,.tna-dl dd{width:100%;margin-left:0}.tna-dl dd{padding-left:1rem}.tna-dl--plain dt{padding-bottom:0}.tna-dl--plain dd{padding-top:0}.tna-dl:not(.tna-dl--plain) dt{background-color:#d8d8d8;background-color:var(--background-tint)}.tna-dl:not(.tna-dl--plain) dd{background:rgba(0,0,0,0) !important}}.tna-template--high-contrast-theme .tna-dl{border-bottom:1px #26262a solid;border-bottom:1px var(--keyline-dark) solid}.tna-template--high-contrast-theme .tna-dl dt,.tna-template--high-contrast-theme .tna-dl dd{background:rgba(0,0,0,0) !important;border-top:1px #26262a solid;border-top:1px var(--keyline-dark) solid}@media(prefers-contrast: more){.tna-template--system-theme .tna-dl{border-bottom:1px #26262a solid;border-bottom:1px var(--keyline-dark) solid}.tna-template--system-theme .tna-dl dt,.tna-template--system-theme .tna-dl dd{background:rgba(0,0,0,0) !important;border-top:1px #26262a solid;border-top:1px var(--keyline-dark) solid}}.tna-hgroup__supertitle,.tna-chip{max-width:max-content;padding:.125em .25rem;display:block;color:#000;color:var(--font-dark);font-family:"Roboto Mono",monospace;font-weight:normal;font-size:0.875rem;text-transform:uppercase;line-height:1.1428571429;line-height:1;border:.125rem #111 solid;border:.125rem var(--accent-background) solid}.tna-chip-list{padding-left:0;display:flex;flex-wrap:wrap;gap:1rem;list-style:none}.tna-hgroup__title,.tna-heading{color:#000;color:var(--font-dark);text-wrap:balance}.tna-hgroup__title:not(.tna-heading--no-link-arrow) a,.tna-heading:not(.tna-heading--no-link-arrow) a{display:inline-block}.tna-hgroup__title:not(.tna-heading--no-link-arrow) a::after,.tna-heading:not(.tna-heading--no-link-arrow) a::after{padding-left:.25rem;display:inline-block;font-weight:700;content:"›"}.tna-hgroup__title:not(.tna-heading--no-link-arrow) a:hover::after,.tna-heading:not(.tna-heading--no-link-arrow) a:hover::after{padding-left:.5rem}.tna-hgroup--xl .tna-hgroup__title,.tna-heading--xl{font-family:supria-sans-condensed,"Arial Narrow",sans-serif;font-weight:400;font-size:4rem;line-height:1.2}@media(min-width: 48.0625em)and (max-width: 64em){.tna-hgroup--xl .tna-hgroup__title,.tna-heading--xl{font-size:2.625rem}}@media(max-width: 48em){.tna-hgroup--xl .tna-hgroup__title,.tna-heading--xl{font-size:2.25rem}}.tna-hgroup--l .tna-hgroup__title,.tna-heading--l{font-family:supria-sans-condensed,"Arial Narrow",sans-serif;font-weight:400;font-size:2rem;line-height:1.3}@media(min-width: 48.0625em)and (max-width: 64em){.tna-hgroup--l .tna-hgroup__title,.tna-heading--l{font-size:1.625rem}}@media(max-width: 48em){.tna-hgroup--l .tna-hgroup__title,.tna-heading--l{font-size:1.5rem}}.tna-hgroup--m .tna-hgroup__title,.tna-heading--m{font-weight:bold;font-size:1.375rem;line-height:1.6}.tna-hgroup--s .tna-hgroup__title,.tna-heading--s{font-weight:bold;font-size:1.125rem;line-height:1.6}.tna-hgroup__supertitle{margin:0 0 .25rem}.tna-hgroup__title{margin:0;display:block}.tna-heading,.tna-hgroup{margin-top:3rem;margin-bottom:1rem}.tna-heading:first-child,.tna-hgroup:first-child{margin-top:0}.tna-heading:last-child,.tna-hgroup:last-child{margin-bottom:0}.tna-blockquote{margin-top:0;margin-right:0;margin-left:0;padding:1rem 1rem 1rem 2rem;border-left:.35rem #111 solid;border-left:.35rem var(--accent-background) solid}.tna-blockquote__quote{font-weight:700}.tna-blockquote__author{font-style:italic}.tna-blockquote .tna-blockquote__author{margin:1rem 0 0}.tna-blockquote__author::before{content:"—" " "}.tna-scene-setter{font-family:"Roboto Mono",monospace;font-weight:normal;color:#000;color:var(--font-dark);font-size:1.875rem;line-height:1.6666666667}@media(max-width: 48em){.tna-scene-setter{font-size:1.5rem;line-height:2}}.tna-scene-setter a{color:inherit;text-decoration-thickness:2px}.tna-scene-setter a:hover{text-decoration-thickness:4.5px}.tna-columns{column-gap:2rem}.tna-columns--2{column-count:2}.tna-columns--3{column-count:3}@media(max-width: 30em){.tna-columns{column-gap:1rem}}@media(min-width: 30.0625em)and (max-width: 48em){.tna-columns--1-small{column-count:1}.tna-columns--2-small{column-count:2}.tna-columns--3-small{column-count:3}.tna-columns--4-small{column-count:4}}@media(max-width: 30em){.tna-columns--1-tiny{column-count:1}.tna-columns--2-tiny{column-count:2}.tna-columns--3-tiny{column-count:3}.tna-columns--4-tiny{column-count:4}}.tna-columns__block{break-inside:avoid}.tna-columns:has(.tna-columns__block:only-of-type){column-count:1}.tna-skip-link{width:1px !important;height:1px !important;margin:0 !important;padding:0 !important;display:block !important;position:absolute !important;left:-100vw;overflow:hidden !important;white-space:nowrap !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important}.tna-skip-link,.tna-skip-link:link,.tna-skip-link:visited{color:#fff !important;color:var(--button-text) !important}.tna-skip-link:focus{background-color:#000 !important;background-color:var(--button-background) !important;border:.3125rem #00b0ff solid !important;border:.3125rem var(--focus-outline) solid !important;outline:none !important}.tna-skip-link:active,.tna-skip-link:focus{width:auto !important;height:auto !important;margin:inherit !important;padding:1rem !important;position:static !important;overflow:visible !important;white-space:inherit !important;clip:auto !important;-webkit-clip-path:none !important;clip-path:none !important}.tna-skip-link:active:hover,.tna-skip-link:focus:hover{color:#000 !important;color:var(--button-hover-text) !important;background-color:#fff !important;background-color:var(--button-hover-background) !important}/# sourceMappingURL=skip-link.css.map /

package/nationalarchives/components/skip-link/skip-link.css.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/utilities/_typography.scss","../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/utilities/_a11y.scss","../../../../src/nationalarchives/tools/_spacing.scss","../../../../src/nationalarchives/utilities/_global.scss","../../../../src/nationalarchives/tools/_media.scss","../../../../src/nationalarchives/utilities/_overrides.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss","../../../../src/nationalarchives/variables/_grid.scss","../../../../src/nationalarchives/components/skip-link/skip-link.scss"],"names":[],"mappings":"CAQQ,6CC+JR,0BACE,uCACA,uCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEAhFA,yBAEA,4CAPA,4BACA,uBAuHF,0DACE,qCACA,qCACA,uCACA,2BACA,2CACA,iCACA,2CA1HA,sBAEA,0CAPA,4BACA,uBAiJF,8BA7IE,yBAEA,gDA8IA,qBACA,kBACA,oCACA,aACA,wBACA,gBACA,wBACA,oBACA,0BAIA,0BAIA,gCClQF,qBACE,qBACA,sBACA,oBACA,qBAEA,6BACA,uBACA,wBACA,sBAEA,2BAEA,iCAEA,oBAEA,0CAEA,yDAEE,YClBJ,4EACE,mBAEA,8IACE,gBCDJ,MHKI,olCGDJ,cACE,gBACA,WACA,YAEA,kBACA,gBACA,iCAEA,eH+EA,yBAEA,wCG7EA,2BHwBE,oCACA,oCACA,yDACA,+BACA,uCACA,sDACA,2DG5BF,4BHdE,olCGiBA,mCAHF,4BHRE,snCGeA,+BAPF,4BHFE,8/BGYE,8BACE,kCAIJ,+DAfF,4BHIE,kjCGgBF,2BHlCE,olCGsCF,0BHhCE,qnCGoCF,mCH9BE,8/BGiCA,qCACE,iCAGF,4DH/BA,ijCG0CF,6BHpCE,0BACA,qCACA,8CACA,oCACA,oCACA,mDACA,+BACA,uCACA,gDACA,qDACA,4CG8BF,2BH5BE,oCACA,oCACA,yDACA,+BACA,uCACA,sDACA,2DASE,sCAEE,6BACA,wCACA,8CACA,+CGYN,6BHhCE,oCACA,oCACA,yDACA,+BACA,uCACA,sDACA,2DASE,sCAOE,6BACA,wCACA,8CACA,+CGWN,4BHpCE,oCACA,oCACA,yDACA,+BACA,uCACA,sDACA,2DASE,sCAYE,6BACA,wCACA,8CACA,+CGUN,2BHxCE,oCACA,oCACA,yDACA,+BACA,uCACA,sDACA,2DASE,sCAiBE,6BACA,wCACA,8CACA,+CGSN,+BACE,gBACE,0BACA,4BAKN,oBACE,gBACA,SACA,UAEA,cAEA,oFACE,aACA,sBAEA,6GACE,OAKN,6BAKE,eAEA,cAGF,aAEE,WAGF,SACE,aAGF,QAEE,uBHSA,sBAEA,mCGTA,uBAGF,GACE,cAEA,qBHPI,kBAEA,4BGOJ,mBAOF,aACE,iBACA,oBCjGA,wBD+FF,aAKI,iBACA,qBAIJ,WACE,aC1GA,wBDyGF,WAMI,cHmGF,8CAzII,yBAIA,qCA0IF,+BADF,uCA7II,yBAIA,sCK9HA,mDAEE,wBAFF,sDAEE,2BAFF,qDAEE,yBAFF,wDAEE,4BAcA,mDAEE,6BAFF,iDAEE,2BAFF,iDAEE,2BAFF,iDAEE,2BAFF,mDAEE,2BAFF,qDAEE,2BAFF,sDAEE,gCAFF,oDAEE,8BAFF,oDAEE,8BAFF,oDAEE,8BAFF,sDAEE,8BAFF,wDAEE,8BAFF,qDAEE,8BAFF,mDAEE,4BAFF,mDAEE,4BAFF,mDAEE,4BAFF,qDAEE,4BAFF,uDAEE,4BAFF,wDAEE,iCAFF,sDAEE,+BAFF,sDAEE,+BAFF,sDAEE,+BAFF,wDAEE,+BAFF,0DAEE,+BDLR,kDCbI,iEAEE,wBAFF,oEAEE,2BAFF,mEAEE,yBAFF,sEAEE,4BAcA,iEAEE,6BAFF,+DAEE,2BAFF,+DAEE,2BAFF,+DAEE,2BAFF,iEAEE,2BAFF,mEAEE,2BAFF,oEAEE,gCAFF,kEAEE,8BAFF,kEAEE,8BAFF,kEAEE,8BAFF,oEAEE,8BAFF,sEAEE,8BAFF,mEAEE,8BAFF,iEAEE,4BAFF,iEAEE,4BAFF,iEAEE,4BAFF,mEAEE,4BAFF,qEAEE,4BAFF,sEAEE,iCAFF,oEAEE,+BAFF,oEAEE,+BAFF,oEAEE,+BAFF,sEAEE,+BAFF,wEAEE,gCDCR,kDCnBI,+DAEE,wBAFF,kEAEE,2BAFF,iEAEE,yBAFF,oEAEE,4BAcA,+DAEE,6BAFF,6DAEE,8BAFF,6DAEE,6BAFF,6DAEE,2BAFF,+DAEE,2BAFF,iEAEE,2BAFF,kEAEE,gCAFF,gEAEE,iCAFF,gEAEE,gCAFF,gEAEE,8BAFF,kEAEE,8BAFF,oEAEE,8BAFF,iEAEE,8BAFF,+DAEE,+BAFF,+DAEE,8BAFF,+DAEE,4BAFF,iEAEE,4BAFF,mEAEE,4BAFF,oEAEE,iCAFF,kEAEE,kCAFF,kEAEE,iCAFF,kEAEE,+BAFF,oEAEE,+BAFF,sEAEE,gCDOR,wBCzBI,6DAEE,wBAFF,gEAEE,2BAFF,+DAEE,yBAFF,kEAEE,4BAcA,6DAEE,6BAFF,2DAEE,8BAFF,2DAEE,6BAFF,2DAEE,2BAFF,6DAEE,2BAFF,+DAEE,2BAFF,gEAEE,gCAFF,8DAEE,iCAFF,8DAEE,gCAFF,8DAEE,8BAFF,gEAEE,8BAFF,kEAEE,8BAFF,+DAEE,8BAFF,6DAEE,+BAFF,6DAEE,8BAFF,6DAEE,4BAFF,+DAEE,4BAFF,iEAEE,4BAFF,kEAEE,iCAFF,gEAEE,kCAFF,gEAEE,iCAFF,gEAEE,+BAFF,kEAEE,+BAFF,oEAEE,gCNlBV,WACE,wBACA,4CACA,mBACA,kBAGF,WACE,wBACA,0CACA,iBACA,kBAGF,WACE,0BACA,+CACA,mBACA,kBAGF,cC8DE,cACA,uBMzEA,YCjBiB,kBDSjB,YCPiB,OR4BjB,kCACA,mCACA,kCACA,8BACA,cAGF,oBACE,cOtCA,mBPyCA,yBAGF,wBAQE,aAGF,yBO1CE,YCTsB,KR6DxB,EACE,kBKnCA,wBLkCF,EAII,oBAGF,aACE,gBAIJ,ECYE,cACA,kBDXA,gCAEA,UCQA,cACA,0BDLA,iBOjFA,0BACA,0BCPsC,MR4FtC,WACE,qBAEA,8CCJF,WACA,uBDSE,iBO/FF,0BACA,0BCPsC,MR2GxC,gBAEE,aACA,eACA,cACA,mBAIA,sCCzBA,WACA,+BD0BE,gBAGF,8BACE,eAEA,gBAIJ,kCACE,sBACA,qBAEA,cCzCA,WACA,uBM/DA,YClBmB,wBDmBnB,YCjBmB,ODXnB,mBAkCA,yBACA,yBPmGA,cASF,eACE,eAEA,aACA,eACA,SAEA,gBAQF,gCCrEE,WACA,uBMpEA,YChBoB,gDDiBpB,YChBoB,IR2JpB,oCACE,qBAEA,kDACE,oBAEA,qBAEA,gBAEA,YAIA,8DACE,mBAMR,oDOvLE,ePyLA,gBKtKA,kDLoKF,oDOvLE,oBFuDA,wBLgIF,oDOvLE,mBPqMF,kDOrME,ePuMA,gBKpLA,kDLkLF,kDOrME,mBFuDA,wBL8IF,kDOrME,kBPmNF,kDOnNE,kBPqNA,gBAGF,kDOxNE,mBP0NA,gBAwBA,wBACE,iBAKF,mBACE,SAEA,cAsBJ,yBAEE,gBACA,mBAEA,iDACE,aAGF,+CACE,gBAIJ,gBACE,aACA,eACA,cACA,4BCtLI,8BAIA,kDDwLJ,uBACE,gBAGF,wBACE,kBAEA,wCACE,gBAGF,gCACE,gBAKN,kBO/RE,YClBmB,wBDmBnB,YCjBmB,OP8EnB,WACA,uBM1FA,mBP8TA,yBKvQA,wBLmQF,kBO1TE,iBPoUE,eAGF,oBACE,cACA,8BAEA,0BACE,gCAKN,aACE,WSpVa,KTsVb,gBACE,eAGF,gBACE,eKlSF,wBL0RF,aAYI,WS9VkB,QJ0BpB,kDLyUI,sBACE,aAFS,EACX,sBACE,aAFS,EACX,sBACE,aAFS,EACX,sBACE,aAFS,GKlUf,wBL2UI,qBACE,aAFS,EACX,qBACE,aAFS,EACX,qBACE,aAFS,EACX,qBACE,aAFS,GAOf,oBACE,mBAGF,mDACE,eUtXJ,eACE,qBACA,sBACA,oBACA,wBAEA,yBAEA,6BAEA,2BAEA,8BAEA,8BACA,wCACA,gCAEA,0DTwEA,sBACA,oCSnEA,2CAEE,sBACA,uBACA,0BAEA,2BAEA,4BAEA,+BAEA,qBACA,kCACA,0BAGF,qBTsDA,iCAEA,qDAgCI,yCAIA,sDSvFF,wBAGF,qBTyCA,sBACA,0CAIA,iCAEA","file":"skip-link.css","sourcesContent":["@use \"sass:math\";\n@use \"../tools/colour\";\n@use \"../tools/media\";\n@use \"../tools/spacing\";\n@use \"../tools/typography\";\n@use \"../variables/assets\";\n@use \"../variables/grid\";\n\n@import \"https://use.typekit.net/hkj3kuz.css\";\n\n@font-face {\n font-family: \"Open Sans\";\n src: url(\"#{assets.$tna-font-path}/OpenSans-Medium.ttf\");\n font-weight: normal;\n font-style: normal;\n}\n\n@font-face {\n font-family: \"Open Sans\";\n src: url(\"#{assets.$tna-font-path}/OpenSans-Bold.ttf\");\n font-weight: bold;\n font-style: normal;\n}\n\n@font-face {\n font-family: \"Roboto Mono\";\n src: url(\"#{assets.$tna-font-path}/RobotoMono-Regular.ttf\");\n font-weight: normal;\n font-style: normal;\n}\n\n.tna-template {\n @include colour.colour-font(\"font-base\");\n @include typography.main-font;\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n text-rendering: optimizeLegibility;\n -webkit-text-size-adjust: none;\n direction: ltr;\n}\n\n.tna-template__body {\n color: inherit;\n @include typography.relative-font-size(18);\n // line-height: 1.6;\n line-height: #{math.div(16, 18) * 2};\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nul,\nol {\n margin-top: 0;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nstrong {\n @include typography.main-font-weight-bold;\n}\n\np {\n margin: 0 0 1.5rem;\n\n @include media.on-tiny {\n margin-bottom: 1rem;\n }\n\n &:last-child {\n margin-bottom: 0;\n }\n}\n\na {\n @include colour.colour-font(\"link\");\n text-decoration-thickness: 1.5px;\n\n &:visited {\n @include colour.colour-font(\"link-visited\");\n }\n\n &:hover,\n &:active {\n @include typography.interacted-text-decoration;\n }\n\n &.tna-chip {\n text-decoration: none;\n\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"font-dark\");\n }\n\n &:hover {\n @include typography.interacted-text-decoration;\n }\n }\n}\n\n.tna-ul,\n.tna-ol {\n margin-top: 0;\n margin-right: 0;\n margin-left: 0;\n padding: 0 0 0 2rem;\n\n @include spacing.space-below;\n\n li::marker {\n @include colour.colour-font(\"accent-background\");\n font-weight: 700;\n }\n\n &--plain {\n padding-left: 0;\n\n list-style: none;\n }\n}\n\n%chip {\n max-width: max-content;\n padding: 0.375em 0.5rem;\n\n display: block;\n\n @include colour.colour-font(\"font-dark\");\n @include typography.detail-font-small;\n line-height: 1;\n\n @include colour.accent;\n}\n\n.tna-chip {\n @extend %chip;\n}\n\n.tna-chip-list {\n padding-left: 0;\n\n display: flex;\n flex-wrap: wrap;\n gap: 1rem;\n\n list-style: none;\n\n @include spacing.space-below;\n\n &__item {\n }\n}\n\n%heading {\n @include colour.colour-font(\"font-dark\");\n @include typography.heading-font;\n\n a {\n display: inline-block;\n\n &::after {\n padding-left: 0.25rem;\n\n display: inline-block;\n\n font-weight: 700;\n\n content: \"\\203A\";\n }\n\n &:hover {\n &::after {\n padding-left: 0.5rem;\n }\n }\n }\n}\n\n%heading-xl {\n @include typography.relative-font-size(64);\n line-height: 1.2;\n\n @include media.on-medium {\n // @include typography.relative-font-size(42);\n @include typography.relative-font-size(50);\n }\n\n @include media.on-mobile {\n @include typography.relative-font-size(36);\n }\n}\n\n%heading-l {\n @include typography.relative-font-size(32);\n line-height: 1.4;\n\n @include media.on-medium {\n // @include typography.relative-font-size(26);\n @include typography.relative-font-size(28);\n }\n\n @include media.on-mobile {\n @include typography.relative-font-size(24);\n }\n}\n\n%heading-m {\n @include typography.relative-font-size(20);\n line-height: 1.6;\n}\n\n%heading-s {\n @include typography.relative-font-size(18);\n line-height: 1.6;\n}\n\n.tna-heading {\n @extend %heading;\n\n &--xl {\n @extend %heading-xl;\n }\n\n &--l {\n @extend %heading-l;\n }\n\n &--m {\n @extend %heading-m;\n }\n\n &--s {\n @extend %heading-s;\n }\n}\n\n.tna-hgroup {\n &__supertitle {\n margin: 0 0 0.5rem;\n\n @extend %chip;\n }\n\n &__title {\n margin: 0;\n\n display: block;\n\n @extend %heading;\n }\n\n &--xl &__title {\n @extend %heading-xl;\n }\n\n &--l &__title {\n @extend %heading-l;\n }\n\n &--m &__title {\n @extend %heading-m;\n }\n\n &--s &__title {\n @extend %heading-s;\n }\n}\n\n.tna-heading,\n.tna-hgroup {\n margin-top: 3rem;\n margin-bottom: 1rem;\n\n &:first-child {\n margin-top: 0;\n }\n\n &:last-child {\n margin-bottom: 0;\n }\n}\n\n.tna-blockquote {\n margin-top: 0;\n margin-right: 0;\n margin-left: 0;\n padding: 1rem 1rem 1rem 2rem;\n\n @include colour.colour-border(\"accent-background\", 0.35rem, solid, left);\n\n @include spacing.space-below;\n\n &__quote {\n font-weight: 700;\n }\n\n &__author {\n font-style: italic;\n\n .tna-blockquote & {\n margin: 1rem 0 0;\n }\n\n &::before {\n content: \"\\2014\" \" \";\n }\n }\n}\n\n.tna-scene-setter {\n @include typography.detail-font;\n @include colour.colour-font(\"font-dark\");\n @include typography.relative-font-size(30);\n line-height: math.div(50, 30);\n\n @include spacing.space-below;\n\n @include media.on-mobile {\n @include typography.relative-font-size(24);\n line-height: 2;\n }\n\n a {\n color: inherit;\n text-decoration-thickness: 2px;\n\n &:hover {\n text-decoration-thickness: 4.5px;\n }\n }\n}\n\n.tna-columns {\n column-gap: grid.$gutter-width;\n\n &--2 {\n column-count: 2;\n }\n\n &--3 {\n column-count: 3;\n }\n\n @include media.on-mobile {\n column-gap: grid.$gutter-width-mobile;\n }\n\n @include media.on-small {\n @for $i from 1 through 4 {\n &--#{$i}-small {\n column-count: $i;\n }\n }\n }\n\n @include media.on-tiny {\n @for $i from 1 through 4 {\n &--#{$i}-tiny {\n column-count: $i;\n }\n }\n }\n\n &__block {\n break-inside: avoid;\n }\n\n &:has(&__block:only-of-type) {\n column-count: 1;\n }\n}\n","@use \"sass:map\";\n@use \"../features\";\n@use \"../variables/colour\";\n@use \"../tools/media\";\n\n@function brand-colour($colour) {\n @return map.get(colour.$colour-palette-brand, $colour);\n}\n\n@mixin colour-css-vars() {\n @each $name, $value in colour.$colour-palette-default {\n --#{$name}: #{$value};\n }\n}\n\n@mixin colour-css-vars-dark() {\n @each $name, $value in colour.$colour-palette-dark {\n --#{$name}: #{$value};\n }\n}\n\n@mixin colour-css-vars-high-contrast() {\n @each $name, $value in colour.$colour-palette-high-contrast {\n --#{$name}: #{$value};\n }\n}\n\n@mixin colour-css-vars-high-contrast-dark() {\n @each $name, $value in colour.$colour-palette-high-contrast-dark {\n --#{$name}: #{$value};\n }\n}\n\n@mixin accent-css-vars($colour) {\n @if $colour == \"yellow\" {\n --accent: #{brand-colour(\"yellow\")} !important;\n --accent-background: #{brand-colour(\"yellow\")} !important;\n --accent-background-light: #{brand-colour(\"cream\")} !important;\n --accent-font-base: #{brand-colour(\"black\")} !important;\n --accent-font-dark: #{brand-colour(\"black\")} !important;\n --accent-font-light: #{rgba(brand-colour(\"black\"), 0.7)} !important;\n --accent-link: #{brand-colour(\"black\")} !important;\n --accent-link-visited: #{brand-colour(\"black\")} !important;\n --accent-keyline: #{rgba(brand-colour(\"black\"), 0.5)} !important;\n --accent-keyline-dark: #{rgba(brand-colour(\"black\"), 0.8)} !important;\n --button-accent-background: #{brand-colour(\"yellow\")} !important;\n } @else {\n --accent-font-base: #{brand-colour(\"white\")} !important;\n --accent-font-dark: #{brand-colour(\"white\")} !important;\n --accent-font-light: #{rgba(brand-colour(\"white\"), 0.7)} !important;\n --accent-link: #{brand-colour(\"white\")} !important;\n --accent-link-visited: #{brand-colour(\"white\")} !important;\n --accent-keyline: #{rgba(brand-colour(\"white\"), 0.5)} !important;\n --accent-keyline-dark: #{rgba(brand-colour(\"white\"), 0.8)} !important;\n\n @if $colour == \"black\" {\n // --accent: #{brand-colour(\"light-grey\")} !important;\n // --accent-background: #{brand-colour(\"black\")} !important;\n // --accent-background-light: #{brand-colour(\"light-grey\")} !important;\n // --button-accent-text: #{brand-colour(\"black\")} !important;\n // --button-accent-background: #{brand-colour(\"grey\")} !important;\n } @else {\n --button-accent-text: #{brand-colour(\"white\")} !important;\n @if $colour == \"pink\" {\n --accent: #{brand-colour(\"pink\")} !important;\n --accent-background: #{brand-colour(\"maroon\")} !important;\n --accent-background-light: #{brand-colour(\"pastel-pink\")} !important;\n --button-accent-background: #{brand-colour(\"maroon\")} !important;\n } @else if $colour == \"orange\" {\n --accent: #{brand-colour(\"orange\")} !important;\n --accent-background: #{brand-colour(\"chestnut\")} !important;\n --accent-background-light: #{brand-colour(\"pastel-orange\")} !important;\n --button-accent-background: #{brand-colour(\"chestnut\")} !important;\n } @else if $colour == \"green\" {\n --accent: #{brand-colour(\"green\")} !important;\n --accent-background: #{brand-colour(\"forest\")} !important;\n --accent-background-light: #{brand-colour(\"pastel-green\")} !important;\n --button-accent-background: #{brand-colour(\"forest\")} !important;\n } @else if $colour == \"blue\" {\n --accent: #{brand-colour(\"blue\")} !important;\n --accent-background: #{brand-colour(\"navy\")} !important;\n --accent-background-light: #{brand-colour(\"pastel-blue\")} !important;\n --button-accent-background: #{brand-colour(\"navy\")} !important;\n }\n }\n }\n}\n\n@mixin colour-font(\n $colour,\n $important: false,\n $default-palette: colour.$colour-palette-default\n) {\n color: map.get($default-palette, $colour) if($important, !important, null);\n color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n background-color: map.get(colour.$colour-palette-default, $colour)\n if($important, !important, null);\n background-color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-border(\n $colour,\n $width: \"\",\n $style: solid,\n $direction: \"\",\n $important: false\n) {\n @if $direction != \"\" {\n @if $width != \"\" {\n $property: border-#{$direction};\n border-#{$direction}: $width\n map.get(colour.$colour-palette-default, $colour)\n $style\n if($important, !important, null);\n border-#{$direction}: $width\n var(--#{$colour})\n $style\n if($important, !important, null);\n } @else {\n border-#{$direction}-color: map.get(\n colour.$colour-palette-default,\n $colour\n )\n if($important, !important, null);\n border-#{$direction}-color: var(--#{$colour})\n if($important, !important, null);\n }\n } @else {\n @if $width != \"\" {\n border: $width\n map.get(colour.$colour-palette-default, $colour)\n $style\n if($important, !important, null);\n border: $width var(--#{$colour}) $style if($important, !important, null);\n } @else {\n border-color: map.get(colour.$colour-palette-default, $colour)\n if($important, !important, null);\n border-color: var(--#{$colour}) if($important, !important, null);\n }\n }\n}\n\n@mixin colour-outline($colour, $important: false) {\n outline-color: map.get(colour.$colour-palette-default, $colour)\n if($important, !important, null);\n outline-color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-fill($colour, $important: false) {\n fill: map.get(colour.$colour-palette-default, $colour)\n if($important, !important, null);\n fill: var(--#{$colour}) if($important, !important, null);\n}\n\n%fixed {\n @include colour-css-vars;\n\n @include colour-font(\"font-base\");\n}\n\n@mixin fixed {\n @extend %fixed;\n}\n\n%invert {\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n\n @include colour-background(\"contrast-background\");\n\n @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin invert {\n @extend %invert;\n}\n\n%invert-on-mobile {\n @include media.on-mobile {\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n\n @include colour-background(\"contrast-background\");\n\n @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n }\n}\n\n@mixin invert-on-mobile {\n @extend %invert-on-mobile;\n}\n\n%accent {\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link-visited);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n\n @include colour-background(\"accent-background\");\n\n @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin accent {\n @extend %accent;\n}\n\n%accent-background {\n @include colour-background(\"accent-background\");\n}\n\n@mixin accent-background {\n @extend %accent-background;\n}\n\n%light-accent-background {\n @include colour-background(\"accent-background-light\");\n\n --font-base: #{map.get(colour.$colour-palette-default, \"font-base\")};\n --font-dark: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n --font-light: #{map.get(colour.$colour-palette-default, \"font-light\")};\n --link: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n --keyline: #{map.get(colour.$colour-palette-default, \"keyline\")};\n --keyline-dark: #{map.get(colour.$colour-palette-default, \"keyline-dark\")};\n --button-text: #{map.get(colour.$colour-palette-default, \"button-text\")};\n --button-background: #{map.get(\n colour.$colour-palette-default,\n \"button-background\"\n )};\n --button-hover-text: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-text\"\n )};\n --button-hover-background: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-background\"\n )};\n}\n\n@mixin light-accent-background {\n @extend %light-accent-background;\n}\n\n@mixin on-high-contrast {\n .tna-template--high-contrast-theme & {\n @content;\n }\n\n .tna-template--system-theme & {\n @media (prefers-contrast: more) {\n @content;\n }\n }\n}\n",".tna-visually-hidden {\n width: 1px !important;\n height: 1px !important;\n margin: 0 !important;\n padding: 0 !important;\n\n position: absolute !important;\n top: -9999px !important;\n left: -9999px !important;\n z-index: -1 !important;\n\n overflow: hidden !important;\n\n clip: rect(0, 0, 0, 0) !important;\n\n border: 0 !important;\n\n background-color: transparent !important;\n\n &::before,\n &::after {\n content: \"\\00a0\";\n }\n}\n","@use \"sass:map\";\n@use \"../variables/spacing\";\n\n%space-below {\n margin-bottom: 2rem;\n\n &:last-child {\n margin-bottom: 0;\n }\n}\n\n@mixin space-below {\n @extend %space-below;\n}\n\n@function spacing($size) {\n @return map.get(spacing.$spacing, $size);\n}\n\n@function spacing-mobile($size) {\n @return map.get(spacing.$spacing-mobile, $size);\n}\n","@use \"../features\";\n@use \"../tools/colour\";\n@use \"../tools/media\";\n@use \"../tools/spacing\";\n@use \"../variables/typography\";\n\n:root {\n @include colour.colour-css-vars;\n}\n\n.tna-template {\n min-width: 320px;\n width: 100%;\n height: 100%;\n\n overflow-x: hidden;\n overflow-y: auto;\n -webkit-overflow-scrolling: touch;\n\n font-size: #{typography.$base-font-size-px}px;\n\n @include colour.colour-background(\"page-background\");\n\n accent-color: var(--accent);\n\n &--system-theme {\n @include colour.colour-css-vars;\n\n @media (prefers-color-scheme: dark) {\n @include colour.colour-css-vars-dark;\n }\n\n @media (prefers-contrast: more) {\n @include colour.colour-css-vars-high-contrast;\n\n * {\n background-image: none !important;\n }\n }\n\n @media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n @include colour.colour-css-vars-high-contrast-dark;\n }\n }\n\n &--light-theme {\n @include colour.colour-css-vars;\n }\n\n &--dark-theme {\n @include colour.colour-css-vars-dark;\n }\n\n &--high-contrast-theme {\n @include colour.colour-css-vars-high-contrast;\n\n * {\n background-image: none !important;\n }\n\n &.tna-template--dark-theme {\n @include colour.colour-css-vars-high-contrast-dark;\n }\n }\n\n @include colour.accent-css-vars(\"black\"); // TODO: Temp\n\n // &--black-accent {\n // @include colour.accent-css-vars(\"black\");\n // }\n\n &--yellow-accent {\n @include colour.accent-css-vars(\"yellow\");\n }\n\n &--pink-accent {\n @include colour.accent-css-vars(\"pink\");\n }\n\n &--orange-accent {\n @include colour.accent-css-vars(\"orange\");\n }\n\n &--green-accent {\n @include colour.accent-css-vars(\"green\");\n }\n\n &--blue-accent {\n @include colour.accent-css-vars(\"blue\");\n }\n\n @media (prefers-reduced-motion) {\n * {\n animation: none !important;\n transition: none !important;\n }\n }\n}\n\n.tna-template__body {\n min-height: 100%;\n margin: 0;\n padding: 0;\n\n overflow: auto;\n\n &:has(.tna-header):has(#main-content[role=\"main\"]):has(.tna-footer) {\n display: flex;\n flex-direction: column;\n\n #main-content[role=\"main\"] {\n flex: 1;\n }\n }\n}\n\nimg,\nsvg,\npicture,\nvideo,\ncanvas {\n max-width: 100%;\n\n display: block;\n}\n\nvideo,\ncanvas {\n width: 100%;\n}\n\n[hidden] {\n display: none;\n}\n\n*:focus {\n // outline: 0.3125rem colour.$focus-colour solid;\n outline: 0.3125rem solid;\n @include colour.colour-outline(\"focus-outline\");\n outline-offset: 0.125rem;\n}\n\nhr {\n margin: 2rem 0;\n\n border-width: 1px 0 0;\n @include colour.colour-border(\"keyline\");\n border-style: solid;\n\n // @include colour.on-high-contrast {\n // border-style: solid;\n // }\n}\n\n.tna-section {\n padding-top: 3rem;\n padding-bottom: 3rem;\n\n @include media.on-mobile {\n padding-top: 2rem;\n padding-bottom: 2rem;\n }\n}\n\n.tna-aside {\n padding: 2rem;\n\n @include spacing.space-below;\n\n @include media.on-mobile {\n padding: 1rem;\n }\n\n @include colour.on-high-contrast {\n @include colour.colour-border(\"keyline-dark\", 1px);\n }\n}\n\n.tna-background--contrast {\n @include colour.invert;\n}\n\n.tna-background--accent {\n @include colour.accent;\n}\n\n.tna-background--accent-light {\n @include colour.light-accent-background;\n}\n","@use \"../variables/media\";\n\n// 0 ======= 320 = 480 ===== 768 == 1024 ========================== min-width/max-width (px)\n// \| . \| \| \|\n// \|-TINY----------\|-SMALL---\|-MED--\|-LARGE------------------------\n// \| . \| \| \|\n// \|<------------->\| \| \| on-tiny\n// \|<----------------------->\| \| on-mobile\n// \|<------------------------------>\| on-smaller-than-large\n// \| . \|<------->\| \| on-small\n// \| . \|<------------------------- on-larger-than-tiny\n// \| . \| \|<---->\| on-medium\n// \| . \| \|<--------------- on-larger-than-mobile\n// \| . \| \| \|<-------- on-large\n// \|<------->. \| \| \| Smallest device\n\n@mixin on-large() {\n @media #{media.$media-large} {\n @content;\n }\n}\n\n@mixin on-medium() {\n @media #{media.$media-medium} {\n @content;\n }\n}\n\n@mixin on-small() {\n @media #{media.$media-small} {\n @content;\n }\n}\n\n@mixin on-tiny() {\n @media #{media.$media-tiny} {\n @content;\n }\n}\n\n@mixin on-larger-than-mobile() {\n @media #{media.$media-gt-mobile} {\n @content;\n }\n}\n\n@mixin on-larger-than-tiny() {\n @media #{media.$media-gt-tiny} {\n @content;\n }\n}\n\n@mixin on-smaller-than-large() {\n @media #{media.$media-lt-large} {\n @content;\n }\n}\n\n@mixin on-mobile() {\n @media #{media.$media-mobile} {\n @content;\n }\n}\n","@use \"../variables/spacing\";\n@use \"../tools/media\";\n\n@mixin no-spacing-generator($suffix: \"\") {\n @if $suffix != \"\" {\n $suffix: \"-\" + $suffix;\n }\n\n @each $property in margin, padding {\n @each $direction in top, bottom {\n .tna-\\!--no-#{$property}-#{$direction}#{$suffix},\n .tna-\\!--no-#{$property}-vertical#{$suffix} {\n #{$property}-#{$direction}: 0 !important;\n }\n }\n }\n}\n\n@mixin overrides($spacing, $suffix: \"\") {\n @if $suffix != \"\" {\n $suffix: \"-\" + $suffix;\n }\n\n @each $property in margin, padding {\n @each $direction in top, bottom {\n @each $size, $amount in $spacing {\n .tna-\\!--#{$property}-#{$direction}-#{$size}#{$suffix},\n .tna-\\!--#{$property}-vertical-#{$size}#{$suffix} {\n #{$property}-#{$direction}: #{$amount} !important;\n }\n }\n }\n }\n}\n\n@include no-spacing-generator;\n@include overrides(spacing.$spacing);\n\n@include media.on-medium {\n @include no-spacing-generator(\"medium\");\n @include overrides(spacing.$spacing, \"medium\");\n}\n\n@include media.on-small {\n @include no-spacing-generator(\"small\");\n @include overrides(spacing.$spacing-mobile, \"small\");\n}\n\n@include media.on-tiny {\n @include no-spacing-generator(\"tiny\");\n @include overrides(spacing.$spacing-mobile, \"tiny\");\n}\n","@use \"sass:math\";\n@use \"../variables/typography\";\n\n@mixin relative-font-size($fontSizePx) {\n font-size: #{math.div($fontSizePx, typography.$base-font-size-px)}rem;\n}\n\n@mixin interacted-text-decoration {\n text-decoration: underline;\n text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n}\n\n@mixin main-font-weight {\n font-weight: typography.$font-weight-main;\n}\n\n@mixin main-font-weight-bold {\n font-weight: typography.$font-weight-main-bold;\n}\n\n@mixin main-font {\n font-family: typography.$font-family-main;\n @include main-font-weight;\n}\n\n@mixin heading-font {\n font-family: typography.$font-family-heading;\n font-weight: typography.$font-weight-heading;\n}\n\n@mixin detail-font {\n font-family: typography.$font-family-detail;\n font-weight: typography.$font-weight-detail;\n}\n\n@mixin detail-font-small {\n @include detail-font;\n @include relative-font-size(14);\n text-transform: uppercase;\n line-height: #{math.div(typography.$base-font-size-px, 14)};\n // line-height: 1;\n}\n","$base-font-size-px: 16;\n\n$interactive-text-decoration-thickness: 3.5px;\n\n$font-family-main: \"Open Sans\", serif;\n// $font-weight-main: 500;\n$font-weight-main: normal;\n// $font-weight-main-bold: 700;\n$font-weight-main-bold: bold;\n\n$font-family-heading: supria-sans-condensed, \"Arial Narrow\", sans-serif;\n$font-weight-heading: 400;\n\n$font-family-detail: \"Roboto Mono\", monospace;\n// $font-weight-detail: 400;\n$font-weight-detail: normal;\n","$largest-container-width: 75.25rem !default;\n\n$gutter-width: 2rem !default;\n$gutter-width-mobile: 1.5rem !default;\n\n$column-count: 12 !default;\n$column-count-medium: 6 !default;\n$column-count-small: 4 !default;\n$column-count-tiny: 2 !default;\n","@use \"../../tools/colour\";\n@use \"../../utilities\";\n\n.tna-skip-link {\n width: 1px !important;\n height: 1px !important;\n margin: 0 !important;\n padding: 1rem !important;\n\n display: block !important;\n\n position: absolute !important;\n\n overflow: hidden !important;\n\n white-space: nowrap !important;\n\n clip: rect(0 0 0 0) !important;\n -webkit-clip-path: inset(50%) !important;\n clip-path: inset(50%) !important;\n\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"button-text\", $important: true);\n }\n\n &:active,\n &:focus {\n width: auto !important;\n height: auto !important;\n margin: inherit !important;\n\n position: static !important;\n\n overflow: visible !important;\n\n white-space: inherit !important;\n\n clip: auto !important;\n -webkit-clip-path: none !important;\n clip-path: none !important;\n }\n\n &:focus {\n @include colour.colour-background(\"button-background\", $important: true);\n\n @include colour.colour-border(\"focus-outline\", 0.3125rem, $important: true);\n\n outline: none !important;\n }\n\n &:hover {\n @include colour.colour-font(\"button-hover-text\", $important: true);\n\n @include colour.colour-background(\n \"button-hover-background\",\n $important: true\n );\n }\n}\n"]}
1	+ {"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/utilities/_typography.scss","../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/utilities/_a11y.scss","../../../../src/nationalarchives/tools/_spacing.scss","../../../../src/nationalarchives/utilities/_global.scss","../../../../src/nationalarchives/tools/_media.scss","../../../../src/nationalarchives/utilities/_overrides.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss","../../../../src/nationalarchives/variables/_grid.scss","../../../../src/nationalarchives/components/skip-link/skip-link.scss"],"names":[],"mappings":"CASQ,6CCuKR,0BACE,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEAxFA,mCAPA,4BACA,uBAmIF,0DACE,uCACA,qCACA,qCACA,uCACA,uCACA,2BACA,2CACA,iCACA,2CAtIA,mCAPA,4BACA,uBAuJF,sBAnJE,yBAEA,wCAiKF,8BACE,6CACA,qBACA,0BACA,gCACA,qBACA,wBACA,8BACA,wBACA,kCACA,kCAIA,kCAIA,8CAnLA,mCCnGF,qBACE,qBACA,sBACA,oBACA,qBAEA,6BACA,uBACA,wBACA,sBAEA,2BAEA,iCAEA,oBAEA,0CAEA,yDAEE,YAIJ,QACE,UDwHE,+BAIA,4CCzHF,uBAIA,8BACE,aCjCJ,oFACE,mBAEA,iKACE,gBCFJ,MHKI,w7CGDJ,cACE,gBACA,WACA,YAUA,iCAEA,eH2EA,yBAEA,wCGzEA,2BHmBE,kDACA,kDACA,qDACA,sDACA,6CACA,qDACA,kDACA,uDGxBF,4BHpBE,w7CGuBA,mCAHF,4BHdE,4+CGqBA,+BAPF,4BHRE,85CGkBE,8BACE,kCAIJ,+DAfF,4BHFE,y/CGsBF,2BHxCE,w7CG4CF,0BHtCE,2+CG0CF,mCHpCE,85CGuCA,qCACE,iCAGF,4DHrCA,w/CGgDF,6BH1CE,sCACA,iDACA,yDACA,4CACA,4CACA,+CACA,gDACA,uCACA,+CACA,4CACA,iDACA,wDGmCF,2BHjCE,kDACA,kDACA,qDACA,sDACA,6CACA,qDACA,kDACA,uDASE,oDAEE,sCACA,iDACA,yDACA,wDGgBN,6BHrCE,kDACA,kDACA,qDACA,sDACA,6CACA,qDACA,kDACA,uDASE,oDAOE,qCACA,iDACA,yDACA,wDGeN,4BHzCE,kDACA,kDACA,qDACA,sDACA,6CACA,qDACA,kDACA,uDASE,oDAYE,uCACA,+CACA,yDACA,sDGcN,2BH7CE,kDACA,kDACA,qDACA,sDACA,6CACA,qDACA,kDACA,uDASE,oDAiBE,sCACA,gDACA,yDACA,uDGaN,+BACE,gBACE,0BACA,4BAKN,oBACE,gBACA,SACA,UAEA,oF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","file":"skip-link.css","sourcesContent":["@use \"sass:math\";\n@use \"../tools/colour\";\n@use \"../tools/media\";\n@use \"../tools/spacing\";\n@use \"../tools/typography\";\n@use \"../variables/assets\";\n@use \"../variables/grid\";\n@use \"../variables/typography\" as typographyVars;\n\n@import \"https://use.typekit.net/hkj3kuz.css\";\n\n@font-face {\n font-family: \"Open Sans\";\n src: url(\"#{assets.$tna-font-path}/OpenSans-Medium.ttf\");\n font-weight: normal;\n font-style: normal;\n}\n\n@font-face {\n font-family: \"Open Sans\";\n src: url(\"#{assets.$tna-font-path}/OpenSans-Bold.ttf\");\n font-weight: bold;\n font-style: normal;\n}\n\n@font-face {\n font-family: \"Roboto Mono\";\n src: url(\"#{assets.$tna-font-path}/RobotoMono-Regular.ttf\");\n font-weight: normal;\n font-style: normal;\n}\n\n.tna-template {\n @include colour.colour-font(\"font-base\");\n @include typography.main-font;\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n text-rendering: optimizeLegibility;\n -webkit-text-size-adjust: none;\n direction: ltr;\n}\n\n.tna-template__body {\n color: inherit;\n @include typography.relative-font-size(typographyVars.$body-font-size-px);\n line-height: typographyVars.$body-line-height;\n\n @include media.on-mobile {\n @include typography.relative-font-size(\n typographyVars.$body-font-size-px-mobile\n );\n }\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nul,\nol {\n margin-top: 0;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nstrong {\n @include typography.main-font-weight-bold;\n}\n\np {\n margin: 0 0 1rem;\n\n @include media.on-tiny {\n margin-bottom: 1rem;\n }\n\n &:last-child {\n margin-bottom: 0;\n }\n}\n\na {\n @include colour.colour-font(\"link\");\n text-decoration-thickness: 1.5px;\n\n &:visited {\n @include colour.colour-font(\"link-visited\");\n }\n\n &:hover,\n &:active {\n @include typography.interacted-text-decoration;\n }\n\n &.tna-chip {\n text-decoration: none;\n\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"font-dark\");\n }\n\n &:hover {\n @include typography.interacted-text-decoration;\n }\n }\n}\n\nsmall {\n @include typography.relative-font-size(\n typographyVars.$body-font-size-px * 0.85\n );\n}\n\n.tna-ul,\n.tna-ol {\n margin-top: 0;\n margin-right: 0;\n margin-left: 0;\n padding: 0 0 0 2rem;\n\n @include spacing.space-below;\n\n li::marker {\n @include colour.colour-font(\"accent-background\");\n font-weight: 700;\n }\n\n &--plain {\n padding-left: 0;\n\n list-style: none;\n }\n}\n\n.tna-dl {\n display: flex;\n flex-wrap: wrap;\n\n @include spacing.space-below;\n\n dt,\n dd {\n margin: 0;\n padding: 0.5rem 1rem;\n\n position: relative;\n\n box-sizing: border-box;\n\n word-wrap: break-word;\n // word-break: break-all;\n }\n\n &--plain {\n dt {\n padding-left: 0;\n }\n\n dd {\n padding-right: 0;\n }\n }\n\n dt {\n width: 25%;\n\n @include typography.main-font-weight-bold;\n }\n\n dd {\n width: 75%;\n\n + dd {\n margin-left: 25%;\n }\n }\n\n &--icon-padding {\n dt {\n padding-left: 3rem !important;\n\n position: relative;\n\n .fa-solid {\n overflow: visible;\n\n position: absolute;\n top: 50%;\n left: 1rem;\n\n @include colour.colour-font(\"icon-light\");\n text-align: left;\n\n transform: translateY(-50%);\n }\n }\n }\n\n &--icon-padding#{&}--plain {\n dt {\n padding-left: 2rem !important;\n\n .fa-solid {\n left: 0;\n }\n }\n }\n\n &:not(&--plain) {\n dt,\n dd {\n // padding-left: 1rem;\n // padding-right: 1rem;\n }\n\n dt:first-child,\n dd:nth-of-type(2n) + dt,\n dd:nth-of-type(2n + 1) {\n @include colour.colour-background(\"background-tint\");\n }\n }\n\n @include media.on-small {\n dt {\n width: 35%;\n }\n\n dd {\n width: 65%;\n\n + dd {\n margin-left: 35%;\n }\n }\n }\n\n @include media.on-tiny {\n dt,\n dd {\n width: 100%;\n margin-left: 0;\n }\n\n dd {\n padding-left: 1rem;\n }\n\n &--plain {\n dt {\n padding-bottom: 0;\n }\n\n dd {\n padding-top: 0;\n // padding-left: 2rem;\n\n + dt {\n // @include colour.colour-border(\"keyline\", 1px, solid, top);\n }\n }\n }\n\n &:not(&--plain) {\n dt {\n @include colour.colour-background(\"background-tint\");\n }\n\n dd {\n background: transparent !important;\n }\n }\n }\n\n @include colour.on-high-contrast {\n @include colour.colour-border(\"keyline-dark\", 1px, solid, bottom);\n\n dt,\n dd {\n // padding-left: 0;\n // padding-right: 0;\n\n background: transparent !important;\n\n @include colour.colour-border(\"keyline-dark\", 1px, solid, top);\n }\n }\n}\n\n%chip {\n max-width: max-content;\n padding: 0.125em 0.25rem;\n\n display: block;\n\n @include typography.detail-font-small;\n line-height: 1;\n\n @include colour.accent;\n\n @include colour.colour-border(\"accent-background\", 0.125rem);\n}\n\n.tna-chip {\n @extend %chip;\n}\n\n.tna-chip-list {\n padding-left: 0;\n\n display: flex;\n flex-wrap: wrap;\n gap: 1rem;\n\n list-style: none;\n\n @include spacing.space-below;\n\n &__item {\n }\n}\n\n%heading {\n @include colour.colour-font(\"font-dark\");\n\n text-wrap: balance;\n\n &:not(.tna-heading--no-link-arrow) {\n a {\n display: inline-block;\n\n &::after {\n padding-left: 0.25rem;\n\n display: inline-block;\n\n font-weight: 700;\n\n content: \"\\203A\";\n }\n\n &:hover {\n &::after {\n padding-left: 0.5rem;\n }\n }\n }\n }\n}\n\n%heading-xl {\n @include typography.heading-font;\n @include typography.relative-font-size(64);\n line-height: 1.2;\n\n @include media.on-medium {\n @include typography.relative-font-size(42);\n }\n\n @include media.on-mobile {\n @include typography.relative-font-size(36);\n }\n}\n\n%heading-l {\n @include typography.heading-font;\n @include typography.relative-font-size(32);\n line-height: 1.3;\n\n @include media.on-medium {\n @include typography.relative-font-size(26);\n }\n\n @include media.on-mobile {\n @include typography.relative-font-size(24);\n }\n}\n\n%heading-m {\n @include typography.main-font-weight-bold;\n @include typography.relative-font-size(22);\n line-height: 1.6;\n}\n\n%heading-s {\n @include typography.main-font-weight-bold;\n @include typography.relative-font-size(18);\n line-height: 1.6;\n}\n\n.tna-heading {\n @extend %heading;\n\n &--xl {\n @extend %heading-xl;\n }\n\n &--l {\n @extend %heading-l;\n }\n\n &--m {\n @extend %heading-m;\n }\n\n &--s {\n @extend %heading-s;\n }\n}\n\n.tna-hgroup {\n &__supertitle {\n margin: 0 0 0.25rem;\n\n @extend %chip;\n }\n\n &__title {\n margin: 0;\n\n display: block;\n\n @extend %heading;\n }\n\n &--xl &__title {\n @extend %heading-xl;\n }\n\n &--l &__title {\n @extend %heading-l;\n }\n\n &--m &__title {\n @extend %heading-m;\n }\n\n &--s &__title {\n @extend %heading-s;\n }\n}\n\n.tna-heading,\n.tna-hgroup {\n margin-top: 3rem;\n margin-bottom: 1rem;\n\n // &--m,\n // &--s {\n // margin-bottom: 0.5rem;\n // }\n\n &:first-child {\n margin-top: 0;\n }\n\n &:last-child {\n margin-bottom: 0;\n }\n}\n\n.tna-blockquote {\n margin-top: 0;\n margin-right: 0;\n margin-left: 0;\n padding: 1rem 1rem 1rem 2rem;\n\n @include colour.colour-border(\"accent-background\", 0.35rem, solid, left);\n\n @include spacing.space-below;\n\n &__quote {\n font-weight: 700;\n }\n\n &__author {\n font-style: italic;\n\n .tna-blockquote & {\n margin: 1rem 0 0;\n }\n\n &::before {\n content: \"\\2014\" \" \";\n }\n }\n}\n\n.tna-scene-setter {\n @include typography.detail-font;\n @include colour.colour-font(\"font-dark\");\n @include typography.relative-font-size(30);\n line-height: math.div(50, 30);\n\n @include spacing.space-below;\n\n @include media.on-mobile {\n @include typography.relative-font-size(24);\n line-height: 2;\n }\n\n a {\n color: inherit;\n text-decoration-thickness: 2px;\n\n &:hover {\n text-decoration-thickness: 4.5px;\n }\n }\n}\n\n.tna-columns {\n column-gap: grid.$gutter-width;\n\n &--2 {\n column-count: 2;\n }\n\n &--3 {\n column-count: 3;\n }\n\n @include media.on-tiny {\n column-gap: grid.$gutter-width-tiny;\n }\n\n @include media.on-small {\n @for $i from 1 through 4 {\n &--#{$i}-small {\n column-count: $i;\n }\n }\n }\n\n @include media.on-tiny {\n @for $i from 1 through 4 {\n &--#{$i}-tiny {\n column-count: $i;\n }\n }\n }\n\n &__block {\n break-inside: avoid;\n }\n\n &:has(&__block:only-of-type) {\n column-count: 1;\n }\n}\n","@use \"sass:map\";\n@use \"../variables/colour\";\n@use \"../tools/media\";\n\n@function brand-colour($colour, $opacity: 1) {\n @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars() {\n @each $name, $value in colour.$colour-palette-default {\n --#{$name}: #{$value};\n }\n}\n\n@mixin colour-css-vars-dark() {\n @each $name, $value in colour.$colour-palette-dark {\n --#{$name}: #{$value};\n }\n}\n\n@mixin colour-css-vars-high-contrast() {\n @each $name, $value in colour.$colour-palette-high-contrast {\n --#{$name}: #{$value};\n }\n}\n\n@mixin colour-css-vars-high-contrast-dark() {\n @each $name, $value in colour.$colour-palette-high-contrast-dark {\n --#{$name}: #{$value};\n }\n}\n\n@mixin accent-css-vars($colour) {\n @if $colour == \"yellow\" {\n --accent: #{brand-colour(\"yellow\")} !important;\n --accent-background: #{brand-colour(\"yellow\")} !important;\n --accent-background-light: #{brand-colour(\"cream\")} !important;\n --accent-font-base: #{brand-colour(\"black\")} !important;\n --accent-font-dark: #{brand-colour(\"black\")} !important;\n --accent-font-light: #{brand-colour(\"black\", 0.7)} !important;\n --accent-icon-light: #{brand-colour(\"black\", 0.45)} !important;\n --accent-link: #{brand-colour(\"black\")} !important;\n --accent-link-visited: #{brand-colour(\"black\")} !important;\n --accent-keyline: #{brand-colour(\"black\", 0.5)} !important;\n --accent-keyline-dark: #{brand-colour(\"black\", 0.8)} !important;\n --button-accent-background: #{brand-colour(\"yellow\")} !important;\n } @else {\n --accent-font-base: #{brand-colour(\"white\")} !important;\n --accent-font-dark: #{brand-colour(\"white\")} !important;\n --accent-font-light: #{brand-colour(\"white\", 0.7)} !important;\n --accent-icon-light: #{brand-colour(\"white\", 0.45)} !important;\n --accent-link: #{brand-colour(\"white\")} !important;\n --accent-link-visited: #{brand-colour(\"white\")} !important;\n --accent-keyline: #{brand-colour(\"white\", 0.5)} !important;\n --accent-keyline-dark: #{brand-colour(\"white\", 0.8)} !important;\n\n @if $colour == \"black\" {\n // --accent: #{brand-colour(\"light-grey\")} !important;\n // --accent-background: #{brand-colour(\"black\")} !important;\n // --accent-background-light: #{brand-colour(\"light-grey\")} !important;\n // --button-accent-text: #{brand-colour(\"black\")} !important;\n // --button-accent-background: #{brand-colour(\"grey\")} !important;\n } @else {\n --button-accent-text: #{brand-colour(\"white\")} !important;\n @if $colour == \"pink\" {\n --accent: #{brand-colour(\"pink\")} !important;\n --accent-background: #{brand-colour(\"maroon\")} !important;\n --accent-background-light: #{brand-colour(\"pastel-pink\")} !important;\n --button-accent-background: #{brand-colour(\"maroon\")} !important;\n } @else if $colour == \"orange\" {\n --accent: #{brand-colour(\"orange\")} !important;\n --accent-background: #{brand-colour(\"chestnut\")} !important;\n --accent-background-light: #{brand-colour(\"pastel-orange\")} !important;\n --button-accent-background: #{brand-colour(\"chestnut\")} !important;\n } @else if $colour == \"green\" {\n --accent: #{brand-colour(\"green\")} !important;\n --accent-background: #{brand-colour(\"forest\")} !important;\n --accent-background-light: #{brand-colour(\"pastel-green\")} !important;\n --button-accent-background: #{brand-colour(\"forest\")} !important;\n } @else if $colour == \"blue\" {\n --accent: #{brand-colour(\"blue\")} !important;\n --accent-background: #{brand-colour(\"navy\")} !important;\n --accent-background-light: #{brand-colour(\"pastel-blue\")} !important;\n --button-accent-background: #{brand-colour(\"navy\")} !important;\n }\n }\n }\n}\n\n@mixin colour-font(\n $colour,\n $important: false,\n $default-palette: colour.$colour-palette-default\n) {\n color: map.get($default-palette, $colour) if($important, !important, null);\n color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n background-color: map.get(colour.$colour-palette-default, $colour)\n if($important, !important, null);\n background-color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-border(\n $colour,\n $width: \"\",\n $style: solid,\n $direction: \"\",\n $important: false\n) {\n @if $direction != \"\" {\n @if $width != \"\" {\n $property: border-#{$direction};\n border-#{$direction}: $width\n map.get(colour.$colour-palette-default, $colour)\n $style\n if($important, !important, null);\n border-#{$direction}: $width\n var(--#{$colour})\n $style\n if($important, !important, null);\n } @else {\n border-#{$direction}-color: map.get(\n colour.$colour-palette-default,\n $colour\n )\n if($important, !important, null);\n border-#{$direction}-color: var(--#{$colour})\n if($important, !important, null);\n }\n } @else {\n @if $width != \"\" {\n border: $width\n map.get(colour.$colour-palette-default, $colour)\n $style\n if($important, !important, null);\n border: $width var(--#{$colour}) $style if($important, !important, null);\n } @else {\n border-color: map.get(colour.$colour-palette-default, $colour)\n if($important, !important, null);\n border-color: var(--#{$colour}) if($important, !important, null);\n }\n }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n @if $width != \"\" {\n outline: $width\n map.get(colour.$colour-palette-default, $colour)\n $style\n if($important, !important, null);\n outline: $width var(--#{$colour}) $style if($important, !important, null);\n } @else {\n outline-color: map.get(colour.$colour-palette-default, $colour)\n if($important, !important, null);\n outline-color: var(--#{$colour}) if($important, !important, null);\n }\n}\n\n@mixin colour-fill($colour, $important: false) {\n fill: map.get(colour.$colour-palette-default, $colour)\n if($important, !important, null);\n fill: var(--#{$colour}) if($important, !important, null);\n}\n\n%fixed {\n @include colour-css-vars;\n\n @include colour-font(\"font-base\");\n}\n\n@mixin fixed {\n @extend %fixed;\n}\n\n%invert {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin invert {\n @extend %invert;\n}\n\n%invert-on-mobile {\n @include media.on-mobile {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n }\n}\n\n@mixin invert-on-mobile {\n @extend %invert-on-mobile;\n}\n\n%accent {\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link-visited);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin accent {\n @extend %accent;\n}\n\n%tint-background {\n @include colour-background(\"background-tint\");\n}\n\n@mixin tint-background {\n @extend %tint-background;\n}\n\n%accent-background {\n @include colour-background(\"accent-background\");\n}\n\n@mixin accent-background {\n @extend %accent-background;\n}\n\n%light-accent-background {\n --background: var(--accent-background-light);\n --font-base: #{map.get(colour.$colour-palette-default, \"font-base\")};\n --font-dark: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n --font-light: #{map.get(colour.$colour-palette-default, \"font-light\")};\n --link: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n --keyline: #{map.get(colour.$colour-palette-default, \"keyline\")};\n --keyline-dark: #{map.get(colour.$colour-palette-default, \"keyline-dark\")};\n --button-text: #{map.get(colour.$colour-palette-default, \"button-text\")};\n --button-background: #{map.get(\n colour.$colour-palette-default,\n \"button-background\"\n )};\n --button-hover-text: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-text\"\n )};\n --button-hover-background: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-background\"\n )};\n\n @include colour-background(\"background\");\n}\n\n@mixin light-accent-background {\n @extend %light-accent-background;\n}\n\n@mixin on-high-contrast {\n .tna-template--high-contrast-theme & {\n @content;\n }\n\n .tna-template--system-theme & {\n @media (prefers-contrast: more) {\n @content;\n }\n }\n}\n","@use \"../tools/colour\";\n\n.tna-visually-hidden {\n width: 1px !important;\n height: 1px !important;\n margin: 0 !important;\n padding: 0 !important;\n\n position: absolute !important;\n top: -9999px !important;\n left: -9999px !important;\n z-index: -1 !important;\n\n overflow: hidden !important;\n\n clip: rect(0, 0, 0, 0) !important;\n\n border: 0 !important;\n\n background-color: transparent !important;\n\n &::before,\n &::after {\n content: \"\\00a0\";\n }\n}\n\n:focus {\n z-index: 9;\n\n @include colour.colour-outline(\"focus-outline\", 0.3125rem, solid);\n outline-offset: 0.125rem;\n}\n\n.tna-\\!--no-focus-style {\n &:focus {\n outline: none;\n }\n}\n","@use \"sass:map\";\n@use \"../variables/spacing\";\n\n%space-below {\n margin-bottom: 2rem;\n\n &:last-child {\n margin-bottom: 0;\n }\n}\n\n@mixin space-below {\n @extend %space-below;\n}\n\n@function spacing($size) {\n @return map.get(spacing.$spacing, $size);\n}\n\n@function spacing-mobile($size) {\n @return map.get(spacing.$spacing-mobile, $size);\n}\n","@use \"../tools/colour\";\n@use \"../tools/media\";\n@use \"../tools/spacing\";\n@use \"../variables/typography\";\n\n:root {\n @include colour.colour-css-vars;\n}\n\n.tna-template {\n min-width: 320px;\n width: 100%;\n height: 100%;\n\n /\n * ------------------------------------------\n * Support ended with iOS 13 released on 19th\n * September 2019. Deprecate in the future if\n * iOS <13 share drops low enough.\n * https://caniuse.com/mdn-css_properties_-webkit-overflow-scrolling\n * ------------------------------------------\n /\n -webkit-overflow-scrolling: touch;\n\n font-size: #{typography.$relative-1rem-px}px;\n\n @include colour.colour-background(\"page-background\");\n\n accent-color: var(--accent);\n\n &--system-theme {\n @include colour.colour-css-vars;\n\n @media (prefers-color-scheme: dark) {\n @include colour.colour-css-vars-dark;\n }\n\n @media (prefers-contrast: more) {\n @include colour.colour-css-vars-high-contrast;\n\n {\n background-image: none !important;\n }\n }\n\n @media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n @include colour.colour-css-vars-high-contrast-dark;\n }\n }\n\n &--light-theme {\n @include colour.colour-css-vars;\n }\n\n &--dark-theme {\n @include colour.colour-css-vars-dark;\n }\n\n &--high-contrast-theme {\n @include colour.colour-css-vars-high-contrast;\n\n * {\n background-image: none !important;\n }\n\n &.tna-template--dark-theme {\n @include colour.colour-css-vars-high-contrast-dark;\n }\n }\n\n @include colour.accent-css-vars(\"black\"); // TODO: Temp\n\n // &--black-accent {\n // @include colour.accent-css-vars(\"black\");\n // }\n\n &--yellow-accent {\n @include colour.accent-css-vars(\"yellow\");\n }\n\n &--pink-accent {\n @include colour.accent-css-vars(\"pink\");\n }\n\n &--orange-accent {\n @include colour.accent-css-vars(\"orange\");\n }\n\n &--green-accent {\n @include colour.accent-css-vars(\"green\");\n }\n\n &--blue-accent {\n @include colour.accent-css-vars(\"blue\");\n }\n\n @media (prefers-reduced-motion) {\n * {\n animation: none !important;\n transition: none !important;\n }\n }\n}\n\n.tna-template__body {\n min-height: 100%;\n margin: 0;\n padding: 0;\n\n &:has(.tna-header):has(#main-content[role=\"main\"]):has(.tna-footer) {\n display: flex;\n flex-direction: column;\n\n #main-content[role=\"main\"] {\n flex: 1;\n }\n }\n}\n\nimg,\nsvg,\npicture,\nvideo,\ncanvas {\n max-width: 100%;\n\n display: block;\n}\n\nvideo,\ncanvas {\n width: 100%;\n}\n\n[hidden] {\n display: none;\n}\n\nhr {\n margin: 2rem 0;\n\n border-width: 1px 0 0;\n @include colour.colour-border(\"keyline\");\n border-style: solid;\n}\n\n.tna-section {\n padding-top: 3rem;\n padding-bottom: 3rem;\n\n @include media.on-mobile {\n padding-top: 2rem;\n padding-bottom: 2rem;\n }\n}\n\n.tna-aside {\n padding: 2rem;\n\n @include spacing.space-below;\n\n @include media.on-mobile {\n padding: 1rem;\n }\n\n @include colour.on-high-contrast {\n @include colour.colour-border(\"keyline-dark\", 1px);\n }\n}\n\n.tna-background {\n &--contrast {\n @include colour.invert;\n }\n\n &--accent {\n @include colour.accent;\n }\n\n &--accent-light {\n @include colour.light-accent-background;\n }\n\n &--tint {\n @include colour.tint-background;\n }\n}\n","@use \"../variables/media\";\n\n// 0 ======= 320 = 480 ===== 768 == 1024 ========================== min-width/max-width (px)\n// \| . \| \| \|\n// \|-TINY----------\|-SMALL---\|-MED--\|-LARGE------------------------\n// \| . \| \| \|\n// \|<------------->\| \| \| on-tiny\n// \|<----------------------->\| \| on-mobile\n// \|<------------------------------>\| on-smaller-than-large\n// \| . \|<------->\| \| on-small\n// \| . \|<------------------------- on-larger-than-tiny\n// \| . \| \|<---->\| on-medium\n// \| . \| \|<--------------- on-larger-than-mobile\n// \| . \| \| \|<-------- on-large\n// \|<------->. \| \| \| Smallest device\n\n@mixin on-large() {\n @media #{media.$media-large} {\n @content;\n }\n}\n\n@mixin on-medium() {\n @media #{media.$media-medium} {\n @content;\n }\n}\n\n@mixin on-small() {\n @media #{media.$media-small} {\n @content;\n }\n}\n\n@mixin on-tiny() {\n @media #{media.$media-tiny} {\n @content;\n }\n}\n\n@mixin on-larger-than-mobile() {\n @media #{media.$media-gt-mobile} {\n @content;\n }\n}\n\n@mixin on-larger-than-tiny() {\n @media #{media.$media-gt-tiny} {\n @content;\n }\n}\n\n@mixin on-smaller-than-large() {\n @media #{media.$media-lt-large} {\n @content;\n }\n}\n\n@mixin on-mobile() {\n @media #{media.$media-mobile} {\n @content;\n }\n}\n\n@mixin on-print() {\n @media print {\n @content;\n }\n}\n","@use \"../variables/spacing\";\n@use \"../tools/media\";\n\n@mixin no-spacing-generator($suffix: \"\") {\n @if $suffix != \"\" {\n $suffix: \"-\" + $suffix;\n }\n\n @each $property in margin, padding {\n @each $direction in top, bottom {\n .tna-\\!--no-#{$property}-#{$direction}#{$suffix},\n .tna-\\!--no-#{$property}-vertical#{$suffix} {\n #{$property}-#{$direction}: 0 !important;\n }\n }\n }\n}\n\n@mixin overrides($spacing, $suffix: \"\") {\n @if $suffix != \"\" {\n $suffix: \"-\" + $suffix;\n }\n\n @each $property in margin, padding {\n @each $direction in top, bottom {\n @each $size, $amount in $spacing {\n .tna-\\!--#{$property}-#{$direction}-#{$size}#{$suffix},\n .tna-\\!--#{$property}-vertical-#{$size}#{$suffix} {\n #{$property}-#{$direction}: #{$amount} !important;\n }\n }\n }\n }\n}\n\n@include no-spacing-generator;\n@include overrides(spacing.$spacing);\n\n@include media.on-medium {\n @include no-spacing-generator(\"medium\");\n @include overrides(spacing.$spacing, \"medium\");\n}\n\n@include media.on-small {\n @include no-spacing-generator(\"small\");\n @include overrides(spacing.$spacing-mobile, \"small\");\n}\n\n@include media.on-tiny {\n @include no-spacing-generator(\"tiny\");\n @include overrides(spacing.$spacing-mobile, \"tiny\");\n}\n","@use \"sass:math\";\n@use \"colour\";\n@use \"../variables/typography\";\n\n@mixin relative-font-size($fontSizePx) {\n font-size: #{math.div($fontSizePx, typography.$relative-1rem-px)}rem;\n}\n\n@mixin interacted-text-decoration {\n text-decoration: underline;\n text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n}\n\n@mixin main-font-weight {\n font-weight: typography.$font-weight-main;\n}\n\n@mixin main-font-weight-bold {\n font-weight: typography.$font-weight-main-bold;\n}\n\n@mixin main-font {\n font-family: typography.$font-family-main;\n @include main-font-weight;\n}\n\n@mixin heading-font {\n font-family: typography.$font-family-heading;\n font-weight: typography.$font-weight-heading;\n}\n\n@mixin detail-font {\n font-family: typography.$font-family-detail;\n font-weight: typography.$font-weight-detail;\n}\n\n@mixin detail-font-small {\n @include colour.colour-font(\"font-dark\");\n @include detail-font;\n @include relative-font-size(14);\n text-transform: uppercase;\n line-height: #{math.div(typography.$relative-1rem-px, 14)};\n // line-height: 1;\n}\n","@use \"sass:math\";\n\n$relative-1rem-px: 16;\n\n$body-font-size-px: 18 !default;\n$body-font-size-px-mobile: 17 !default;\n$body-line-height: #{math.div(16, 18) * 2} !default; // 1.77777\n\n$interactive-text-decoration-thickness: 3.5px !default;\n\n$font-family-main: \"Open Sans\", sans-serif !default;\n$font-weight-main: normal !default;\n$font-weight-main-bold: bold !default;\n\n$font-family-heading: supria-sans-condensed, \"Arial Narrow\", sans-serif !default;\n$font-weight-heading: 400 !default;\n\n$font-family-detail: \"Roboto Mono\", monospace !default;\n$font-weight-detail: normal !default;\n","$largest-container-width: 75.25rem !default;\n\n$gutter-width: 2rem !default;\n$gutter-width-tiny: 1rem !default;\n\n$column-count: 12;\n$column-count-medium: 6;\n$column-count-small: 4;\n$column-count-tiny: 2;\n","@use \"../../tools/colour\";\n@use \"../../utilities\";\n\n.tna-skip-link {\n width: 1px !important;\n height: 1px !important;\n margin: 0 !important;\n padding: 0 !important;\n\n display: block !important;\n\n position: absolute !important;\n left: -100vw;\n\n overflow: hidden !important;\n\n white-space: nowrap !important;\n\n clip: rect(0 0 0 0) !important;\n -webkit-clip-path: inset(50%) !important;\n clip-path: inset(50%) !important;\n\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"button-text\", $important: true);\n }\n\n &:focus {\n @include colour.colour-background(\"button-background\", $important: true);\n\n @include colour.colour-border(\"focus-outline\", 0.3125rem, $important: true);\n\n outline: none !important;\n }\n\n &:active,\n &:focus {\n width: auto !important;\n height: auto !important;\n margin: inherit !important;\n padding: 1rem !important;\n\n position: static !important;\n\n overflow: visible !important;\n\n white-space: inherit !important;\n\n clip: auto !important;\n -webkit-clip-path: none !important;\n clip-path: none !important;\n\n &:hover {\n @include colour.colour-font(\"button-hover-text\", $important: true);\n\n @include colour.colour-background(\n \"button-hover-background\",\n $important: true\n );\n }\n }\n}\n"]}

package/nationalarchives/components/skip-link/skip-link.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("TNAFrontend",[],t):"object"==typeof exports?exports.TNAFrontend=t():e.TNAFrontend=t()}(self,(()=>(()=>{"use strict";var e={d:(t,n)=>{for(var i in n)e.o(n,i)&&!e.o(t,i)&&Object.defineProperty(t,i,{enumerable:!0,get:n[i]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};function n(e){return n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},n(e)}function i(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable\|\|!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,r(i.key),i)}}function r(e){var t=function(e,t){if("object"!==n(e)\|\|null===e)return e;var i=e[Symbol.toPrimitive];if(void 0!==i){var r=i.call(e,"string");if("object"!==n(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"===n(t)?t:String(t)}e.r(t),e.d(t,{SkipLink:()=>o});var o=function(){function e(t){var n,i;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),n=this,(i=r(i="linkedElementListener"))in n?Object.defineProperty(n,i,{value:false,enumerable:!0,configurable:!0,writable:!0}):n[i]=false,this.$module=t,this.linkedElementId=t.getAttribute("href").split("#").pop(),this.$linkedElement=t&&this.linkedElementId&&document.getElementById(this.linkedElementId)}var t,n;return t=e,(n=[{key:"init",value:function(){var e=this;this.$module&&this.$linkedElement&&this.$module.addEventListener("click",(function(){return e.focusLinkedElement()}))}},{key:"focusLinkedElement",value:function(){var e=this;this.$linkedElement.getAttribute("tabindex")\|\|(this.$linkedElement.setAttribute("tabindex","-1"),this.$linkedElement.classList.add("tna-!--no-focus-style"),this.linkedElementListener\|\|(this.$linkedElement.addEventListener("blur",(function(){return e.removeFocusProperties()})),this.linkedElementListener=!0)),this.$linkedElement.focus()}},{key:"removeFocusProperties",value:function(){this.$linkedElement.removeAttribute("tabindex"),this.$linkedElement.classList.remove("tna-!--no-focus-style")}}])&&i(t.prototype,n),Object.defineProperty(t,"prototype",{writable:!1}),e}();return t})()));
2	+ //# sourceMappingURL=skip-link.js.map

package/nationalarchives/components/skip-link/skip-link.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"components/skip-link/skip-link.js","mappings":"CAAA,SAA2CA,EAAMC,GAC1B,iBAAZC,SAA0C,iBAAXC,OACxCA,OAAOD,QAAUD,IACQ,mBAAXG,QAAyBA,OAAOC,IAC9CD,OAAO,cAAe,GAAIH,GACA,iBAAZC,QACdA,QAAqB,YAAID,IAEzBD,EAAkB,YAAIC,GACvB,CATD,CASGK,MAAM,I,mBCRT,IAAIC,EAAsB,CCA1BA,EAAwB,CAACL,EAASM,KACjC,IAAI,IAAIC,KAAOD,EACXD,EAAoBG,EAAEF,EAAYC,KAASF,EAAoBG,EAAER,EAASO,IAC5EE,OAAOC,eAAeV,EAASO,EAAK,CAAEI,YAAY,EAAMC,IAAKN,EAAWC,IAE1E,ECNDF,EAAwB,CAACQ,EAAKC,IAAUL,OAAOM,UAAUC,eAAeC,KAAKJ,EAAKC,GCClFT,EAAyBL,IACH,oBAAXkB,QAA0BA,OAAOC,aAC1CV,OAAOC,eAAeV,EAASkB,OAAOC,YAAa,CAAEC,MAAO,WAE7DX,OAAOC,eAAeV,EAAS,aAAc,CAAEoB,OAAO,GAAO,G,stBCLvD,IAAMC,EAAQ,WAGnB,SAAAA,EAAYC,G,qGAASC,CAAA,KAAAF,G,EAAA,M,MAAA,4B,mCAFG,M,iDAAA,MAGtBG,KAAKF,QAAUA,EACfE,KAAKC,gBAAkBH,EAAQI,aAAa,QAAQC,MAAM,KAAKC,MAC/DJ,KAAKK,eACHP,GACAE,KAAKC,iBACLK,SAASC,eAAeP,KAAKC,gBACjC,C,QA4BC,O,EA5BAJ,G,EAAA,EAAAd,IAAA,OAAAa,MAED,WAAO,IAAAY,EAAA,KACAR,KAAKF,SAAYE,KAAKK,gBAG3BL,KAAKF,QAAQW,iBAAiB,SAAS,kBAAMD,EAAKE,oBAAoB,GACxE,GAAC,CAAA3B,IAAA,qBAAAa,MAED,WAAqB,IAAAe,EAAA,KACdX,KAAKK,eAAeH,aAAa,cACpCF,KAAKK,eAAeO,aAAa,WAAY,MAC7CZ,KAAKK,eAAeQ,UAAUC,IAAI,yBAE7Bd,KAAKe,wBACRf,KAAKK,eAAeI,iBAAiB,QAAQ,kBAC3CE,EAAKK,uBAAuB,IAE9BhB,KAAKe,uBAAwB,IAIjCf,KAAKK,eAAeY,OACtB,GAAC,CAAAlC,IAAA,wBAAAa,MAED,WACEI,KAAKK,eAAea,gBAAgB,YACpClB,KAAKK,eAAeQ,UAAUM,OAAO,wBACvC,M,oEAACtB,CAAA,CAtCkB,G","sources":["webpack://TNAFrontend/webpack/universalModuleDefinition","webpack://TNAFrontend/webpack/bootstrap","webpack://TNAFrontend/webpack/runtime/define property getters","webpack://TNAFrontend/webpack/runtime/hasOwnProperty shorthand","webpack://TNAFrontend/webpack/runtime/make namespace object","webpack://TNAFrontend/./src/nationalarchives/components/skip-link/skip-link.mjs"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"TNAFrontend\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"TNAFrontend\"] = factory();\n\telse\n\t\troot[\"TNAFrontend\"] = factory();\n})(self, () => {\nreturn ","// The require scope\nvar __webpack_require__ = {};\n\n","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","export class SkipLink {\n linkedElementListener = false;\n\n constructor($module) {\n this.$module = $module;\n this.linkedElementId = $module.getAttribute(\"href\").split(\"#\").pop();\n this.$linkedElement =\n $module &&\n this.linkedElementId &&\n document.getElementById(this.linkedElementId);\n }\n\n init() {\n if (!this.$module || !this.$linkedElement) {\n return;\n }\n this.$module.addEventListener(\"click\", () => this.focusLinkedElement());\n }\n\n focusLinkedElement() {\n if (!this.$linkedElement.getAttribute(\"tabindex\")) {\n this.$linkedElement.setAttribute(\"tabindex\", \"-1\");\n this.$linkedElement.classList.add(\"tna-!--no-focus-style\");\n\n if (!this.linkedElementListener) {\n this.$linkedElement.addEventListener(\"blur\", () =>\n this.removeFocusProperties(),\n );\n this.linkedElementListener = true;\n }\n }\n\n this.$linkedElement.focus();\n }\n\n removeFocusProperties() {\n this.$linkedElement.removeAttribute(\"tabindex\");\n this.$linkedElement.classList.remove(\"tna-!--no-focus-style\");\n }\n}\n"],"names":["root","factory","exports","module","define","amd","self","__webpack_require__","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Symbol","toStringTag","value","SkipLink","$module","_classCallCheck","this","linkedElementId","getAttribute","split","pop","$linkedElement","document","getElementById","_this","addEventListener","focusLinkedElement","_this2","setAttribute","classList","add","linkedElementListener","removeFocusProperties","focus","removeAttribute","remove"],"sourceRoot":""}

package/nationalarchives/components/skip-link/skip-link.mjs ADDED Viewed

@@ -0,0 +1,40 @@
+export class SkipLink {
+  linkedElementListener = false;
+  constructor($module) {
+    this.$module = $module;
+    this.linkedElementId = $module.getAttribute("href").split("#").pop();
+    this.$linkedElement =
+      $module &&
+      this.linkedElementId &&
+      document.getElementById(this.linkedElementId);
+  }
+  init() {
+    if (!this.$module || !this.$linkedElement) {
+      return;
+    }
+    this.$module.addEventListener("click", () => this.focusLinkedElement());
+  }
+  focusLinkedElement() {
+    if (!this.$linkedElement.getAttribute("tabindex")) {
+      this.$linkedElement.setAttribute("tabindex", "-1");
+      this.$linkedElement.classList.add("tna-!--no-focus-style");
+      if (!this.linkedElementListener) {
+        this.$linkedElement.addEventListener("blur", () =>
+          this.removeFocusProperties(),
+        );
+        this.linkedElementListener = true;
+      }
+    }
+    this.$linkedElement.focus();
+  }
+  removeFocusProperties() {
+    this.$linkedElement.removeAttribute("tabindex");
+    this.$linkedElement.classList.remove("tna-!--no-focus-style");
+  }
+}