/*
 VIEWPOINT FAMILY — ARCHIVAL DESIGN SYSTEM V1
 Warm archival product surface.
 Green is reserved for semantic confirmation only.
*/

:root{
  --vf-bg:#F7F1E7;
  --vf-paper:#FFFCF7;
  --vf-parchment:#EEE2CF;
  --vf-parchment-deep:#E6D6BD;

  --vf-ink:#302A25;
  --vf-ink-soft:#51483F;
  --vf-muted:#75695D;
  --vf-muted-light:#918579;

  --vf-gold:#A88445;
  --vf-gold-deep:#8C6C34;
  --vf-gold-soft:#C8AE7B;

  --vf-line:rgba(116,96,72,.18);
  --vf-line-gold:rgba(168,132,69,.30);

  --vf-confirmed:#C5A56A;
  --vf-reported:#9A7442;
  --vf-danger:#9B5148;

  --vf-shadow:
    0 18px 48px rgba(73,57,40,.10);

  --vf-shadow-soft:
    0 8px 24px rgba(73,57,40,.065);

  --vf-radius:24px;
  --vf-radius-small:14px;
}

html{
  background:var(--vf-bg);
}

body{
  margin:0;
  min-height:100vh;
  color:var(--vf-ink);
  font:
    16px/1.55
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  background:
    radial-gradient(
      circle at 82% 4%,
      rgba(168,132,69,.09),
      transparent 27rem
    ),
    radial-gradient(
      circle at 12% 36%,
      rgba(238,226,207,.72),
      transparent 34rem
    ),
    linear-gradient(
      180deg,
      #FBF7EF 0%,
      var(--vf-bg) 58%,
      #F2E8D8 100%
    );
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.28;
  background-image:
    linear-gradient(
      rgba(116,96,72,.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(116,96,72,.018) 1px,
      transparent 1px
    );
  background-size:42px 42px;
}

a{
  color:var(--vf-gold-deep);
}

.top{
  position:sticky;
  top:0;
  z-index:20;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;

  padding:16px 22px;

  border-bottom:
    1px solid var(--vf-line-gold);

  background:
    rgba(247,241,231,.91);

  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
}

.top a{
  color:var(--vf-gold-deep);
  text-decoration:none;
  font-weight:800;
  letter-spacing:.01em;
}

.lang,
.langButton,
button.lang{
  border:
    1px solid rgba(168,132,69,.55) !important;

  border-radius:999px !important;

  padding:9px 15px !important;

  background:
    rgba(255,252,247,.76) !important;

  color:
    var(--vf-gold-deep) !important;

  font-weight:800 !important;

  box-shadow:
    0 5px 18px rgba(73,57,40,.05);
}

main{
  position:relative;
  z-index:1;

  width:min(1180px,calc(100% - 44px));
  margin:0 auto;
  padding:54px 0 72px;
}

.eyebrow,
.kicker{
  margin:0 0 14px;

  color:var(--vf-gold-deep);

  font-size:.76rem;
  font-weight:850;
  letter-spacing:.17em;
  text-transform:uppercase;
}

h1,
h2,
h3{
  color:var(--vf-ink);
}

h1{
  margin:0;

  font-size:
    clamp(3.35rem,8vw,6.6rem);

  line-height:.88;
  letter-spacing:-.065em;
  font-weight:850;
}

h2{
  margin:
    14px 0 20px;

  font-size:
    clamp(1.8rem,4vw,2.75rem);

  line-height:1.04;
  letter-spacing:-.035em;
}

h3{
  letter-spacing:-.02em;
}

.intro{
  max-width:790px;
  margin-top:24px;

  color:var(--vf-muted);

  font-size:
    clamp(1rem,1.5vw,1.13rem);

  line-height:1.72;
}

.sectionLabel{
  margin-top:48px;
}

.grid{
  display:grid;
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(min(100%,310px),1fr)
    );

  gap:20px;
}

.card{
  position:relative;
  overflow:hidden;

  display:block;

  padding:25px;

  border:
    1px solid var(--vf-line-gold);

  border-radius:
    var(--vf-radius);

  background:
    linear-gradient(
      145deg,
      rgba(255,253,249,.96),
      rgba(250,244,234,.95)
    );

  color:var(--vf-ink);
  text-decoration:none;

  box-shadow:
    var(--vf-shadow-soft);

  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

.card::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:3px;

  background:
    linear-gradient(
      180deg,
      var(--vf-gold-soft),
      rgba(168,132,69,.18)
    );
}

.card:hover,
.card:focus-visible{
  transform:translateY(-2px);

  border-color:
    rgba(168,132,69,.62);

  box-shadow:
    var(--vf-shadow);

  outline:none;
}

.card h2,
.card h3{
  margin-top:12px;
}

.id{
  color:var(--vf-gold-deep);

  font:
    750 .72rem/1.4
    ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;

  letter-spacing:.03em;
}

.muted,
.status{
  color:var(--vf-muted);
}

.notice{
  padding:18px 20px;

  border:
    1px solid var(--vf-line);

  border-radius:
    var(--vf-radius-small);

  background:
    rgba(255,252,247,.58);

  color:var(--vf-muted);

  box-shadow:
    0 5px 18px rgba(73,57,40,.035);
}

.error{
  color:var(--vf-danger);
}

.success{
  color:var(--vf-confirmed);
}

input,
textarea,
select{
  box-sizing:border-box;

  border:
    1px solid var(--vf-line-gold);

  border-radius:13px;

  background:
    rgba(255,253,249,.94);

  color:var(--vf-ink);

  font:inherit;

  box-shadow:
    inset 0 1px 2px rgba(73,57,40,.035);
}

input:focus,
textarea:focus,
select:focus{
  border-color:var(--vf-gold);
  outline:
    3px solid rgba(168,132,69,.12);
}

button{
  font:inherit;
}

footer{
  color:var(--vf-muted);
  border-top:
    1px solid var(--vf-line);
}

@media(max-width:700px){
  .top{
    padding:13px 16px;
  }

  main{
    width:min(100% - 30px,1180px);
    padding:38px 0 54px;
  }

  h1{
    font-size:
      clamp(3rem,17vw,5.3rem);
  }

  .intro{
    margin-top:20px;
  }

  .card{
    padding:21px;
    border-radius:20px;
  }
}

@media(prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    scroll-behavior:auto !important;
    transition:none !important;
  }
}


/* v15.26.15 — VIEWPOINT Family editorial typography */
main > .eyebrow{
  margin-bottom:1rem;
  font-size:.68rem;
  letter-spacing:.22em;
  font-weight:700;
}

main > h1{
  max-width:13ch;
  margin:0 0 1.35rem;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(2.8rem,5.2vw,4.8rem);
  line-height:.94;
  letter-spacing:-.045em;
  font-weight:500;
}

main > .intro{
  max-width:48rem;
  margin:0 0 2.8rem;
  font-size:clamp(1rem,1.35vw,1.16rem);
  line-height:1.65;
}

main > h2{
  margin:0 0 1.25rem;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(1.65rem,2.8vw,2.35rem);
  line-height:1.05;
  letter-spacing:-.025em;
  font-weight:500;
}

#families{
  margin-top:.25rem;
}

.family-card{
  border-radius:18px;
}

.family-card h2{
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(1.35rem,2vw,1.85rem);
  line-height:1.08;
  letter-spacing:-.02em;
  font-weight:500;
}

html[lang="el"] main > h1{
  font-size:clamp(2.45rem,4.65vw,4.15rem);
  letter-spacing:-.035em;
}

html[lang="el"] main > h2{
  font-size:clamp(1.55rem,2.5vw,2.15rem);
}

@media(max-width:600px){
  main > h1{
    font-size:clamp(2.35rem,12vw,3.35rem);
    line-height:.97;
  }

  html[lang="el"] main > h1{
    font-size:clamp(2.15rem,10.5vw,3rem);
  }

  main > .intro{
    margin-bottom:2.25rem;
    font-size:1rem;
  }

  main > h2{
    font-size:clamp(1.45rem,7.2vw,1.9rem);
  }
}

.identification-context {
  margin: 1.25rem 0 1.5rem;
  max-width: 34rem;
}

.identification-context[hidden] {
  display: none;
}

.identification-context img {
  display: block;
  width: 100%;
  max-height: 24rem;
  object-fit: contain;
  background: rgba(30, 27, 22, 0.035);
  border: 1px solid rgba(87, 69, 42, 0.16);
  border-radius: 1rem;
}

.identification-context figcaption {
  margin-top: 0.55rem;
  font-size: 0.82rem;
  letter-spacing: 0.035em;
  color: rgba(42, 36, 29, 0.68);
}

.identification-form-grid textarea {
  min-height: 7rem;
}

@media (min-width: 760px) {
  .identification-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1.25rem;
  }

  .identification-form-grid > label:nth-of-type(5),
  .identification-form-grid > label:nth-of-type(8),
  .identification-form-grid > .review-note,
  .identification-form-grid > .form-actions,
  .identification-form-grid > .status {
    grid-column: 1 / -1;
  }
}

@media (max-width: 759px) {
  .identification-context {
    margin-top: 1rem;
  }

  .identification-context img {
    max-height: 20rem;
  }
}

/* v15.26.15 — responsive Contribution Studio */

#identification-workspace {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

#identification-workspace > * {
  min-width: 0;
}

.identification-context {
  width: min(100%, 42rem);
  max-width: 100%;
  margin: 1.25rem auto 1.5rem;
}

.identification-context img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: min(56vh, 34rem);
  object-fit: contain;
}

.identification-form-grid {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.identification-form-grid > * {
  min-width: 0;
  max-width: 100%;
}

.identification-form-grid label,
.identification-form-grid input,
.identification-form-grid textarea,
.identification-form-grid select,
.identification-form-grid button {
  min-width: 0;
  max-width: 100%;
}

.identification-form-grid input,
.identification-form-grid textarea,
.identification-form-grid select {
  width: 100%;
}

@media (min-width: 900px) {
  .identification-form-grid {
    display: grid;
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr);
    gap: 1rem 1.25rem;
  }
}

@media (min-width: 760px) and (max-width: 899px) {
  .identification-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }

  .identification-form-grid > * {
    grid-column: 1 / -1;
  }
}

@media (max-width: 759px) {
  #identification-workspace {
    overflow: visible;
  }

  .identification-context {
    width: 100%;
    margin: 1rem 0 1.25rem;
  }

  .identification-context img {
    max-height: 48vh;
    border-radius: 0.8rem;
  }

  .identification-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.9rem;
  }

  .identification-form-grid > * {
    grid-column: 1 / -1;
  }
}

@media (max-width: 420px) {
  .identification-context img {
    max-height: 42vh;
  }

  #identification-workspace h2 {
    overflow-wrap: anywhere;
  }

  .identification-form-grid button {
    white-space: normal;
  }
}

/* v15.26.15 — intrinsic responsive photograph */

#identification-workspace .identification-context {
  width: fit-content;
  max-width: 100%;
  margin: 1.25rem auto 1.5rem;
}

#identification-workspace .identification-context img {
  display: block;

  width: auto;
  height: auto;

  max-width: 100%;
  max-height: calc(100vh - 12rem);

  margin-inline: auto;

  object-fit: contain;

  background: rgba(30, 27, 22, 0.035);
  border: 1px solid rgba(87, 69, 42, 0.16);
  border-radius: 1rem;
}

@supports (height: 100dvh) {
  #identification-workspace .identification-context img {
    max-height: calc(100dvh - 12rem);
  }
}

@media (max-width: 759px) {
  #identification-workspace .identification-context {
    width: fit-content;
    max-width: 100%;
    margin: 1rem auto 1.25rem;
  }

  #identification-workspace .identification-context img {
    width: auto;
    height: auto;

    max-width: 100%;
    max-height: calc(100vh - 9rem);
  }

  @supports (height: 100dvh) {
    #identification-workspace .identification-context img {
      max-height: calc(100dvh - 9rem);
    }
  }
}

.family-attribution{
  position:relative;
}

.familyAttributionToggle{
  width:24px;
  height:24px;
  margin:7px 0 3px;
  padding:0;
  border:1px solid rgba(233,163,59,.55);
  border-radius:50%;
  background:transparent;
  color:var(--amber,#e9a33b);
  font:700 12px/22px system-ui,sans-serif;
  text-align:center;
  cursor:pointer;
}

.familyAttributionDetail{
  display:none;
  margin-top:6px;
}

.family-attribution.detail-open .familyAttributionDetail{
  display:block;
}

@media (hover:hover) and (pointer:fine){
  .family-attribution:hover .familyAttributionDetail,
  .family-attribution:focus-within .familyAttributionDetail{
    display:block;
  }
}